Uzyskaj współrzędną 3D klikniętego punktu myszy trzema .js

Question

Jestem nowy w THREE.js.

Próbuję uzyskać współrzędne 3D punktu kliknięcia myszką na obiekcie (nie proste obiekty: Pole, Kula, ...) w obszarze Canvas.

W szczegółach pracuję z przeglądarką obiektów 3D - mam kamerę (THREE.PerspectiveCamera), sterowanie myszką (obracanie, powiększanie, przesuwanie), dodawanie/usuwanie obiektów (mój własny obiekt, ładowany za pomocą programów ładujących dla TRZECHU. js) w scenie, ... I chcę dodać funkcję, która pobiera współrzędne 3D dla klikniętego punktu w 3D.

Dokładnie, chcę współrzędne punktu końcowego ray - Początki z kliknięciem myszy na camera_near_window a kończąc na punkcie obiektu, mam kliknął ..

Próbowałem wiele sposobów aby to zrobić:

• Getting coordinates of point on z=0 plane - to działa dobrze, ale to jest na płaszczyźnie z = 0 i to nie jest to, że muszę, bo mam OrbitControls ..

• THREE.js example - clickable objects - Używa CanvasRenderer (nie WebGLRenderer) i działa dla niewielkich obiektów (ale działa dla mojego projektu): przeglądarka zawiesza się, gdy ładuję wiele obiektów (CanvasRenderer potrzebuje 5x więcej pamięci niż WebGLRenderer).

• "How to get object in WebGL 3d space from a mouse click coordinate" - Próbowałem ten jeden też, ale nic nie znalazłem raycaster.intersectObjects, intersects była pusta tablica (może to działa tylko dla prostych obiektów, takich jak pole, kula, ..).

Czy ktoś może pokazać mi kod demonstracyjny, który otrzymuje współrzędne punktu 3D dla klikniętego punktu kliknięcia obiektu w 3D, proszę ..?

Answer 1

Tak, jak ja, że ​​to pytanie jest przydatna dla kogoś, ja nie odpowiedzieć sobie (będę pisać moją determinację):

var renderer, canvas, canvasPosition, camera, scene, rayCaster, mousePosition; 

function init() { 
    renderer = new THREE.WebGLRenderer({ antialias: false }); 
    canvas = renderer.domElement; 
    canvasPosition = $(canvas).position(); 
    camera = new THREE.PerspectiveCamera(20, $(canvas).width()/$(canvas).height(), 0.01, 1e10); 
    scene = new THREE.Scene(); 
    rayCaster = new THREE.Raycaster(); 
    mousePosition = new THREE.Vector2(); 

    scene.add(camera); 

    var myObjects = new THREE.Object3D(); 
    // myObjects.add(your object); 
    // myObjects.add(your object); 
    // myObjects.add(your object); 
    myObjects.name = 'MyObj_s'; 
    scene.add(myObjects); 
}; 

function getClicked3DPoint(evt) { 
    evt.preventDefault(); 

    mousePosition.x = ((evt.clientX - canvasPosition.left)/canvas.width) * 2 - 1; 
    mousePosition.y = -((evt.clientY - canvasPosition.top)/canvas.height) * 2 + 1; 

    rayCaster.setFromCamera(mousePosition, camera); 
    var intersects = rayCaster.intersectObjects(scene.getObjectByName('MyObj_s').children, true); 

    if (intersects.length > 0) 
     return intersects[0].point; 
};