ThreeJS如何在PlaneGeometry上改变悬浮面的颜色

时间:2014-12-02 11:53:52

标签: javascript three.js

我想改变我的PlaneGeometry悬浮脸的颜色,但我不知道如何获得所选的脸。这是我的代码:

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

1 个答案:

答案 0 :(得分:1)

相交[0]。点是交点 intersects [0] .face是相交的脸

编辑:并且代码中未调用交集函数:已创建raycaster但未使用。