Intersezione all'interno di Object3D

Question

Ho alcuni oggetti aggiunti a Object3D (per il raggruppamento di elementi) e sto cercando di rilevare i clic su di esso. La mia scena ha una dimensione di 600x400, la mia macchina fotografica è all'interno di una tre-oggetto e il mio codice di gestore di eventi si presenta come di seguito:

function onDocumentMouseDown(event) { 
    event.preventDefault(); 

    var mouse = {}; 
    mouse.x = (event.clientX/600) * 2 - 1; 
    mouse.y = - (event.clientY/400) * 2 + 1; 

    var vector = new THREE.Vector3(mouse.x, mouse.y, 1); 
    projector.unprojectVector(vector, three.camera); 

    var ray = new THREE.Ray(three.camera.position, vector.subSelf(three.camera.position).normalize()); 

    var intersects = ray.intersectObjects(group.children); 
    alert(intersects.length); 
    [...] 
} 

In realtà io sto avvisando il conteggio degli oggetti intersecate. Ma rimane zero. Non è stato possibile trovare oggetti intersecati. Ho già giocato un po 'con i valori x, yez del mio vettore di proiezione - senza successo.

Ho aggiunto un esempio ridotto per dimostrare questo problema su jsfiddle. Forse qualcuno ha un suggerimento per me che cosa non va?

Answer 1

In fiddle, poiché si chiama THREE.SceneUtils.createMultiMaterialObject(), che crea una struttura gerarchica, è necessario aggiungere il flag ricorsivo a ray.intersectObjects().

var intersects = ray.intersectObjects(group.children, true); 

EDIT: ray è ora un esempio di THREE.Raycaster - non THREE.Ray.

Three.js r.58

Answer 2

Ho avuto lo stesso problema e la risposta di WestLangley fornisce la risposta. Ottimo lavoro! Per chiunque stia lottando con la selezione del mouse di oggetti raggruppati nel wrapper Object3D, sto pubblicando la mia soluzione.

In primo luogo, ho creato una serie di oggetti che sono selezionabili - spero che questo salvi anche alcune prestazioni, in quanto RayCaster non ha bisogno di cercare tutti gli oggetti nella scena, ma solo quelli che si desidera rispondere alla selezione. Ho anche attaccato questo array per oggetto scena direttamente (solo per il fatto che è già accessibile da più parti della mia app)

scene.selectable = []; 

passo successivo è quello di spingere tutti gli oggetti che si desidera rendere selezionabile in questo array. Inserirai solo mesh/sprite/etc dal tuo gruppo, non dall'intero gruppo. Solo ultima riga è importante qui:

var myWrapper = new THREE.Object3D(); 
var myObject = new THREE.Mesh(something); 
myWrapper.add(myObject); 
scene.add (myWrapper); 
scene.selectable.push(myObject); 

E, infine nella selezione di routine del mouse si chiamerà raycaster come questo:

var intersects = ray.intersectObjects(scene.selectable);