trzy klikalne obiekty

Question

Mam dwa obiekty 3D "siatki", które stworzyłem w three.js. Chcę dodać zdarzenie kliknięcia do tych obiektów, tak aby po kliknięciu jednego z nich został on przeskalowany, a po kliknięciu drugiego obrócony.

Próbowałem tej metody, aby dodać zdarzenie click do obiektu i nie działa.

<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

Absolutnie trzeba zaimplementować RayCaster aby wybrać/kliknij/pick pewien obiekt w three.js. Wcześniej zaimplementowałem go w jednym z moich projektów za pomocą three.js i raycaster przeciwko modelowi collada. W celach informacyjnych, te linki mogą pomóc:

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

Można użyć pickingRay wykonać kliknięcie ortograficznych kamery tak następuje w tym kodzie:

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

Ale jeśli chcesz wykonać kliknięcie na kamerę perspektywiczną, musisz wykonać kliknięcie, używając opcji unprojectVector który następuje poniżej:

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

można użyć tego menedżera zdarzeń three.interaction

i zobaczyć 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); 
 
})