Solarsystem mit drei js Animation

Question

Ich erstelle ein Solarsystem mit drei js.In, dass ich einige der Details beim Klicken auf beliebige Objekte anzeigen möchte.Ich habe Objekt Picking-Konzepte verwendet. In dem ich versuche, die zu bekommen Objekte, die sich mit dem Klicken kreuzen. Aber ich bin nicht in der Lage, Objekte zu erhalten, die sich schneiden. Als ich versuchte, die Objekte im Schnittpunktarray zu drucken, bekomme ich als "undefined" und Länge des Schnittpunktarrays als 0.

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

raycaster = new THREE.Raycaster(camera.position, vector); 

var intersects = raycaster.intersectObjects([orbitDir1,orbitDir2,orbitDir3,orbitDir4,orbitDir5]); 
alert(intersects[0]); 

alert(intersects.length); 

} `

Und hier ist der Code für OrbitDir.

geometry = new THREE.CircleGeometry(2.3, 100); 
    geometry.vertices.shift(); 

circle = new THREE.Line(
    geometry, 
    new THREE.LineDashedMaterial({color: 'red'}) 
); 
circle.rotation.x = Math.PI * 0.5 ; 
tex = new THREE.ImageUtils.loadTexture("Mercury.jpeg") ; 
planet = new THREE.Mesh(
    new THREE.SphereBufferGeometry(0.3, 32, 32), 
    new THREE.MeshPhongMaterial({ map : tex}) 
); 
planet.position.set(2.3, 0, 0); 
scene.add(planet); 

orbit = new THREE.Group(); 
orbit.add(circle); 
orbit.add(planet); 

orbitDir = new THREE.Group(); 
orbitDir.add(orbit); 
//orbitDir.position.x += 0.1 ; 
orbitDir.position.y += 4 ; 
orbitDir.position.z += 5 ; 
orbitDir.rotation.x +=2.3 ; 
scene.add(orbitDir); 

Answer 1

Der Code für »unprojection« und Raycastings sehen gut aus, so dass ich denke, dass die x und y Werte nicht richtig sein könnte. Sie verwenden clientX und clientY, die die Mauskoordinaten relativ zur oberen linken Ecke des Fensters sind. Diese sind nur gültig, wenn Ihre <canvas> ganze Seite ist. Wenn dies nicht der Fall ist, stellen Sie sicher, dass Sie die Mauskoordinaten relativ zur oberen linken Kante des <canvas> verwenden.

glaube ich Ihnen die Raycastings wie das tun können:

raycaster.intersectObjects(scene, true) //scan the whole scene recursive 

docs

Wahrscheinlich ist die Antwort, die Sie suchen, ist here

projector.unprojectVector(vector, camera.position);