Three.js 相机控制器Controls

在 3D 场景中,摄像机的控制尤为重要,因为它决定了用户如何观察和与场景互动。Three.js 提供了多种相机控制器,最常用的有 OrbitControlsTrackballControlsFlyControls FirstPersonControlsOrbitControls 适合用于查看和检查 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.rhkb.cn/news/475360.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【新人系列】Python 入门(十一):控制结构

✍ 个人博客:https://blog.csdn.net/Newin2020?typeblog 📝 专栏地址:https://blog.csdn.net/newin2020/category_12801353.html 📣 专栏定位:为 0 基础刚入门 Python 的小伙伴提供详细的讲解,也欢迎大佬们…

SELinux

一、简介 SELinux : 安全强化的Linux;在开启后,会对进程本身部署安全上下文;会对文件部署安全上下文;对法务使用端口进行限制;对程序本身的不安全功能做限制 二、工作原理 1、工作方式 通过MAC的方式来控制管理进程&#xff0…

C++小白实习日记——Day 5 gitee怎么删文件,测试文件怎么写循环

昨晚一直内耗,一个程序写了三天写不出来,主要是耗时太多了,老板一直不满意。想在VScode上跑一下,昨晚一直报错。今天来公司重新搞了一下, 主要工作有: 1,读取当前时间用tscns 2,输…

Apache Paimon】-- 6 -- 清理过期数据

目录 1、简要介绍 2、操作方式和步骤 2.1、调整快照文件过期时间 2.2、设置分区过期时间 2.2.1、举例1 2.2.2、举例2 2.3、清理废弃文件 3、参考 1、简要介绍 清理 paimon (表)过期数据可以释放存储空间,优化资源利用并提升系统运行效…

阿里云IIS虚拟主机部署ssl证书

宝塔配置SSL证书用起来是很方便的,只需要在站点里就可以配置好,但是云虚拟主机在管理的时候是没有这个权限的,只提供了简单的域名管理等信息。 此处记录下阿里云(原万网)的IIS虚拟主机如何配置部署SSL证书。 进入虚拟…

BOM的详细讲解

BOM概述 BOM简介 BOM(browser Object)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。 BOM由一系列的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准&#xff…

湘潭大学软件工程算法设计与分析考试复习笔记(四)

回顾 湘潭大学软件工程算法设计与分析考试复习笔记(一)湘潭大学软件工程算法设计与分析考试复习笔记(二)湘潭大学软件工程算法设计与分析考试复习笔记(三) 前言 现在是晚上十一点,我平时是十…

STM32单片机ADC数模转换器

由于最近忘记了,自用。 转换模式 单次转换,非扫描模式 在非扫描模式下,列表中就只有序列1的位置有效,此时可以在序列1的位置指定我们想要转换的通道,然后ADC就会对这个通道进行模数转换。等待一段时间,转…

android 使用MediaPlayer实现音乐播放--获取音乐数据

前面已经添加了权限&#xff0c;有权限后可以去数据库读取音乐文件&#xff0c;一般可以获取全部音乐、专辑、歌手、流派等。 1. 获取全部音乐数据 class MusicHelper {companion object {SuppressLint("Range")fun getMusic(context: Context): MutableList<Mu…

Spring Boot中使用AOP和反射机制设计一个的幂等注解(两种持久化模式),简单易懂教程

该帖子介绍如何设计利用AOP设计幂等注解&#xff0c;且可设置两种持久化模式 1、普通模式&#xff1a;基于redis的幂等注解&#xff0c;持久化程度较低 2、增强模式&#xff1a;基于数据库&#xff08;MySQL&#xff09;的幂等注解&#xff0c;持久化程度高 如果只需要具有re…

VSCode+ESP-IDF开发ESP32-S3-DevKitC-1(1)开发环境搭建

VSCodeESP-IDF开发ESP32-S3-DevKitC-1&#xff08;1&#xff09;开发环境搭建 1.开发环境搭建&#xff08;安装ESP-IDF&#xff09;2.开发环境搭建&#xff08;安装VS Code&#xff09;3.开发环境搭建&#xff08;VSCode中安装ESP-IDF插件及配置&#xff09; 1.开发环境搭建&am…

