I'm attempting to create a feature where points are generated on a sphere whenever the mouse is clicked. The camera's viewpoint is situated inside the sphere, and I am looking to establish clickable areas that are properly mapped onto its surface.
Something similar to this example:
mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
mouse.z = 0.5;
raycaster.setFromCamera( mouse, camera );
var objects = [];
objects.push(panoVideoMesh);
panoVideoMesh.material.side = THREE.DoubleSide;
var intersects = raycaster.intersectObjects( objects, true );
if ( intersects.length > 0 ){
var point = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
point.position.copy(intersects[0].point);
point.lookAt(camera);
panoVideoMesh.add(point);
}
This method is functional to some extent, although the meshes being added do not align precisely with the mouse click. Additionally, when rotating the camera in the VR scene by clicking and dragging, the points remain fixed on a single plane.
Any assistance or insights would be greatly appreciated!