Container HTML 2

by jason870509

HTML

<h1 style="text-align:center">
  Image & Map
</h1>
<hr>
<div id="container" style="float:left;width:45vw;height:45vw;background-color:pink">
  <canvas id="mycanvas"></canvas>
</div>
<div id="container" style="float:left;width:45vw;height:45vw;background-color:pink">
  <canvas id="mycanvas2"></canvas>
</div>
<div>
  <img src='https://i.imgur.com/bgynmml.png' usemap="#lightSwitch" style="width:249px;height:160px;">
</div>
<map name="lightSwitch">
  <area shape="circle" class='light' id='redlight' coords="69,79,12" href="#">
  <area shape="circle" class='light' id='greenlight' coords="181,79,12" href="#">
</map>
<!------------------------------------------------------------------->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

div.centerImage {
  text-align: center;
  float: left;
  width: 46vw;
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var pointRed, pointGreen;
var redOff = false;
var greenOff = false;
$('.light').click(function(e) {
  e.preventDefault();
	if (this.id === 'redlight') {
  	redOff = !redOff;
  } else {
  	greenOff = !greenOff;
  }
})


init();
animate();


function init() {

  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  var cc = document.getElementById('mycanvas');
  renderer = new THREE.WebGLRenderer({
    canvas: cc
  });
  renderer.setSize(ww, hh);
  //renderer.setClearColor(0x888888);
  // $("#container2").append(renderer.domElement);
  
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, ww / hh, 1, 1000);
  camera.position.set(0, 400, 500);
	controls = new THREE.OrbitControls(camera, renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);

	///////////////////////////////////////////////////////////////////
	floor = new THREE.Mesh (new THREE.PlaneGeometry(249,160), new THREE.MeshPhongMaterial({ambient:0x333333, side:THREE.DoubleSide}));
  scene.add (floor);
  floor.rotation.x = -Math.PI/2;

	pointRed = new THREE.PointLight( 0xff0000, 1);
	pointRed.position.set( -249/2+69, 50, 0);
	scene.add( pointRed );
  
	pointGreen = new THREE.PointLight( 0x00ff00, 1);
	pointGreen.position.set( -249/2+181, 50, 0 );
	scene.add( pointGreen );

	// ambient light for basic brightness when lights are off
	let ambientLight = new THREE.AmbientLight( 0x404040 );
	scene.add(ambientLight);


}


function onWindowResize() {
  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();

  camera.aspect = ww / hh;
  camera.updateProjectionMatrix();
  renderer.setSize(ww, hh);
}

function animate() {
	pointRed.intensity = redOff ? 0 : 1;
	pointGreen.intensity = greenOff ? 0 : 1;
  
  requestAnimationFrame(animate);
  renderer.render (scene, camera);
}