oggetti cliccabili three js

Question

Ho due oggetti 3D "mesh" che ho creato in three.js. Voglio aggiungere un evento click a questi oggetti in modo che quando faccio clic su uno di essi, venga ridimensionato e quando faccio clic sull'altro, ruota.

Ho provato questo metodo per aggiungere un evento click a un oggetto e non funziona.

<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

Assolutamente è necessario implementare raycaster per selezionare/click/pick certo oggetto in Three.js. L'ho già implementato in uno dei miei progetti usando three.js e raycaster contro il modello collada. Per il vostro riferimento, questi collegamenti possono aiutare a:

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

È possibile utilizzare pickingRay per eseguire cliccando con fotocamera ortografica del genere segue in questo codice:

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

Ma se vuoi eseguire un clic sulla telecamera prospettica devi fare un clic usando il unprojectVector come che segue qui sotto:

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

è possibile utilizzare questo event manager three.interaction

e vedere questo 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); 
 
})