three.js重置相机

three.js 相机重置问题

通常使用three.js 时会使用控制器来旋转画面看3D模型在各个方向上的样子，但是每次旋转拖动之后又没有办法直接复原，此时就需要通过重置相机来完成，下面从相机和控制器来说。

var camera, controls;

// 初始化相机
function initCamera() {
	camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
	position.set(200, 300, 200); //设置相机位置
}

// 初始化控制器
function initControls() {
	controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控制 
	controls.minPolarAngle = 0;  
	controls.maxPolarAngle = Math.PI * (90 / 180); // 设置相机最大角度，不能看到底部
	controls.addEventListener("change", animate); //监听鼠标、键盘事件 animate场景渲染
}

// 渲染
function animate() {
	renderer.render(scene, camera)
}

// 相机重置按钮触发事件
var cameraPlace = {x: 200, y: 300: z: 200}; // 相机初始位置 

// 重置点击事件 
function cameraReset() {     
// 重置相机     
	camera.position.set(cameraPlace.x, cameraPlace.y, cameraPlace.z); // 重置相机位置     
	controls.target.set(0, 0, 0);  // 置位控制器目标位置     
	controls.update(); // 更新控制器     
	animate(); // 重新渲染 
}

之前有看过其他的贴子中有通过点击事件直接掉用初始化相机和初始化控制器的方法，但是经过自己的尝试发现使用重置多次之后画面会比较卡，上述方法就不会有此现象。