Dual Canvas

formatting

by joe chan

HTML

<h1 style="text-align:center"> Dual Canvas
<br>require coordinate change
</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>
<hr style="clear:both">
<div style="float:left; margin-left: 10px; width:32vw;">Current Position:
  <input id="x" style="width:20vw" type="text" value="(default value)">
  <input id="y" style="width:20vw" type="text" value="(default value)">
</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://threejs.org/examples/js/controls/OrbitControls.js">
</script>

JavaScript

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

var mouse = new THREE.Vector2();
var puck, puck2;
var pickplane;
var raycaster = new THREE.Raycaster();

$('#x').change(
  function() {
    console.log($(this).val());
    puck.position.x = $(this).val();
  }
);
$('#y').change(
  function() {
    console.log($(this).val());
    puck.position.y = $(this).val();
  }
);

init();
animate();

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.OrthographicCamera(-100, 100, 100, -100, -1, 100);
  camera.position.z = 50;
  scene.add(camera);

  scene2 = new THREE.Scene();
  camera2 = new THREE.PerspectiveCamera(50, ww/hh, 1, 1000);
  camera2.position.z = 500;
  scene2.add(camera2);

	var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  gridXZ.rotation.x = Math.PI / 2;
  scene.add(gridXZ);

	scene2.add ( new THREE.GridHelper(200, 20, 'red', 'white') );
  controls = new THREE.OrbitControls (camera2, renderer2.domElement);
  
  //////////////////////////////////////////////////////////////////////////////
  pickplane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200),
    new THREE.MeshBasicMaterial({
      color: 0xffff23
    }));
  scene.add(pickplane);
  pickplane.material.visible = false;

  puck = new THREE.Mesh(new THREE.CircleGeometry(10, 20), new THREE.MeshBasicMaterial());
  scene.add(puck);
  
  puck2 = new THREE.Mesh(new THREE.SphereGeometry(10, 20), new THREE.MeshNormalMaterial());
  scene2.add(puck2);

  window.addEventListener('resize', onWindowResize, false);

 ...