Solar system using Three js animation

Question

I am creating a solar system using three js.In that I want to display some of the details on clicking on any objects.I have used object picking concepts.In that I am trying to get the objects which are intersecting with the clicking.But I am unable get any objects which are intersecting.When I tried to print the objects in the intersects array I am getting as "undefined" and length of the intersects array as 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);

}`

And here is the code for 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);

could you provide a fiddle or codepen? – prisoner849 Mar 01 '17 at 07:15 — prisoner849, Mar 01 '17 at 07:15

score 0 · Answer 1 · edited Aug 19 '18 at 12:22

The code for »unprojection« and raycasting look fine, so I guess that the x and y values might not be right. You are using clientX and clientY which are the mouse coordinates relative to the upper left corner of the window. Those are only valid if your <canvas> is full page. If that is not the case, make sure to use mouse coordinates relative to the upper left edge of the <canvas>.

I think you can do the raycasting like that:

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

docs

Probably the answer you are looking for is here

projector.unprojectVector( vector, camera.position );

Solar system using Three js animation

1 Answers1