我试图让 raycaster 能够选择已创建的立方体面之一,然后更改已单击的面的颜色。我已经能够让它处理整个对象,但不能处理对象的各个面。
有人可以解释一下 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);
最佳答案
Could someone please explain the difference between intersectObject() and intersectObjects() as I think that this is involved in the issue.
如 documentation 中所述在 THREE.Raycaster
中,intersectObject()
需要一个对象,而 intersectObjects()
需要一个对象数组作为第一个参数。但是,这与您的问题无关。
问题在于您设置 Material 的方式。如果您想为每张脸都设置颜色,则必须将 THREE.Material.vertexColors
设置为 THREE.FaceColor
。请记住,此方法仅适用于 THREE.Geometry
。
演示:https://jsfiddle.net/sv05rwny/
three.js R101
关于javascript - 单击时使用 Raycaster 更改 Box 面的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54829003/