如何知道a幀場景中鼠標點擊的三維座標位置

我無法解決這個問題。我在堆棧溢出時查看了其他相關的three.js解決方案，但仍未達到結果。使用下面的代碼時，3D對象在鼠標點擊時出現一些與鼠標光標相距較遠的對角線。如何知道a幀場景中鼠標點擊的三維座標位置

this.mouse = new THREE.Vector2(); 
this.scene = this.el.sceneEl; 
this.camera = this.scene.camera; 
this.obj = this.el.object3D; 

this.scene.addEventListener('mousedown', e => { 
    let rc = new THREE.Raycaster(); 
    rc.setFromCamera(this.mouse, this.camera); 
    let dist = this.obj.position.distanceTo(this.camera.position); 
    let point = rc.ray.direction.multiplyScalar(dist); 
    document.querySelector('#red').setAttribute('position',point.x+'   
    '+point.y+' '+ point.z); //red is a 3D box 
}

是否有任何現成的組件？

來源

2017-06-14 user2267386

你在哪裏設置的'this.mouse'座標？爲什麼不使用'let point = rc.ray.at（dist）;'而不是'let point = rc.ray.direction.multiplyScalar（dist）'？ – prisoner849

threejs.org上有幾個例子，請查看：https://threejs.org/examples/?q=raycast – Hellium

@ prisoner849使用'let point = rc.ray.at（dist）;'工作感謝:) – user2267386

使用

let point = rc.ray.at(dist);

代替

let point = rc.ray.direction.multiplyScalar(dist);

工作

來源

2017-06-14 10:49:17 user2267386

如何知道a幀場景中鼠標點擊的三維座標位置

回答

相關問題