我无法解决这个问题。我在堆栈溢出时查看了其他相关的three.js解决方案,但仍未实现结果。使用下面的代码,在mousedown点击时,3D对象会出现一些远离鼠标光标的对角线。
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
}
有没有现成的组件?
答案 0 :(得分:1)
使用
let point = rc.ray.at(dist);
而不是
let point = rc.ray.direction.multiplyScalar(dist);
工作