【Three.js】知识梳理十五:相机控制器Controls

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

1.OrbitControls轨道控制器

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

image-20240524170126425.png

初始化 OrbitControls

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

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

在 JavaScript 文件中:

// 创建相机
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 允许自由旋转,而不局限于固定的目标。

image-20240524165950150.png

初始化 TrackballControls

<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>

在 JavaScript 文件中:

// 创建相机、场景和渲染器(同上)
​
// 初始化 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 提供了类似飞行模拟的相机控制方式,用户可以通过键盘和鼠标来控制相机的移动和旋转,非常适合用于飞行模拟和第一人称视角的应用。

image-20240524170649449.png

初始化 FlyControls

<script src="https://threejs.org/examples/js/controls/FlyControls.js"></script>

在 JavaScript 文件中:

// 创建相机、场景和渲染器(同上)
​
// 初始化 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 环境。

image-20240524170422557.png

初始化 FirstPersonControls

<script src="https://threejs.org/examples/js/controls/FirstPersonControls.js"></script>

在 JavaScript 文件中:

// 创建相机、场景和渲染器(同上)
​
// 初始化 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 来控制场景。

附送250套精选项目源码

源码截图

 源码获取:关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/26360.shtml

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

相关文章

LabVIEW进行负载测试

本文介绍了如何使用LabVIEW进行负载测试&#xff0c;通过一个具体案例详细讲解了测试系统的组成、工作原理和实现方法。系统采用先进的硬件和软件架构&#xff0c;结合LabVIEW的强大功能&#xff0c;成功实现了对设备的高效负载测试&#xff0c;确保了系统的可靠性和性能。 项…

Apache 网站服务基础

Apache 网站服务基础 目录 Apache 网站服务基础 1.1&#xff1a;apache简介 1&#xff1a;Apache 的起源 2&#xff1a;Apache 的主要特点 1.2&#xff1a;安装 httpd 服务器 1&#xff1a;准备工作 2&#xff1a;源码编译及安装 3&#xff1a;确认安装结果 4&#x…

揭秘银行外汇业务:投资与交易的全面指南

银行外汇业务是指银行为客户提供的与外币相关的金融服务。这些业务涉及多个方面&#xff0c;主要包括&#xff1a; 1.外汇存款&#xff1a; 银行接受个人和企业存入的外币资金&#xff0c;并为其提供利息收益。这包括定期和活期存款&#xff0c;以及可能的特殊存款产品。 2.外…

车载网络安全指南 概述(一)

返回总目录->返回总目录<- 目录 前言 参考文档 术语 前言 汽车电子系统网络安全指南给出汽车电子系统网络安全活动框架,以及在此框架下的汽车电子系统网络安全活动、组织管理和支持保障等方面的建议。 汽车电子系统网络安全指南适用于指导整车厂、零部件供应商、软…

借助ServiceDesk Plus,更接近ISO 27001变更管理标准

如果实施不当&#xff0c;变更支持可能会中断业务流程并导致停机。许多组织尚未建立不同的阶段来记录整个变更过程。这通常会导致 IT 环境&#xff0c;在这种环境中&#xff0c;实施变更的成功依赖于单个主题专家。这并不高效&#xff0c;并且对 IT 团队来说可能难以管理和压力…

航天科技集团与SPACEX公司的思考与分析

近期&#xff0c;中国航天科技集团正式发文与SPACEX对标的认识结果&#xff0c;包括发展理念上、科研生产模式上、关键核心技术上、质量效率效益上存在明显差距与不足。真诚的态度&#xff0c;赢得了社会上的广泛关注和积极评价。真心为老东家能够保持这份清醒而高兴。 从对标管…

Python多继承机制及方法解析顺序(MRO)深度解析

Python多继承机制及方法解析顺序&#xff08;MRO&#xff09;深度解析 在Python中&#xff0c;面向对象编程的一个强大特性就是支持多继承&#xff0c;即一个类可以继承自多个父类。这种特性为代码的重用和扩展提供了极大的灵活性&#xff0c;但同时也带来了方法冲突和调用顺序…

web前端开发和前端开发区别

web前端开发和前端开发区别 在数字化时代&#xff0c;web前端开发和前端开发成为了热门的职业领域。然而&#xff0c;对于许多人来说&#xff0c;这两者之间的界限似乎有些模糊。本文将深入探讨web前端开发和前端开发之间的区别&#xff0c;并从四个方面、五个方面、六个方面和…

安装台式电脑网卡驱动

安装电脑网卡驱动 1. 概述2. 具体方法2.1 先确定主板型号2.2 详细操作步骤如下2.2.1 方法一2.2.2 方法二2.2 主流主板官网地址 结束语 1. 概述 遇到重装系统后、或者遇到网卡驱动出现问题没有网络时&#xff0c;当不知道怎么办时&#xff0c;以下的方法&#xff0c;可以作为一…

