Идентификация области перекрытия двух геометрий в холсте с использованием THREE.js

Question

Мне нужно идентифицировать область перекрытия двух геометрий в холсте и показать область перекрытия с различным цветом/текстурой.

пример кода: http://jsfiddle.net/v4B3d/1/

вар камеры, сцена, рендерер, геометрия, материал, сетка, mesh2;

init(); aimate();

функция инициализации() {

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

}

функция одушевленные() {

requestAnimationFrame(animate); 
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); 

}

Пожалуйста, дайте мне знать, как достичь этого.

Заранее спасибо.

Answer 1

Возможно, вы захотите сделать третью геометрию из области перекрытия. Затем вы можете сделать это, как хотите.

Это может быть достигнуто с помощью булевых операций конструктивной сплошной геометрии (CSG) (а именно, пересечения). Если вы хотите отображать перекрывающуюся часть, вы можете отобразить только результат пересечения.

Для библиотеки CSG.js существует оболочка Three.js, которая должна облегчить задачу. См. 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/ и http://en.wikipedia.org/wiki/Constructive_solid_geometry для получения дополнительной информации.