Identifying overlap region of two geometries in a canvas using THREE.js

Question

I need to identify the overlapping region of two geometries in a canvas and show the overlapping region with different color/texture.

sample code: http://jsfiddle.net/v4B3d/1/

var camera, scene, renderer, geometry, material, mesh,mesh2;

init(); animate();

function init() {

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);

}

function animate() {

requestAnimationFrame(animate);
render();

}

function render() {

mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
mesh2.rotation.x += 0.01;
mesh2.rotation.y += 0.02;

renderer.render(scene, camera);

}

Please let me know how to achieve this.

Thanks in advance.

yaku yaku · Accepted Answer · 2013-05-17T07:11:57

You probably want to make a third geometry from the overlapping region. You can then render that however you want.

This can be achieved using Constructive Solid Geometry (CSG) boolean operations (namely, intersection). If you only want to render the overlapping part, you can render only the intersection result.

There is a Three.js wrapper for CSG.js library, that should make it easy. See http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/ , http://www.chandlerprall.com/2011/12/constructive-solid-geometry-with-three-js/ and http://en.wikipedia.org/wiki/Constructive_solid_geometry for more information.

Identifying overlap region of two geometries in a canvas using THREE.js

1 Answers