ThreeJS如何添加交互性， [英] ThreeJS how to add interactivity,

问题描述

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

I have rendered model in ThreeJS. Now, I need to add some interactivity so that:

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

我是 ThreeJS 的新手，有点困惑.我该怎么做?

I am new to ThreeJS and a little confused. How do I do this?

推荐答案

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

在 init() 中:

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

                }
                */
            }

我建议从那里开始.

这篇关于ThreeJS如何添加交互性，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！