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等自身變量的存在,結論是,不調用這個函數,你不可能初始化視角…