は、メッシュのハード顔をレイキャスティング -

Question

Three.js私はこの機能

を作成on.Thusにわたりたマウスのキューブ面にレイキャストしたいその後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であることを知っています。私は完全な顔またはハード面またはFace3+Face3によって形を取っFace4をしたいです。どのように私はこれを達成することができますか？

Answer 1

だけループ `geometry.faces`することができます... .. 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); 

Answer 2

デフォルトのボックスジオメトリを使用していて、側面に2つの面があり、特定の方向/順序で折り返されていることがわかっている場合、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; 
} 

編集：幅/高さ/深さのためのセグメントの可変数を使用している場合は明らかに、それはもう少し複雑になるだろう、または非プラトニックソリッドジオメトリを使用している場合。