Three.js 相机控制器Controls

ops/2024/11/26 0:59:05/

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

1.OrbitControls轨道控制器

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

初始化 OrbitControls

要使用 OrbitControls，首先需要在文件中引入 OrbitControls.js，然后在 JavaScript 文件中进行初始化。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
​
// 创建场景
const scene = new THREE.Scene();
​
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
​
// 初始化 OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
​
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update(); // 更新控制器renderer.render(scene, camera);
}
animate();

主要属性和方法

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

2.TrackballControls轨迹球控制器

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

初始化 TrackballControls

import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
// 创建相机、场景和渲染器（同上）
​
// 初始化 TrackballControls
const controls = new THREE.TrackballControls(camera, renderer.domElement);
​
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update();renderer.render(scene, camera);
}
animate();

主要属性和方法

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

3.FlyControls飞行控制器

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

import { FlyControls } from 'three/addons/controls/FlyControls.js';
// 创建相机、场景和渲染器（同上）
​
// 初始化 FlyControls
const controls = new THREE.FlyControls(camera, renderer.domElement);
controls.movementSpeed = 10; // 移动速度
controls.rollSpeed = Math.PI / 24; // 旋转速度
​
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update(1); // 更新控制器renderer.render(scene, camera);
}
animate();

主要属性和方法

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

操作按键和效果表

操作按键效果
W向前移动
S向后移动
A向左平移
D向右平移
R向上移动
F向下移动
↑向上查看
↓向下查看
←向左查看
→向右查看
鼠标左键按住并拖动进行查看
鼠标滚轮缩放视角

4.FirstPersonControls第一视角控制器

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

初始化 FirstPersonControls

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

// 创建相机、场景和渲染器（同上）
​
// 初始化 FirstPersonControls
const controls = new THREE.FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 10; // 移动速度
controls.lookSpeed = 0.1; // 查看速度
​
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update(1); // 更新控制器renderer.render(scene, camera);
}
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 来控制场景。

http://www.ppmy.cn/ops/136713.html

相关文章

对元素为 pair 的数组的各元素进行排序的方法

对元素为 pair 的数组的各元素进行排序的方法

【知识点】 ● 按结构体某一字段对结构体数组进行排序https://blog.csdn.net/hnjzsyjyj/article/details/120184972 据此知识点&#xff0c;则可构建 pair 元素数组的自定义排序代码如下所示。 typedef pair<int,int> PII;int up(PII u,PII v) { //ascending by firstif…
阅读更多...
小R的随机播放顺序

小R的随机播放顺序

问题描述 小R有一个特殊的随机播放规则。他首先播放歌单中的第一首歌&#xff0c;播放后将其从歌单中移除。如果歌单中还有歌曲&#xff0c;则会将当前第一首歌移到最后一首。这个过程会一直重复&#xff0c;直到歌单中没有任何歌曲。 例如&#xff0c;给定歌单 [5, 3, 2, 1,…
阅读更多...
rabbitmq结合springboot配置发送消息和消费消息

rabbitmq结合springboot配置发送消息和消费消息

在Spring Boot中集成RabbitMQ可以非常方便地实现消息的发送和接收。下面将简要介绍如何配置Spring Boot应用以使用RabbitMQ进行消息的发送与消费。 1. 添加依赖 首先&#xff0c;在你的pom.xml文件中添加Spring Boot对RabbitMQ的支持&#xff1a; <dependency><gro…
阅读更多...
Charles抓包工具-笔记

Charles抓包工具-笔记

摘要 概念&#xff1a; Charles是一款基于 HTTP 协议的代理服务器&#xff0c;通过成为电脑或者浏览器的代理&#xff0c;然后截取请求和请求结果来达到分析抓包的目的。 功能&#xff1a; Charles 是一个功能全面的抓包工具&#xff0c;适用于各种网络调试和优化场景。 它…
阅读更多...
Linux的开发工具(二)

Linux的开发工具(二)

1.vim的基本操作 正常模式到插入模式 输入a 输入i 输入o 示例 输入iao下面的就会变成INSERT模式 插入模式到正常模式 按Esc键 正常模式到低行模式 shift&#xff1b; &#xff1a;w保存当前文件 &#xff1a;wq保存并退出 &#xff1a;q&#xff01;强制退出 2.vi…
阅读更多...
【图像检测】深度学习与传统算法的区别（识别逻辑、学习能力、泛化能力）

【图像检测】深度学习与传统算法的区别（识别逻辑、学习能力、泛化能力）

识别逻辑 深度学习 使用了端到端的学习策略&#xff0c;直接学习从图像到检测结果的映射关系&#xff0c;自动提取特征&#xff0c;并且根据特征与特征之间的关系&#xff0c;计算出检测结果。 传统算法 则是人工提取特征&#xff0c;比如边缘特征&#xff0c;直线特征&#x…
阅读更多...
输入三个整数x,y,z，请把这三个数由小到大输出。-多语言实现

输入三个整数x,y,z，请把这三个数由小到大输出。-多语言实现

目录 C 语言实现 Python 实现 Java 实现 Js 实现 题目&#xff1a;输入三个整数x,y,z&#xff0c;请把这三个数由小到大输出。 程序分析&#xff1a;我们想办法把最小的数放到x上&#xff0c;先将x与y进行比较&#xff0c;如果x>y则将x与y的值进行交换&#xff0c;然后…
阅读更多...
网络安全概论

网络安全概论

一、 网络安全是一个综合性的技术。在Internet这样的环境中&#xff0c;其本身的目的就是为了提供一种开放式的交互环境&#xff0c;但是为了保护一些秘密信息&#xff0c;网络安全成为了在开放网络环境中必要的技术之一。网络安全技术是随着网络技术的进步逐步发展的。 网络安…
阅读更多...
最新文章

Copyright @ 2022~2023