title: Identifying overlap region of two geometries in a canvas using THREE.js
body: <p>I need to identify the overlapping region of two geometries in a canvas and show the overlapping region with different color/texture.</p>
  
  <p>sample code: <a href="http://jsfiddle.net/v4B3d/1/" rel="nofollow">http://jsfiddle.net/v4B3d/1/</a></p>
  
  <p>var camera, scene, renderer, geometry, material, mesh,mesh2;</p>
  
  <p>init();
  animate();</p>
  
  <p>function init() {</p>
  
  <pre><code>scene = new THREE.Scene();
  
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);
  
  geometry = new THREE.CubeGeometry(100, 100, 100);
  material = new THREE.MeshNormalMaterial();
  
  mesh = new THREE.Mesh(geometry, material);
  mesh2 = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  scene.add(mesh2);
  mesh.position.y = -30;
  mesh2.position.y = 40;
  
  renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  document.body.appendChild(renderer.domElement);
  </code></pre>
  
  <p>}</p>
  
  <p>function animate() {</p>
  
  <pre><code>requestAnimationFrame(animate);
  render();
  </code></pre>
  
  <p>}</p>
  
  <p>function render() {</p>
  
  <pre><code>mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  mesh2.rotation.x += 0.01;
  mesh2.rotation.y += 0.02;
  
  renderer.render(scene, camera);
  </code></pre>
  
  <p>}</p>
  
  <p>Please let me know how to achieve this.</p>
  
  <p>Thanks in advance.</p>