Unity 设置默认字体(支持老版及新版TMP)

普通UI-Text设置 &#xff08;同一unity版本设置一次即可&#xff09; 1.首先工程的Resources目录下创建Fonts文件夹用于存放字体 如下图所示 2.找到Unity的安装目录下的Editor\Data\Resources\PackageManager\BuiltInPackages\com.unity.ugui\Runtime\UI\Core\Text.cs文件 …

【AI应用探讨】— Meta Llama-3模型应用场景

目录 一、智能对话系统 聊天机器人 虚拟助手 二、内容创作与生成 文本生成 代码生成 三、自然语言处理&#xff08;NLP&#xff09;任务 文本分类 问答系统 四、教育与培训 智能辅导 虚拟教师 五、企业智能 客户服务 内部沟通 六、创意与设计 广告创意 产品设…

Android shell 常用 debug 命令

目录 1、查看版本2、am 命令3、pm 命令4、dumpsys 命令5、sed命令6、log定位查看APK进程号7、log定位使用场景 1、查看版本 1.1、Android串口终端执行 getprop ro.build.version.release #获取Android版本 uname -a #查看linux内核版本信息 uname -r #单独查看内核版本 1.2、…

Java进阶工具: BigInteger, BigDecimal, 正则表达式 Arrays 实战指南

在Java编程的世界里&#xff0c;处理大数据运算、精确的财务计算、复杂的文本匹配以及高效数组操作是开发者的日常挑战。本文将深入剖析 BigInteger、BigDecimal 类的高级运算功能&#xff0c;揭秘正则表达式的强大与灵活性&#xff0c;并介绍 Arrays 类这一数组操作的利器&…

常见报错及程序框架图

程序框架图 程序流程图又称程序框图&#xff0c;是用统一规定的标准符号描述程序运行具体步骤的图形表示。程序框图的设计是在处理流程图的基础上&#xff0c;通过对输入输出数据和处理过程的详细分析&#xff0c;将计算机的主要运行步骤和内容标识出来。程序框图是进行程序设…

【安装笔记-20240612-Linux-内网穿透服务之cpolar极点云】

安装笔记-系列文章目录 安装笔记-20240612-Linux-内网穿透服务之 cpolar 极点云 文章目录 安装笔记-系列文章目录安装笔记-20240612-Linux-内网穿透服务之 cpolar 极点云 前言一、软件介绍名称&#xff1a;cpolar极点云主页官方介绍 二、安装步骤测试版本&#xff1a;openwrt-…

java多线程临界区介绍

在Java多线程编程中&#xff0c;"临界区"是指一段必须互斥执行的代码区域。当多个线程访问共享资源时&#xff0c;为了防止数据不一致或逻辑错误&#xff0c;需要确保同一时刻只有一个线程可以进入临界区。Java提供了多种机制来实现这一点&#xff0c;例如synchroniz…

理解 GPIO 的推挽与开漏

在日常的嵌入式开发过程当中&#xff0c;GPIO可以说是接触最多的外设了。小到点亮一个LED灯&#xff0c;大到模拟总线通讯&#xff0c;都必不可少地需要用到GPIO资源。而对于GPIO的两大输出模式 ——推挽输出和开漏输出&#xff0c;你是否真正理解了呢&#xff1f; 首先我们看…

CPI降温仍猛砍降息预期!美联储继续按兵不动,预计今年仅降息一次

要点&#xff1a; 美联储继续保持利率不变&#xff0c;符合市场预期。 决议声明不再说降通胀缺乏进一步进展&#xff0c;改称取得适度的进... 要点&#xff1a; 美联储继续保持利率不变&#xff0c;符合市场预期。 决议声明不再说降通胀缺乏进一步进展&#xff0c;改称取得适度…

linux开发过程

Linux开发过程可以大致分为以下几个阶段&#xff1a; 一、需求分析阶段 与客户或利益相关者合作&#xff0c;明确产品的需求和目标。确定产品的功能、性能要求、用户界面设计等。 二、架构设计阶段 制定产品的整体架构设计&#xff0c;确定各个模块的功能和接口。包括硬件架…

【中间件】Pulsar集群安装

目录 一、Pulsar介绍 1.1 Pulsar基本介绍 1.2 Pulsar架构 Producer & Consumer Apache Zookeeper Pulsar Brokers Apache Bookkeeper 二、Zookeeper集群安装 三、Pulsar集群安装 3.1 bookie与broker配置 3.1.1 修改bookie配置文件 3.1.2 修改broker配置文件 3…