Three.js 相机控制器Controls

在 3D 场景中，摄像机的控制尤为重要，由于它决定了用户怎样观察和与场景互动。Three.js 提供了多种相机控制器，最常用的有 OrbitControls、TrackballControls、FlyControls 和 FirstPersonControls。OrbitControls 适合用于查看和查抄 3D 模子，TrackballControls 提供了更自由的旋转方式，FlyControls 适合于飞行模仿和第一人称视角的应用， FirstPersonControls 则提供了沉浸式的第一人称视角。在现实项目中，可以根据具体需求选择符合的控制器，并调整相关参数以达到最佳效果。本文将先容这些相机控制器的根本用法及其特点
1.OrbitControls轨道控制器

OrbitControls 是 Three.js 中最常用的相机控制器之一。它答应用户围绕目标物体举行旋转、缩放和平移，非常适合用于查看 3D 模子。

初始化 OrbitControls

要利用 OrbitControls，起首需要在文件中引入 OrbitControls.js，然后在 JavaScript 文件中举行初始化。

1. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.

复制代码

1. // 创建相机
2. const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
3. camera.position.set(0, 5, 10);
4. ​
5. // 创建场景
6. const scene = new THREE.Scene();
7. ​
8. // 创建渲染器
9. const renderer = new THREE.WebGLRenderer();
10. renderer.setSize(window.innerWidth, window.innerHeight);
11. document.body.appendChild(renderer.domElement);
12. ​
13. // 初始化 OrbitControls
14. const controls = new THREE.OrbitControls(camera, renderer.domElement);
15. ​
16. // 渲染循环
17. function animate() {
18.    requestAnimationFrame(animate);
19.    controls.update(); // 更新控制器
20.    renderer.render(scene, camera);
21. }
22. animate();

复制代码

重要属性和方法

• controls.target: 设置相机围绕旋转的目标。
  
• controls.enableDamping: 启用阻尼（惯性效果），使控制更加平滑。
  
• controls.dampingFactor: 阻尼系数，通常设置在 0.1 左右。
  
• controls.enableZoom: 启用/禁用缩放。
  
• controls.enablePan: 启用/禁用平移。
  

2.TrackballControls轨迹球控制器

TrackballControls 提供了更自由的相机控制，答应用户举行旋转、缩放和平移利用。它与 OrbitControls 的区别在于 TrackballControls 答应自由旋转，而不局限于固定的目标。

初始化 TrackballControls

1. import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';

复制代码

1. // 创建相机、场景和渲染器（同上）
2. ​
3. // 初始化 TrackballControls
4. const controls = new THREE.TrackballControls(camera, renderer.domElement);
5. ​
6. // 渲染循环
7. function animate() {
8.    requestAnimationFrame(animate);
9.    controls.update();
10.    renderer.render(scene, camera);
11. }
12. animate();

复制代码

重要属性和方法

• controls.rotateSpeed: 旋转速度，默认值为 1.0。
  
• controls.zoomSpeed: 缩放速度，默认值为 1.2。
  
• controls.panSpeed: 平移速度，默认值为 0.3。
  
• controls.staticMoving: 静态移动，如果为 true 则没有惯性效果。
  
• controls.dynamicDampingFactor: 动态阻尼系数，用于控制惯性效果。
  

3.FlyControls飞行控制器

FlyControls 提供了类似飞行模仿的相机控制方式，用户可以通过键盘和鼠标来控制相机的移动和旋转，非常适合用于飞行模仿和第一人称视角的应用。

1. import { FlyControls } from 'three/addons/controls/FlyControls.js';

复制代码

1. // 创建相机、场景和渲染器（同上）
2. ​
3. // 初始化 FlyControls
4. const controls = new THREE.FlyControls(camera, renderer.domElement);
5. controls.movementSpeed = 10; // 移动速度
6. controls.rollSpeed = Math.PI / 24; // 旋转速度
7. ​
8. // 渲染循环
9. function animate() {
10.    requestAnimationFrame(animate);
11.    controls.update(1); // 更新控制器
12.    renderer.render(scene, camera);
13. }
14. animate();

复制代码

重要属性和方法

• controls.movementSpeed: 移动速度。
  
• controls.rollSpeed: 旋转速度。
  
• controls.dragToLook: 启用/禁用鼠标拖拽查看。
  
• controls.autoForward: 启用/禁用自动前进。
  

利用按键和效果表

利用按键效果W向前移动S向后移动A向左平移D向右平移R向上移动F向下移动↑向上查看↓向下查看←向左查看→向右查看鼠标左键按住并拖动举行查看鼠标滚轮缩放视角 4.FirstPersonControls第一视角控制器

FirstPersonControls 提供了类似于第一人称射击游戏的相机控制方式，用户可以通过键盘和鼠标来控制相机的移动和旋转，非常适合用于创建沉浸式的 3D 环境。

初始化 FirstPersonControls

1. import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js'

复制代码

1. // 创建相机、场景和渲染器（同上）
2. ​
3. // 初始化 FirstPersonControls
4. const controls = new THREE.FirstPersonControls(camera, renderer.domElement);
5. controls.movementSpeed = 10; // 移动速度
6. controls.lookSpeed = 0.1; // 查看速度
7. ​
8. // 渲染循环
9. function animate() {
10.    requestAnimationFrame(animate);
11.    controls.update(1); // 更新控制器
12.    renderer.render(scene, camera);
13. }
14. animate();

复制代码

重要属性和方法

• controls.movementSpeed: 移动速度。
  
• controls.lookSpeed: 查看速度。
  
• controls.lookVertical: 启用/禁用垂直查看。
  
• controls.activeLook: 启用/禁用鼠标查看。
  

利用按键和效果表

利用按键效果W向前移动S向后移动A向左平移D向右平移R向上移动F向下移动Q制止移动↑向上查看↓向下查看←向左查看→向右查看鼠标左键按住并拖动举行查看鼠标右键启用/禁用鼠标查看模式鼠标滚轮调整查看速度 5.其他控制器

Three.js 提供了多种其他相机控制器，以满足不同的需求。
名称形貌设备朝向控制器 (DeviceOrientationControls)该控制器可以使得摄像机依据设备的朝向来举行调整。它的实现基于 HTML 的设备朝向 API编辑控制器 (EditorControls)该控制器是为在线三维编辑器而创建的，并被用于 Three.js 的在线编辑器中Oculas 控制器 (OculusControls)该控制器可以答应利用 Oculus Rift 设备来环视场景正交轨迹球控制器 (OrthographicTrackball Controls)该控制器和轨迹球控制器类似，只不过是用于 THREE. Orthographic Camera鼠标锁定控制器 (PointerLockControls)该控制器利用场景中渲染的 DOM 元素来锁定鼠标。可以为 3D 游戏提供根本的功能变换控制器 (TransformControls)这个是 Three.js 编辑器内部利用的控制器VR 控制器 (VRControls)该控制器利用 PositionSensorVRDevice API 来控制场景。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。