光线投射网格的硬面 - Three.js

i created a box in three.js

我在three.js中创建了一个盒子

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5, 5, 10);

var geo = new THREE.BoxGeometry(5,2,5);

var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, wireframe:false, vertexColors: THREE.FaceColors});

var mesh = new THREE.Mesh( geo, mat);
scene.add(mesh);

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);

After that i want to raycast to cubes faces which mouse over on.Thus i created this function

之后,我想光线投射到鼠标悬停在其上的立方体面孔。因此我创建了这个功能

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove( event ) {
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 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.colorsNeedUpdate = true;
    }

    renderer.render( scene, camera );
}

window.addEventListener( 'mousemove', onMouseMove, false );

It nearly works correct. i mean, it changes color of the half of the face. You know, the mesh which created by BoxGeometry() has 12 Face3. I want the complete face or hard-face or Face4 which took shape by Face3+Face3. Any idea how i can accomplish this?

它几乎正常。我的意思是,它会改变脸部一半的颜色。你知道,BoxGeometry()创建的网格有12个Face3。我想要Face3 + Face3形成的完整的脸部或硬脸或Face4。知道我怎么能做到这一点?

2 个解决方案

#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:

在您的具体示例中,假设您使用的是默认的盒子几何体,并且我们知道每侧有2个面,包裹在特定的方向/顺序中,您应该能够将两个面中的每一个面对在一起,如下所示:

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.

编辑:显然,如果对宽度/高度/深度使用可变数量的段,或者使用非柏拉图实体几何,则会更复杂一些。

#2

Only works for ready-built, non-Buffer geometries like .. BoxGeometry, SphereGeometry, CircleGeometry etc...

仅适用于现成的非缓冲几何,如BoxGeometry,SphereGeometry,CircleGeometry等...

var intersects = raycaster.intersectObject( mesh);

for ( var i = 0; i < intersects.length; i++ ) {

    var faceIndex = intersects[i].faceIndex;

    if(faceIndex == 0 || (faceIndex % 2) == 0) {
        intersects[i].object.geometry.faces[faceIndex].color.setHex( 0xD1B3B3);
        intersects[i].object.geometry.faces[faceIndex + 1].color.setHex( 0xD1B3B3);
        intersects[i].object.geometry.colorsNeedUpdate = true;

    }else {
        intersects[i].object.geometry.faces[faceIndex].color.setHex( 0xD1B3B3);
        intersects[i].object.geometry.faces[faceIndex - 1].color.setHex( 0xD1B3B3);
        intersects[i].object.geometry.colorsNeedUpdate = true;
    }

}

renderer.render(scene, camera);