three.js - 使用 THREE.js 识别画布中两个几何图形的重叠区域

Question

我需要在画布中识别两个几何图形的重叠区域，并用不同的颜色/纹理显示重叠区域。

示例代码：http: //jsfiddle.net/v4B3d/1/

var 相机、场景、渲染器、几何、材质、网格、mesh2；

在里面（）; 动画（）；

函数初始化（）{

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了解更多信息。