Topic

part.1

by joe chan

HTML

<h1 style="text-align:center"> Dual Canvas
<br>of the same scene
</h1>

<hr>
<div id="container2" style="background:pink; float:left; margin:3px; width:45vw; height:45vw"></div>
<div id="container" style="float:right; margin:3px; width:45vw; height:45vw">
</div>
<br>
<hr style="clear:both">
<div style="text-align:center; width:100vw;">
  <button id="toggle"> toggle turn </button>
  <button id="decrement">
    << </button>
      <input id="zz" style="text-align:center; width:10vw" type="text">
      <button id="increment"> >> </button>
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

CSS

.dbutton {
  padding: 4px;
  background: green;
  border-radius: 4px;
  cursor: pointer;
}

.dbutton.selected {
  background: orange;
}

JavaScript

var camera, scene, renderer;
var camera2, scene2, renderer2;
var controls;

var ball;
var zz = 0;
var turn = false;
var position_pm =[];

var keyboard = new KeyboardState();
var x = 50,
  y, z = 0;

$('#increment').click(
  function() {
    console.log('increment');
    zz += 0.05;
  }
);
$('#decrement').click(
  function() {
    console.log('decrement');
    zz -= 0.05;
    if ($(this).hasClass("selected")) {
      console.log('long press');
    }
  }
);

$('#toggle').click(function() {
  turn = !turn;
});

init();
animate();

function buildModel() {

  var materialArray = [
    new THREE.MeshBasicMaterial({ // +x
      color: 0x009900,
      side: THREE.BackSide
    }),
    new THREE.MeshBasicMaterial({ // -x
      color: 0x880088,
      side: THREE.BackSide
    }),
    new THREE.MeshBasicMaterial({ // +y
      color: 0x999999,
      side: THREE.BackSide

    }),
    new THREE.MeshBasicMaterial({ // -Y
      color: 0x990000,
      wireframe: true,
      visible: false
    }),
    new THREE.MeshBasicMaterial({ // +z
      color: 0x009999,
      side: THREE.BackSide

    }),
    new THREE.MeshBasicMaterial({ // -Z
      color: 0xFFFF00,
      side: THREE.BackSide
    })
  ];

  var material = new THREE.MultiMaterial(materialArray);
  cube = new THREE.Mesh(new THREE.BoxGeometry(150, 150, 150), material);

  return cube;
}

function init() {

  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);
  $("#container").append(renderer.domElement);

  renderer2 = new THREE.WebGLRenderer();
  renderer2.setSize(ww, hh);
  renderer2.setClearColor(0x888800);
  $("#container2").append(renderer2.domElement);

  ////////////////////////////////////////////////

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(90, ww / hh, 1, 1000);
  camera.position.z = 50;

  camera2 = new THREE.PerspectiveCamera(50, ww / hh, 1, 1000);
 ...