THREE.js Raycasting da una telecamera per bambini alla scena

Question

Sto provando a raycast il mouse dalla mia macchina fotografica per fare qualche passaggio del mouse e fare clic sugli eventi sulle mesh nella mia scena.

Il mio problema è che la mia macchina fotografica è attualmente l'oggetto figlio di un'altra mesh (per facilitare il movimento/rotazione della telecamera) e ora il mio raycasting non funziona (presumo perché la telecamera è un bambino della mesh, e non la scena).

Questo è parte del mio codice:

//camera setup 
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000); 

var cameraTargetGeom = new THREE.SphereGeometry(0.5); 
var cameraTargetMaterial = new THREE.MeshLambertMaterial({color: 0xff0000, ambient: 0xff0000}); 
var cameraTarget = new THREE.Mesh(cameraTargetGeom, cameraTargetMaterial); 
cameraTarget.position.set(0.15, 0, 5); 
scene.add(cameraTarget); 
cameraTarget.add(camera); 

camera.position.y = 18; 
camera.rotation.x = Math.PI * -90/180; 



// click event 
renderer.domElement.addEventListener('click', clickedCanvas); 

function clickedCanvas(e) { 
    e.preventDefault(); 

    mouse.x = (e.clientX/renderer.domElement.width) * 2 - 1; 
    mouse.y = -(e.clientY/renderer.domElement.height) * 2 + 1; 

    raycaster.setFromCamera(mouse, camera); 

    var intersects = raycaster.intersectObjects(scene.children, true); 
    console.log(intersects); 

    if (intersects.length > 0) { 
     >... (redacted code) 
    } 
} 

Si stava lavorando bene, prima ho aggiunto la fotocamera verso l'oggetto CameraTarget. Come posso raycast dalla fotocamera ora che è un figlio della cameraTarget?

Answer 1

È possibile utilizzare il seguente motivo per il raycasting e funzionerà correttamente anche se la fotocamera è figlia di un altro oggetto. Funziona sia con la prospettiva che con le videocamere ortografiche.

var raycaster = new THREE.Raycaster(); // create once and reuse 
var mouse = new THREE.Vector2(); // create once and reuse 

... 

mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
mouse.y = - (event.clientY/renderer.domElement.clientHeight) * 2 + 1; 

raycaster.setFromCamera(mouse, camera); 

var intersects = raycaster.intersectObjects(objects, recursiveFlag); 

Three.js r.84