Hello guys,
I’m new with threeJs and i’m working in the three.js editor (three.js editor). I’m trying to add an ‘onclick’ event so that it responds when i click on a sphere i created.
Here is my code, i’m a total beginner with this technology so excuse my potential obvious mistakes
let planet = this.getObjectByName( 'Planete' );
let sat1 = this.getObjectByName( 'Satellite1' );
let sat2 = this.getObjectByName( 'Satellite2' );
let cam = this.getObjectByName( 'PerspectiveCamera' );
let scence = this.getObjectByName( 'Scene' );
//let g = this.getObjectByName( 'Group' );
cam.lookAt(planet.position)
player.setCamera( cam );
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
function onClick( event ) {
// calculate pointer position in normalized device coordinates
// (-1 to +1) for both components
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// update the picking ray with the camera and pointer position
raycaster.setFromCamera( pointer, cam );
raycaster.layers.enableAll()
// calculate objects intersecting the picking ray
let intersects = raycaster.intersectObjects( scence.children );
console.log(intersects) // <----- always returning empty array
intersects.forEach((i)=>{
if(i.object.name != "") {
console.log(i.object.name);
}
});
}
function update( event ) {
renderer.render( scence, cam );
}
addEventListener( 'click', onClick);
window.requestAnimationFrame(update);