Raycasting hard-faces of a mesh -- Three.js

Raycasting hard-faces of a mesh -- Three.js

本文关键字：Three js mesh hard-faces of Raycasting      更新时间：2023-09-26

我在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);

之后，我想光线投射到立方体的面，鼠标在上面。因此，我创建了这个函数

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 );

它几乎工作正确。我是说，它会改变半张脸的颜色。你知道，由BoxGeometry()创建的网格有12个Face3。我想要完整的面或硬面或 Face4 由Face3+Face3形成。知道我该怎么做吗?

仅适用于现成的非buffer几何体，如…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);

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

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;
}

编辑:显然，如果使用可变数量的段宽度/高度/深度，或者如果使用非柏拉图立体几何，它会变得更复杂。

相关文章：