ba đối tượng có thể nhấp js

Question

Tôi có hai đối tượng 3D "mắt lưới" mà tôi đã tạo trong ba.js. Tôi muốn thêm sự kiện nhấp chuột vào các đối tượng này để khi tôi nhấp vào một trong số chúng, nó sẽ được thu nhỏ và khi tôi nhấp vào một đối tượng khác, nó sẽ xoay.

Tôi đã thử phương pháp này để thêm sự kiện nhấp vào đối tượng và đối tượng không hoạt động.

<script src='threex.domevent.js'> </script> 
<script> 

     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 1, 1000); 
     camera.position.z = 100; 

     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 

     var geometry = new THREE.CubeGeometry(1,1,1); 
     var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
     var cube = new THREE.Mesh(geometry, material); 
     scene.add(cube); 

     cube.addEventListener('click',function(){cubeScale()} , false); 

     function cubeScale() 
      { 
      cube.scale.x *= 20; 
      } 


     var render = function() { 
      requestAnimationFrame(render); 
      cube.rotation.y += 0.1; 
      renderer.render(scene, camera); 
     }; 

     render(); 

    </script> 

Answer 1

Tuyệt đối bạn cần phải thực hiện raycaster để chọn/nhấp/chọn đối tượng nhất định trong three.js. Tôi đã thực hiện nó trong một dự án của tôi bằng cách sử dụng ba.js và raycaster với mô hình collada. Để bạn tham khảo, những liên kết này có thể giúp bạn:

1. http://soledadpenades.com/articles/three-js-tutorials/object-picking/
2. http://jensarps.de/2012/08/10/mouse-picking-collada-models-with-three-js/

Answer 2

Bạn có thể sử dụng pickingRay để thực hiện cách nhấn với máy ảnh chính tả như thế sau trong mã này:

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

var rayCaster = projector.pickingRay(vector, camera); 

var intersectedObjects = rayCaster.intersectObjects(scene.children, true); 

Nhưng nếu bạn muốn thực hiện nhấp vào camera quan sát, bạn phải thực hiện một cú nhấp chuột bằng cách sử dụng unprojectVector như rằng sau dưới đây:

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

var rayCaster = projector.unprojectVector(vector, camera); 

var intersectedObjects = rayCaster.intersectObjects(objects); 

Answer 3

bạn có thể sử dụng quản lý sự kiện này three.interaction

và thấy điều này demo

import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three'; 
 
import { Interaction } 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 interaction, then you can add interaction-event with your free style 
 
const interaction = new Interaction(renderer, scene, camera); 
 

 
const cube = new Mesh(
 
    new BoxGeometry(1, 1, 1), 
 
    new MeshBasicMaterial({ color: 0xffffff }), 
 
); 
 
scene.add(cube); 
 
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) {}); 
 
// and so on ... 
 

 
/** 
 
* you can also listen on parent-node or any display-tree node, 
 
* source event will bubble up along with display-tree. 
 
* you can stop the bubble-up by invoke ev.stopPropagation function. 
 
*/ 
 
scene.on('touchstart', ev => { 
 
    console.log(ev); 
 
}) 
 
scene.on('touchmove', ev => { 
 
    console.log(ev); 
 
})