单击时使用 Raycaster 更改 Box 面的颜色答案

【问题标题】：Using Raycaster to change the colour of a Box's face when clicked单击时使用 Raycaster 更改 Box 面的颜色
【发布时间】：2019-07-16 15:52:03
【问题描述】：

我试图让光线投射器能够选择已创建的立方体面之一，然后更改已单击的面的颜色。我已经能够让它与整个对象一起工作，但不能与对象个别面孔一起工作。

有人可以解释 intersectObject() 和 intersectObjects() 之间的区别，因为我认为这与问题有关。

这是尝试选择立方体面的代码，当单击立方体的面时，它会加载但不执行任何操作

function onDocumentMouseDown( event ){ 
    event.preventDefault();

    mouse.x = (event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - (event.clientY / renderer.domElement.height ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObject( mesh );

    for (var i = 0; i < intersects.length; i++){
        intersects[ i ].face.color.setHex( 0xDDC2A3 );
        mesh.geometry.colorsNeedUpdating = true;
    }
    renderer.render(scene, camera);
   }

}

这是我场景中的一个立方体

var cubeGeometry2 = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial2 = new THREE.MeshLambertMaterial({color:0xffff00});
var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
//Cube position to sit on top of the plane, allow to cast shadows and add
cube2.position.x = -5;
cube2.position.y = -5;
cube2.position.z = -5;
scene.add(cube2);

【问题讨论】：

标签： javascript three.js raycasting

【解决方案1】：

谁能解释一下 intersectObject() 和 intersectObjects() 之间的区别，因为我认为这与问题有关。

就像在THREE.Raycaster 的documentation 中提到的那样，intersectObject() 需要一个对象，而intersectObjects() 需要一个对象数组作为第一个参数。但是，这与您的问题无关。

问题在于您设置材质的方式。如果要为每个面设置颜色，则必须将THREE.Material.vertexColors 设置为THREE.FaceColor。请记住，此方法仅适用于 THREE.Geometry。

演示：https://jsfiddle.net/sv05rwny/

three.js R101

【讨论】：