Three.js Klickpunkt auf Kugel

Question

Ich versuche ein Objekt mit Punkten zu erstellen, die erstellt werden, wenn die Maus auf eine Kugel klickt. Die Kamera befindet sich innerhalb der Kugel und ich möchte klickbare Bereiche auf der Kugel abbilden.

So etwas wie https://threejs.org/examples/canvas_interactive_cubes.html

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); 
    } 

Diese Art der Werke, sondern die Maschen hinzugefügt wird, sind nicht an der gleichen Stelle wie die Maustaste, und wenn Sie die Kamera durch Klicken und Ziehen der Szene drehen (es ist ein VR Szene) die Punkte sind alle auf der gleichen Ebene.

Irgendwelche Hilfe/Hinweise?

Answer 1

intersects[0].point ist in Weltkoordinaten, aber Sie fügen point als ein Nachkomme von panoVideoMesh hinzu. Die Transformationen beider Objekte werden miteinander vermischt. Sie müssen entweder point direkt zur Szene hinzufügen oder zuerst den Schnittpunkt in den lokalen Bereich panoVideoMesh konvertieren.