论文分享 | FuzzLLM:一种用于发现大语言模型中越狱漏洞的通用模糊测试框架

大语言模型是当前人工智能领域的前沿研究方向&#xff0c;在安全性方面大语言模型存在一些挑战和问题。分享一篇发表于2024年ICASSP会议的论文FuzzLLM&#xff0c;它设计了一种模糊测试框架&#xff0c;利用模型的能力去测试模型对越狱攻击的防护水平。 论文摘要 大语言模型中…

opencv(c++)----图像的读取以及显示

opencv(c)----图像的读取以及显示 imread: 作用&#xff1a;读取图像文件并将其加载到 Mat 对象中。参数&#xff1a; 第一个参数是文件路径&#xff0c;可以是相对路径或绝对路径。第二个参数是读取标志&#xff0c;比如 IMREAD_COLOR 表示以彩色模式读取图像。 返回值&#x…

用源码编译虚幻引擎,并打包到安卓平台

用源码编译虚幻引擎&#xff0c;并打包到安卓平台 前往我的博客,获取更优的阅读体验 作业内容: 源码编译UE5.4构建C项目&#xff0c;简单设置打包到安卓平台 编译虚幻 5 前置内容 这里需要将 Epic 账号和 Github 账号绑定&#xff0c;然后加入 Epic 邀请的组织&#xff0c…

OpenAI震撼发布:桌面版ChatGPT,Windows macOS双平台AI编程体验!

【雪球导读】 「OpenAI推出ChatGPT桌面端」 OpenAI重磅推出ChatGPT桌面端&#xff0c;全面支持Windows和macOS系统&#xff01;这款新工具为用户在日常生活和工作中提供了前所未有的无缝交互体验。对于那些依赖桌面端进行开发工作的专业人士来说&#xff0c;这一更新带来了令人…

【AIGC】破解ChatGPT!如何使用高价值提示词Prompt提升响应质量

文章目录 为什么高价值提示词如此重要&#xff1f;&#x1f50d;1.1 提升响应的相关性和准确性1.2 节省时间与资源1.3 增强用户体验 了解ChatGPT的工作原理&#x1f9e0;2.1 语言模型的训练过程2.2 上下文理解与生成2.3 限制与挑战 高价值提示词的核心要素✍️3.1 清晰明确的指…

07架构面试题

目录 一、关于合生元的面试题的架构分析的问题 1. 陈述两种方案的优劣 2. 在那些条件下&#xff0c;会选择哪一个方案 3. 你倾向那一种&#xff1f; 4. 如果要实施方案二的&#xff0c;准备步骤和流程 一、关于合生元的面试题的架构分析的问题 1. 陈述两种方案的优劣 方案…

反转链表、链表内指定区间反转

反转链表 给定一个单链表的头结点pHead&#xff08;该头节点是有值的&#xff0c;比如在下图&#xff0c;它的val是1&#xff09;&#xff0c;长度为n&#xff0c;反转该链表后&#xff0c;返回新链表的表头。 如当输入链表{1,2,3}时&#xff0c;经反转后&#xff0c;原链表变…

关于win11电脑连接wifi的同时,开启热点供其它设备连接

背景&#xff1a; 我想要捕获手机流量&#xff0c;需要让手机连接上电脑的热点。那么问题来了&#xff0c;我是笔记本电脑&#xff0c;只能连接wifi上网&#xff0c;此时我的笔记本电脑还能开启热点供手机连接吗&#xff1f;可以。 上述内容&#xff0c;涉及到3台设备&#x…

Linux编辑器 - vim

目录 一、vim 的基本概念 1. 正常/普通/命令模式(Normal mode) 2. 插入模式(Insert mode) 3. 末行模式(last line mode) 二、vim 的基本操作 三、vim 正常模式命令集 1. 插入模式 2. 移动光标 3. 删除文字 4. 复制 5. 替换 6. 撤销上一次操作 7. 更改 8. 调至指定…