Skip to content Skip to sidebar Skip to footer

Raycasting Hard-faces Of A Mesh -- Three.js

i created a box in three.js var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.set(5,

Solution 1:

In your specific example, given that you're using a default box-geometry and we know that there are 2 faces per side, wrapped in a specific direction/order, you should be able to pair each of the two faces together like so:

var facesPerSide = 2;
for ( var i = 0; i < intersects.length; i++ ) {
    var side = Math.floor(intersects[i].faceIndex/facesPerSide);
    for(var j=0;j<facesPerSide;j++) {
        mesh.geometry.faces[side*facesPerSide+j].color.setHex(0xDDC2A3);
    }
    mesh.geometry.colorsNeedUpdate = true;
}

Edit: Obviously it would get a bit more complex if using a variable number of segments for width/height/depth, or if using non-platonic solid geometry.


Post a Comment for "Raycasting Hard-faces Of A Mesh -- Three.js"