three.js 使用交互工具 controls 改变视角之后,要回到初始正常的视角如果使用交互工具的话比较麻烦,需要一键使视角回归初始值。
- 首先确定改变camera即可,百度到的基本都是设置position 显然,并没有达到应有的效果,若视角发生旋转,此时position只能让相机回到原位而已,但相机倾斜的问题并没有解决。
- 后chrome调试,打印camera信息,并对比初始值和当前值如图
发现up值发生了变化,百度之后,了解到这个up就是相机的绝对rx,ry,rz。由于three默认y轴向上,所以使用如下代码设置up值。发现up值发生了变化,百度之后,了解到这个up就是相机的绝对rx,ry,rz。由于three默认y轴向上,所以使用如下代码设置up值。
camera.position.set(-45030, 10000, 0); //此处为初始值
camera.up.set(0,1,0); //默认Y轴向上
- 至此,认为问题基本得到解决,但事实上并不是!!! 因为使用的是TrackballControls 它鼠标右键按下为拖动模式,此时发现,仅仅重设前两行代码,虽然位置和方向都初始了,但只要使用拖动,视角边无法返回,自然想到用之前并没有使用的lookAt函数,设置相机观察对象,然并卵!
camera.position.set(-45030, 10000, 0); //此处为初始值
camera.up.set(0,1,0); //默认Y轴向上
camera.lookAt(new THREE.Vector3(0,0,0)); //虽然没用,但此句要跟在up 设置后 因为lookat调用了 up
- 无奈,这么个问题… 查了资料,网上的资料比较少,怎么办?感觉camera并不能解决问题啊,那不是Controls操作的camera么,只能撸Controls的代码了,不看不知道,一看满脸泪奔…
this.reset = function () {
_state = STATE.NONE;
_prevState = STATE.NONE;
_this.target.copy( _this.target0 );
_this.object.position.copy( _this.position0 );
_this.object.up.copy( _this.up0 );
_eye.subVectors( _this.object.position, _this.target );
_this.object.lookAt( _this.target );
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
};//此处_this.object 其实就是 camera的引用
没错,就是他,这个reset函数中清楚的描述了怎么去初始化他自己和相机的位置。泪奔。最终代码是这样子的…
controls.reset();//没错,只有这一行
话说回来,这段代码看了下,也只是对camera 加自身的操作,但由于其中_eye等自身变量的存在,结论是,不调用这个函数,你不可能初始化视角…