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.mzph.cn/diannao/61787.shtml

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

相关文章

CMake笔记:install(TARGETS target,...)无法安装的Debug/lib下

1. 问题描述 按如下CMake代码,无法将lib文件安装到Debug/lib或Release/lib目录下,始终安装在CMAKE_INSTALL_PREFIX/lib下。 install(TARGETS targetCONFIGURATIONS DebugLIBRARY DESTINATION Debug/lib) install(TARGETS targetCONFIGURATIONS Release…

docker安装使用Elasticsearch,解决启动后无法访问9200问题

1.docker安装、启动es docker pull elasticsearch:8.13.0docker images启动容器 docker run -d -p 9200:9200 -p 9300:9300 -e ES_JAVA_OPTS"-Xms256m -Xmx256m" --name es01 8ebd258614f1-d 后台运行-p 9200:9200 -p 9300:9300 开放与主机映射端口-e ES_JAVA_OPTS…

java-排序算法汇总

排序算法: 冒泡排序(Bubble Sort) 选择排序(Selection Sort) 插入排序(Insertion Sort) 快速排序(Quick Sort) 归并排序(Merge Sort) 堆排序&…

【笔记】自动驾驶预测与决策规划_Part7_数据驱动的预测方法

文章目录 0. 前言1. 多模态传感器的编码方式1.1 栅格化表示1.2 向量化表示 Vectornet1.3 基于点云或者多模态输入的预测1.4 基于Transformer的方法 2. 网络输出的表达形式2.1 多模态轨迹回归2.2 轨迹分类2.3 轨迹回归轨迹分类2.4 目标点预测 3.场景级别的预测和决策3.1 论文&am…

Tortoise ORM

官方文档:Tortoise ORM - Tortoise ORM v0.22.0 Documentation 简介 Tortoise ORM:异步,API和Django ORM 大多类似集成Pydantic;多用于asgi starlette / sanic / FastAPI...Sqlalchemy:支持异步,Flask / …

【大数据学习 | Spark-Core】关于distinct算子

只有shuffle类的算子能够修改分区数量,这些算子不仅仅存在自己的功能,比如分组算子groupBy,它的功能是分组但是却可以修改分区。 而这里我们要讲的distinct算子也是一个shuffle类的算子。即可以修改分区。 scala> val arr Array(1,1,2,…

java基础概念36:正则表达式1

一、正则表达式的作用 作用一:校验字符串是否满足规则;作用二:在一段文本中查找满足要求的内容。——爬虫 二、正则表达式 2-1、字符类 示例: public static void main(String[] args) {System.out.println("a".matc…

oracle的静态注册和动态注册

oracle的静态注册和动态注册 静态注册: 静态注册 : 指将实例的相关信息手动告知 listener 侦 听 器 , 可以使用netmgr,netca,oem 以及直接 vi listener.ora 文件来实现静态注册,在动态注册不稳定时使用,特点是:稳定&…

html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转

效果图&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>图片预览</title><sty…

Selenium+Java(19):使用IDEA的Selenium插件辅助超快速编写Pages

前言 或是惊叹于Selenium对于IDEA的支持已经达到了这样的地步,又或是由于这个好用的小工具的入口就在那里,它已经陪伴了我这么久,而我这么久的时间却都没有发现它。在突然发现这个功能的一瞬间,真的是喜悦感爆棚,于是赶快写下了这篇文章。希望可以帮助到其他同样在做UI自动…

知识付费系统-直播+讲师入驻+课程售卖+商城系统-v2.1.9版本搭建以及资源分享下载+附带完整安装步骤

知识付费系统-直播讲师入驻课程售卖商城系统-v2.1.9版本搭建以及资源分享下载 这是一款很棒&#xff0c;功能很强大的知识付费系统。 源码下载本帖已经绑定&#xff0c;可直接去下载。 1&#xff0c;源码上传 宝塔一键安装后&#xff0c;添加网站上传源码&#xff0c; 2&…

栈的应用,力扣394.字符串解码力扣946.验证栈序列力扣429.N叉树的层序遍历力扣103.二叉树的锯齿形层序遍历

目录 力扣394.字符串解码 力扣946.验证栈序列 力扣429.N叉树的层序遍历 力扣103.二叉树的锯齿形层序遍历 力扣394.字符串解码 看见括号&#xff0c;由内而外&#xff0c;转向用栈解决。使用两个栈处理&#xff0c;一个用String,一个用Integer 遇到数字:提取数字放入到数字栈…

408代码类复习--图类

图类 Author&#xff1a;Joanh_Lan Personal Blog Links&#xff1a;Joanh_LanのCSDN博客 备注&#xff1a; 个人复习版本 不保证完全正确&#xff0c;理性参考&#xff08;不背锅i哦&#xff09; &#xff08;&#xff1a;&#xff08;&#xff1a;&#xff08;&#xff…

Maven的安装——给Idea配置Maven

一、什么是Maven? Maven是一个开源的项目管理工具&#xff0c;它主要用于Java项目的构建、依赖管理和项目生命周期管理。 二、准备环境 maven安装之前&#xff0c;我们要先安装jdk&#xff0c;确保你已经安装了jdk环境。可以通过【win】【r】打开任务管理器&#xff0c;输入…

linux 常用命令指南(存储分区、存储挂载、docker迁移)

前言&#xff1a;由于目前机器存储空间不够&#xff0c;所以‘斥巨资’加了一块2T的机械硬盘&#xff0c;下面是对linux扩容的一系列操作&#xff0c;包含了磁盘空间的创建、删除&#xff1b;存储挂载&#xff1b;docker迁移&#xff1b;anaconda3迁移等。 一、存储分区 1.1 …

OpenCvSharp Demo 饱和度、明度、对比度、锐化、阴影、高光、色温实现滤镜效果

目录 效果 风景-天空滤镜 人像—酷感冷艳滤镜 美食—鲜美滤镜 美食—巧克力滤镜 项目 代码 参考 下载 效果 风景-天空滤镜 人像—酷感冷艳滤镜 美食—鲜美滤镜 美食—巧克力滤镜 项目 代码 using OpenCvSharp; using System; using System.Diagnostics; using Syst…

Easyexcel(4-模板文件)

相关文章链接 Easyexcel&#xff08;1-注解使用&#xff09;Easyexcel&#xff08;2-文件读取&#xff09;Easyexcel&#xff08;3-文件导出&#xff09;Easyexcel&#xff08;4-模板文件&#xff09; 文件导出 获取 resources 目录下的文件&#xff0c;使用 withTemplate 获…

迁移学习理论与应用

迁移学习&#xff08;Transfer Learning&#xff09;是一种机器学习技术&#xff0c;旨在将一个任务&#xff08;源任务&#xff09;上学到的知识迁移到另一个相关但不完全相同的任务&#xff08;目标任务&#xff09;上&#xff0c;从而提高目标任务的学习效果。这种方法的核心…

近期两篇NeRF/3DGS-based SLAM方案赏析:TS-SLAM and MBA-SLAM

原文链接&#xff1a;近期两篇NeRF/3DGS-based SLAM方案赏析&#xff1a;TS-SLAM and MBA-SLAM paper1&#xff1a;TS-SLAM: 基于轨迹平滑约束优化的神经辐射场SLAM方法 导读 本文提出了TS-SLAM&#xff0c;一种改进的基于神经辐射场&#xff08;NeRF&#xff09;的SLAM方法…

游戏引擎学习第20天

视频参考:https://www.bilibili.com/video/BV1VkBCYmExt 解释 off-by-one 错误 从演讲者的视角&#xff1a;对代码问题的剖析与修复过程 问题的起因 演讲者提到&#xff0c;他可能无意中在代码中造成了一个错误&#xff0c;这与“调试时间标记索引”有关。他发现了一个逻辑问题…