Three.js使用OrbitControls后修改相機旋轉方向無效解決辦法

更新時間：2024年01月04日 14:44:20 作者：YanisWu

three.js是用javascript寫的基于webGL的第三方3D庫,下面這篇文章主要給大家介紹了關于Three.js使用OrbitControls后修改相機旋轉方向無效的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1.問題復現(xiàn)

在項目中添加了OrbitControls控制器來控制相機的旋轉和平移，但是需要修改初始的相機角度，于是我把相機的角度進行修改，如下：

const camera = new THREE.PerspectiveCamera(75, viewport.offsetWidth / viewport.offsetHeight, 0.01, 20);
camera.position.set(0,1,7);
//修改相機初始角度
camera.rotation.set(0,-Math.PI/2,0);
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

運行項目后發(fā)現(xiàn)相機的位置并沒有發(fā)生變化。原因是相機旋轉和移動被OrbitControls控制器托管了。

2.解決方法

方法1.于是我嘗試創(chuàng)建一個組，將相機加入組里，通過改變組的旋轉角度從而改變相機的初始角度，如下：

	const cameraRigY = new THREE.Group();
	scene.add(cameraRigY);

    const camera = new THREE.PerspectiveCamera(75, viewport.offsetWidth / viewport.offsetHeight, 0.01, 20);
	camera.position.set(0,1,7);
    //相機加入組里
	cameraRigY.add(camera);
	//修改整體相機Y軸旋轉
	cameraRigY.rotation.set(0,Math.PI/2,0);

	const controls = new OrbitControls(camera, renderer.domElement);
	controls.update();

進過測試，相機的初始角度修改成功了。

方法2：也可以設置焦點：OrbitControls控制器上有target用來設置焦點。相機角度和位置要同步修改才行。

	controls.target = new THREE.Vector3(0, 0, 0);//控制焦點

3.重置相機

在相機旋轉操作了之后，想重置到原來的狀態(tài)，發(fā)現(xiàn)上訴方法也無效了。而OrbitControls控制器提供了兩個方法來實現(xiàn)：

     /**
     * Save the current state of the controls. This can later be
     * recovered with .reset.
     */
    saveState(): void;

    /**
     * Reset the controls to their state from either the last time
     * the .saveState was called, or the initial state.
     */
    reset(): void;

先調(diào)用saveState()方法保存當前的相機狀態(tài)，然后使用reset()方法重置到之前保存的狀態(tài)即可。