精确控制相机视角：OrbitControls的限制功能
OrbitControls的限制功能
OrbitControls允许用户通过鼠标和键盘控制相机的视角，但有时我们希望限制这些控制，以便更好地展示特定的场景或模型。
禁止平移
通过设置.enablePan属性为false，可以禁止用户通过右键拖动来平移相机。
javascript
controls.enablePan = false; // 禁止右键拖拽禁止缩放和旋转
.enableZoom属性控制是否允许鼠标中键缩放场景，默认值为true。.enableRotate属性控制是否允许鼠标左键旋转场景，默认值也为true。
javascript
controls.enableZoom = false; // 禁止缩放
controls.enableRotate = false; // 禁止旋转设置观察目标
OrbitControls的.target属性对应于相机的.lookAt()观察目标。通过改变.target，可以控制相机的焦点。
javascript
controls.target.set(x, y, z); // 设置观察目标
controls.update(); // 更新相机视角透视投影相机的缩放范围
通过.minDistance和.maxDistance属性，可以限制相机与观察目标之间的距离，从而控制缩放范围。
javascript
controls.minDistance = 200; // 最小距离
controls.maxDistance = 500; // 最大距离正投影相机的缩放范围
对于OrthographicCamera，可以使用.minZoom和.maxZoom属性来设置缩放范围。
javascript
controls.minZoom = 0.5; // 最小缩放值
controls.maxZoom = 2; // 最大缩放值获取相机与观察目标的距离
.getDistance()方法可以计算相机位置与观察目标之间的距离，这有助于设置合适的缩放范围。
javascript
const distance = controls.getDistance();
console.log('Camera distance:', distance);设置旋转范围
通过.minPolarAngle和.maxPolarAngle属性，可以控制相机的上下旋转范围。通过.minAzimuthAngle和.maxAzimuthAngle属性，可以控制左右的旋转范围。
javascript
controls.minPolarAngle = 0; // 最小上下旋转角度
controls.maxPolarAngle = Math.PI; // 最大上下旋转角度
controls.minAzimuthAngle = -Math.PI / 2; // 最小左右旋转角度
controls.maxAzimuthAngle = Math.PI / 2; // 最大左右旋转角度完整示例代码
以下是一个完整的示例，展示如何使用OrbitControls来限制相机的旋转和缩放。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js OrbitControls Restrictions</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.set(0, 0, 5);
// 限制旋转和缩放
controls.enablePan = false; // 禁止平移
controls.enableZoom = false; // 禁止缩放
controls.enableRotate = true; // 允许旋转
// 设置旋转范围
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI;
controls.minAzimuthAngle = -Math.PI / 2;
controls.maxAzimuthAngle = Math.PI / 2;
// 设置缩放范围
controls.minDistance = 200;
controls.maxDistance = 500;
function render() {
requestAnimationFrame(render);
controls.update(); // 更新控制器
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>