三个js使用轨道控件放大光标所在的位置



我对三个js非常陌生,目前正在尝试实现一个用户可以放大光标所在位置的功能。计划是使用光线投射器来获取交点,然后在每次光标移动时使用它来更新轨道控制的矢量。

轨道控制像那样初始化

this.controls = new OrbitControls( this.camera_, this.threejs_.domElement );
this.controls.listenToKeyEvents( window ); 

this.controls.screenSpacePanning = false;
this.controls.minDistance = 30;
this.controls.maxDistance = 500;
this.controls.maxPolarAngle = Math.PI / 2;

这是事件侦听器

document.addEventListener('pointermove', (e) => this.onPointerMove(e), false);

onPointerMove函数看起来像这个

onPointerMove(event){
const pointer = {
x: (event.clientX / window.innerWidth) * 2 - 1,
y: -(event.clientY / window.innerHeight) * 2 + 1,
}
this.rayCaster.setFromCamera( pointer, this.camera_);
const intersects = this.rayCaster.intersectObjects( this.scene_.children, false);
if ( intersects.length > 0 ) {
this.controls.target(intersects[0].point);
this.controls.update();
}
}

到目前为止,intersects[0].point似乎正确地获得了相交坐标,但轨道控制根本没有得到更新。我还尝试过使用改变相机的位置

this.camera_.position.set(intersects[0].point.x+20,intersects[0].point.y+20,intersects[0].point.z+20);            
this.controls.update();

然而,这只会让我的相机移动到我指向的任何地方。

编辑:也不起作用

const newTarget = new Vector3(intersects[0].point.x,intersects[0].point.y,intersects[0].point.z);
this.controls.target.copy(newTarget);

在这里找到了答案。显然,您需要使用复制或设置来更改轨道控制的目标不调用update((
喜欢

this.controls.target.set(intersects[0].point.x,intersects[0].point.y,intersects[0].point.z);

最新更新