I've been experimenting with the raycaster in order to select faces of cubes that are created, and then change the color of the clicked face. So far, I've managed to make it work for selecting entire objects, but not individual faces of those objects.
Can someone please clarify the distinction between intersectObject() and intersectObjects()? I suspect this difference might be causing the issue.
Below is the code snippet attempting to select a cube face, which compiles but doesn't respond when clicking on a face:
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);
}
}
Here's one of the cubes in my scene:
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);