OrbitControls：如何设置相机的默认缩放级别？

嘿，这个问题我太熟了！用OrbitControls的时候默认相机贴得太近确实挺烦的，下面几种方法都能轻松调整默认缩放级别，你可以根据自己的场景选：

方法一：直接设置相机初始位置与缩放（最直观） #

OrbitControls是基于相机的初始状态来工作的，所以你完全可以在初始化控件前，手动调整相机的位置或者缩放参数，从根源上解决默认过近的问题：

• 调整相机位置：通过camera.position.set(x, y, z)把相机拉远，让它离目标物体有足够的距离
• 设置缩放级别：用camera.zoom调整视角缩放（数值越小，视角越远），一定要记得调用camera.updateProjectionMatrix()让缩放生效
• 确保相机对准目标：用camera.lookAt()或者直接设置controls.target，保证相机始终看向你想要的中心点

示例代码：

// 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 把相机拉到离原点（目标）更远的位置
camera.position.set(0, 5, 15);
// 或者设置缩放级别，0.5代表缩小到原来的一半视角
camera.zoom = 0.5;
// 必须调用这个方法让缩放设置生效
camera.updateProjectionMatrix();

// 初始化OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 让控件的旋转目标和相机看向的点一致
controls.target.set(0, 0, 0);
// 更新控件状态
controls.update();

方法二：通过控件的距离限制间接调整默认缩放 #

如果你想同时限制用户的缩放范围，避免他们缩得太近或者拉得太远，可以设置OrbitControls的minDistance和maxDistance属性：

• minDistance：相机到目标的最小距离（用户不能缩得比这个更近）
• maxDistance：相机到目标的最大距离（用户不能拉得比这个更远）

如果你的相机初始位置距离目标小于minDistance，控件会自动把相机拉到minDistance的位置，这样也能间接实现默认缩放的调整：

const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 设置最小距离为5，确保相机不会离目标太近
controls.minDistance = 5;
// 设置最大距离为50，防止拉得太远看不到物体
controls.maxDistance = 50;
controls.update();

方法三：保存预设状态，支持重置到默认缩放 #

如果你希望用户可以随时回到你设置的默认缩放状态，可以先调整好理想的相机参数，然后用controls.saveState()保存这个状态，之后调用controls.reset()就能快速恢复：

// 先调整好理想的相机位置和缩放
camera.position.set(0, 5, 15);
camera.zoom = 0.5;
camera.updateProjectionMatrix();
controls.target.set(0, 0, 0);
controls.update();

// 保存当前状态作为默认状态
controls.saveState();

// 之后用户调整视角后，想回到默认就调用：
// controls.reset();

小提示 #

• 所有涉及相机参数调整的操作后，都要调用camera.updateProjectionMatrix()，不然设置不会生效
• 确保controls.target和camera.lookAt()的目标一致，不然相机的旋转中心会跑偏，影响体验

内容的提问来源于stack exchange，提问作者Gage Hendy Ya Boy