[英]ThreeJS how to change color of hovered face on a PlaneGeometry
I want to change to color of the hovered face of my PlaneGeometry but I don't find how to get the selected face. 我想更改为我的PlaneGeometry悬停的面孔的颜色,但是我找不到如何获取所选面孔的颜色。 Here is my code:
这是我的代码:
//THREE.WebGLRenderer 69
// Generating plane
var geometryPlane = new THREE.PlaneGeometry( 100, 100, 20, 10 );
for (var vertIndex = 0; vertIndex < geometryPlane.vertices.length; vertIndex++) {
geometryPlane.vertices[vertIndex].z += Math.random();
}
geometryPlane.dynamic = true;
geometryPlane.computeFaceNormals();
geometryPlane.normalsNeedUpdate = true;
var materialPlane = new THREE.MeshLambertMaterial( {
color: 0xffff00,
side: THREE.DoubleSide,
shading: THREE.FlatShading,
overdraw: 0.5,
vertexColors: THREE.FaceColors
} );
plane = new THREE.Mesh( geometryPlane, materialPlane );
plane.geometry.colorsNeedUpdate = true;
// Mouse event
container[0].addEventListener( 'mousemove', onMouseMove, false );
function onMouseMove( event ) {
var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
var mouseY = -( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3( mouseX, mouseY, camera.near );
vector.unproject( camera );
raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
if ( intersects.length > 0 ) {
var INTERSECTED = intersects[ 0 ].object;
for ( var i = 0; i < INTERSECTED.geometry.faces.length; i ++ ) {
// Change the color of all faces
// I want only the hovered one
INTERSECTED.geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
}
}
intersects[0].point is the intersection point. intersects [0] .point是相交点。
intersects[0].face is the intersected face . intersects [0] .face是相交的face 。
Edit : and the intersection function is not called in your code : raycaster is created but not used. 编辑:在您的代码中未调用相交函数:创建但未使用raycaster。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.