javascript - ThreeJS如何添加交互性，

Question

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

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

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

Answer 1

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

在初始化()中:

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

                }
                */
            }

我建议从那里开始。