ThreeJS如何添加交互性，

Question

我在 ThreeJS 中渲染了模型。现在，我需要添加一些交互性，以便：

1. 根据用户输入的值，我需要为模型的某些部分着色。
2. 如果我单击任何模型部件，我希望它突出显示。

我是 ThreeJS 的新手，有点困惑。我该怎么做呢？

Answer 1

1. 如果要更新模型的某些部分，则需要查看纹理和材料示例。
2. 当您单击模型时，您是要突出显示整个模型还是仅突出显示当前鼠标下方的脸部？无论哪种方式，由于您在 3D 中工作，您需要为鼠标位置创建一个矢量，您将根据相机的投影矩阵取消投影该矢量，并使用相机的位置在 3D 场景中深度拍摄光线以查看哪个对象(s) 相交。幸运的是，该代码已经存在于许多示例中，例如canvas_interactive_cubes：

在 init() 中：

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

和：

function onDocumentMouseDown( event ) {

                event.preventDefault();

                var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
                projector.unprojectVector( vector, camera );

                var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

                var intersects = ray.intersectObjects( objects );

                if ( intersects.length > 0 ) {

                    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

                    var particle = new THREE.Particle( particleMaterial );
                    particle.position = intersects[ 0 ].point;
                    particle.scale.x = particle.scale.y = 8;
                    scene.add( particle );

                }

                /*
                // Parse all the faces
                for ( var i in intersects ) {

                    intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );

                }
                */
            }

我建议从那里开始。