Question

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

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

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

Answer 1

如果您想更新模型的某些部分，您需要查看纹理＆amp ;;材料examples。
当您单击模型时，您希望突出显示整个模型还是仅显示当前鼠标下的面部？无论哪种方式，由于你在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 );

                }
                */
            }

我建议从那里开始。

Answer 2

更新

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 raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

                    var intersects = raycaster.intersectObjects( objects );

                    if ( intersects.length > 0 ) {

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

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

                    }

                }

Answer 3

此活动经理可以帮助您。

import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
import { InteractionManager } from 'three.interaction';

const renderer = new WebGLRenderer({ canvas: canvasElement });
const scene = new Scene();
const camera = new PerspectiveCamera(60, width / height, 0.1, 100);

// new a manager, then you can add interaction-event with your free style
const interactionManager = new InteractionManager(renderer, scene, camera);

const cube = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshBasicMaterial({ color: 0xffffff }),
);
cube.cursor = 'pointer';
cube.on('click', function(ev) {});
cube.on('touchstart', function(ev) {});
cube.on('touchcancel', function(ev) {});
cube.on('touchmove', function(ev) {});
cube.on('touchend', function(ev) {});
cube.on('mousedown', function(ev) {});
cube.on('mouseout', function(ev) {});
cube.on('mouseover', function(ev) {});
cube.on('mousemove', function(ev) {});
cube.on('mouseup', function(ev) {});
// ...

scene.add(cube);

更多详细信息，请参阅three.interaction.js

三个JS如何添加交互性，

3 个答案: