ThreeJS如何添加交互性，

Question

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

1. 根據用戶輸入的值，我需要爲模型的某些部分着色。
2. 如果我點擊任何模型零件，我希望它被突出顯示。

我是ThreeJS的新手，有點困惑。我該怎麼做呢？

Answer 1

1. 如果您想更新模型的一部分，你需要看看紋理&材料examples。
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); 

       } 
       */ 
      } 

我建議從那裏開始。

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