学习threejs,使用OrbitControls相机控制器
👨⚕️ 主页: gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏:threejs gis工程师
文章目录
- 一、🍀前言
- 1.1 ☘️THREE.OrbitControls 相机控制器
- 二、🍀使用OrbitControls相机控制器
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于threejs在三维场景中使用OrbitControls相机控制器,亲测可用。希望能帮助到您。一起学习,加油!加油!
1.1 ☘️THREE.OrbitControls 相机控制器
RollControls是Three.js库中的一个相机控制器,是一个非常实用的控制器,它允许用户通过鼠标或触摸设备以轨道方式围绕一个中心点旋转、缩放和平移场景中的相机视角。这个控制器通常用于3D场景中的导航,使用户能够从不同的角度观察场景。
构造函数:
OrbitControls( object : Camera, domElement : HTMLDOMElement )
object: (必须)将要被控制的相机。该相机不允许是其他任何对象的子级,除非该对象是场景自身。
domElement: 用于事件监听的HTML元素。
属性:
.autoRotate : Boolean
将其设为true,以自动围绕目标旋转。
请注意,如果它被启用,你必须在你的动画循环里调用.update()。
.autoRotateSpeed : Float
当.autoRotate为true时,围绕目标旋转的速度将有多快,默认值为2.0,相当于在60fps时每旋转一周需要30秒。
请注意,如果.autoRotate被启用,你必须在你的动画循环里调用.update()。
.dampingFactor : Float
当.enableDamping设置为true的时候,阻尼惯性有多大。 默认值为 0.05。
请注意,要使得这一值生效,你必须在你的动画循环里调用.update()。
.domElement : HTMLDOMElement
该 HTMLDOMElement 用于监听鼠标/触摸事件,该属性必须在构造函数中传入。在此处改变它将不会设置新的事件监听。
.enabled : Boolean
当设置为false时,控制器将不会响应用户的操作。默认值为true。
.enableDamping : Boolean
将其设置为true以启用阻尼(惯性),这将给控制器带来重量感。默认值为false。
请注意,如果该值被启用,你将必须在你的动画循环里调用.update()。
.enablePan : Boolean
启用或禁用摄像机平移,默认为true。
.enableRotate : Boolean
启用或禁用摄像机水平或垂直旋转。默认值为true。
请注意,可以通过将polar angle或者azimuth angle 的min和max设置为相同的值来禁用单个轴, 这将使得水平旋转或垂直旋转固定为所设置的值。
.enableZoom : Boolean
启用或禁用摄像机的缩放。
.keyPanSpeed : Float
当使用键盘按键的时候,相机平移的速度有多快。默认值为每次按下按键时平移7像素。
.keys : Object
这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头(方向)键。
controls.keys = {LEFT: 'ArrowLeft', //left arrowUP: 'ArrowUp', // up arrowRIGHT: 'ArrowRight', // right arrowBOTTOM: 'ArrowDown' // down arrow
}
.maxAzimuthAngle : Float
你能够水平旋转的角度上限。如果设置,其有效值范围为[-2 * Math.PI,2 * Math.PI],且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。
.maxDistance : Float
你能够将相机向外移动多少(仅适用于PerspectiveCamera),其默认值为Infinity。
.maxPolarAngle : Float
你能够垂直旋转的角度的上限,范围是0到Math.PI,其默认值为Math.PI。
.maxZoom : Float
你能够将相机缩小多少(仅适用于OrthographicCamera),其默认值为Infinity。
.minAzimuthAngle : Float
你能够水平旋转的角度下限。如果设置,其有效值范围为[-2 * Math.PI,2 * Math.PI],且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。
.minDistance : Float
你能够将相机向内移动多少(仅适用于PerspectiveCamera),其默认值为0。
.minPolarAngle : Float
你能够垂直旋转的角度的下限,范围是0到Math.PI,其默认值为0。
.minZoom : Float
你能够将相机放大多少(仅适用于OrthographicCamera),其默认值为0。
.mouseButtons : Object
该对象包含由控件所使用的鼠标操作的引用。
controls.mouseButtons = {LEFT: THREE.MOUSE.ROTATE,MIDDLE: THREE.MOUSE.DOLLY,RIGHT: THREE.MOUSE.PAN
}
.object : Camera
正被控制的摄像机。
.panSpeed : Float
位移的速度,其默认值为1。
.position0 : Vector3
由.saveState和.reset方法在内部使用。
.rotateSpeed : Float
旋转的速度,其默认值为1。
.screenSpacePanning : Boolean
定义当平移的时候摄像机的位置将如何移动。如果为true,摄像机将在屏幕空间内平移。 否则,摄像机将在与摄像机向上方向垂直的平面中平移。当使用 OrbitControls 时, 默认值为true;当使用 MapControls 时,默认值为false。
.target0 : Vector3
由.saveState和.reset方法在内部使用。
.target : Vector3
控制器的焦点,.object的轨道围绕它运行。 它可以在任何时候被手动更新,以更改控制器的焦点。
.touches : Object
该对象包含由控件所使用的触摸操作的引用。
controls.touches = {ONE: THREE.TOUCH.ROTATE,TWO: THREE.TOUCH.DOLLY_PAN
}
.zoom0 : Float
由.saveState和.reset方法在内部使用。
.zoomSpeed : Float
摄像机缩放的速度,其默认值为1。
方法:
.dispose () : undefined
移除所有的事件监听。
.getAzimuthalAngle () : radians
获得当前的水平旋转,单位为弧度。
.getPolarAngle () : radians
获得当前的垂直旋转,单位为弧度。
.getDistance () : Float
返回从相机到目标的距离。
.listenToKeyEvents ( domElement : HTMLDOMElement ) : undefined
为指定的DOM元素添加按键监听。推荐将window作为指定的DOM元素。
.reset () : undefined
将控制器重置为上次调用.saveState时的状态,或者初始状态。
.saveState () : undefined
保存当前控制器的状态。这一状态可在之后由.reset所恢复。
.update () : Boolean
更新控制器。必须在摄像机的变换发生任何手动改变后调用, 或如果.autoRotate或.enableDamping被设置时,在update循环里调用。
事件:
change
当相机已被控件转换时触发。
start
当交互开始时触发。
end
当交互完成时触发。
二、🍀使用OrbitControls相机控制器
1. ☘️实现思路
- 1、初始化renderer渲染器
- 2、初始化Scene三维场景scene
- 3、初始化camera相机,定义相机位置 camera.position.set,设置相机方向camera.lookAt。
- 4、创建THREE.AmbientLight环境光源ambiLight,scene场景添加ambiLight。创建THREE.DirectionalLight平行光源directLight,设置平行光源的位置和光强,场景scene中添加directLight。
- 5、加载几何模型:创建THREE.SphereGeometry球体几何体geom,使用普通纹理贴图planetTexture和法向量纹理贴图normalTexture创建THREE.MeshPhongMaterial高光材质planetMaterial,通过THREE.SceneUtils.createMultiMaterialObject传入geom和planetMaterial创建球体网格对象sphere,场景scene加入sphere。具体代码参考代码样例。
- 6、加入THREE.OrbitControls相机控制器orbitControls,设置orbitControls相关参数。加入stats监控器,监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html><html><head><title>使用OrbitControls相机控制器</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../libs/OrbitControls.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- Javascript 代码 -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器,设置颜色、大小和投影var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;var sphere = createMesh(new THREE.SphereGeometry(20, 40, 40));// 添加球体scene.add(sphere);// 设置相机位置和方向camera.position.x = -20;camera.position.y = 30;camera.position.z = 40;camera.lookAt(new THREE.Vector3(00, 0, 0));var orbitControls = new THREE.OrbitControls(camera);orbitControls.autoRotate = true;var clock = new THREE.Clock();var ambiLight = new THREE.AmbientLight(0x111111);scene.add(ambiLight);var directLight = new THREE.DirectionalLight(0xffffff);directLight.position.set(-20, 30, 40);directLight.intensity = 1.5;scene.add(directLight);// 渲染器绑定html要素document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;render();function createMesh(geom) {var planetTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/mars_1k_color.jpg");var normalTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/mars_1k_normal.jpg");var planetMaterial = new THREE.MeshPhongMaterial({map: planetTexture, bumpMap: normalTexture});var wireFrameMat = new THREE.MeshBasicMaterial();wireFrameMat.wireframe = true;var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);return mesh;}function render() {stats.update();var delta = clock.getDelta();orbitControls.update(delta);requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: msstats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>
效果如下:
相关文章:

学习threejs,使用OrbitControls相机控制器
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.OrbitControls 相机控…...
说说Babylon.js中scene.deltaTime的大坑
诡异的问题 下面是给一个材质设置发光颜色周期变化和纹理偏移的代码,你能感觉到这里面可能出现的问题吗? var passTime 0;var uOffset 0;var deltaTime 0;function SetEmissiveColor() {passTime scene.deltaTime * 0.05;if(passTime > 6.2…...

【React】win系统环境搭建
动图更精彩 方案如下 在Visual Studio Code(VSCode)中搭建React开发环境是一个相对简单但非常重要的步骤,可以帮助你更高效地进行前端开发。以下是详细的步骤和配置指南: 一、准备工作 安装Visual Studio Code (VSCode)&#x…...

ThinkPHP 8的一对一关联
【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…...

Linux 下配置 Golang 环境
go sdk 下载环境:https://golang.google.cn/dl/选择对应的版本: 使用 wget 直接拉包下载到服务器中 wget https://golang.google.cn/dl/go1.23.4.linux-amd64.tar.gz如果找不到 wget 命令,yum 下载 wget yum -y install wget配置 go 的环境…...

爬虫后的数据处理与使用(使用篇--实现分类预测)
()紧接上文,在完成基本的数据处理后,接下来就是正常的使用了。当然怎么用,确实需要好好思考一下~ 上文:爬虫后的数据处理与使用(处理篇) 前言: 一般来说,我…...

arcgis提取不规则栅格数据的矢量边界
效果 1、准备数据 栅格数据:dem或者dsm 2、栅格重分类 分成两类即可 3、新建线面图层 在目录下选择预先准备好的文件夹,点击右键,选择“新建”→“Shapefile”,新建一个Shapefile文件。 在弹出的“新建Shapefile”对话框内“名称”命名为“折线”,“要素类型”选…...
python milvus 如何检查有多少个collection 以及多少个index,多少个database
在 Milvus 中,可以通过 Python 客户端(`pymilvus`)来检查当前有多少个集合(Collection)、索引(Index)和数据库(Database)。以下是具体的方法: --- ### 1. 检查有多少个集合(Collection) 使用 `list_collections()` 方法可以列出当前连接的所有集合。 ```python…...

2006-2020年各省工业增加值数据
2006-2020年各省工业增加值数据 1、时间:2006-2020年 2、来源:国家统计局、统计年鉴 3、指标:行政区划代码、地区名称、年份、工业增加值 4、范围:31省 5、指标解释:工业增加值是指工业企业在一定时期内以货币形式…...

【MySQL】使用C语言链接
🌈 个人主页:Zfox_ 🔥 系列专栏:MySQL 目录 一:🔥 MySQL connect 🦋 Connector / C 使用🦋 mysql 接口介绍🦋 完整代码样例 二:🔥 共勉 一&#…...

Vue篇-07
Vue UI组件库 一、移动端常用的UI组件库 1.1、Vant 1.2、Cube UI 1.3、Mint UI 二、PC端常用的UI组件库 2.1、Element UI Element - The worlds most popular Vue UI framework 安装: 按需引入: 135_尚硅谷Vue技术_element-ui按需引入_哔哩哔哩_b…...
使用 LLaMA-Factory 微调大模型
本文将介绍如下内容: 一、搭建 Docker Container 环境二、配置大模型训练环境三、构建、配置数据集四、训练大模型 一、搭建 Docker Container 环境 笔者此前多篇文章说明,此处不再赘述,可参考:NGC容器中快速搭建Jupyter环境 E…...
数据仓库的复用性:模型层面通用指标体系、参数化模型、版本化管理
在数据仓库设计中,复用性 是一个关键原则,它不仅能提升数据资产的使用效率,还能降低开发成本、优化系统运维。下面将从 模型层面的复用性、通用指标体系、参数化模型、版本化管理 四个方面进行详细介绍,并提供可落地的设计方案。 …...
Web APP 阶段性综述
Web APP 阶段性综述 当前,Web APP 主要应用于电脑端,常被用于部署数据分析、机器学习及深度学习等高算力需求的任务。在医学与生物信息学领域,Web APP 扮演着重要角色。在生物信息学领域,诸多工具以 Web APP 的形式呈现ÿ…...

某国际大型超市电商销售数据分析和可视化
完整源码项目包获取→点击文章末尾名片! 本作品将从人、货、场三个维度,即客户维度、产品维度、区域维度(补充时间维度与其他维度)对某国际大型超市的销售情况进行数据分析和可视化报告展示,从而为该超市在弄清用户消费…...

电子杂志制作平台哪个好
作为一个热爱分享的人,我试过了好几个平台,终于找到了几款比较好用得电子杂志制作平台,都是操作界面很简洁,上手非常快的工具。 FLBOOK:这是一款在线制作H5电子画册软件,提供了各种类型的模板,可支持添加…...
Django Admin 实战:实现 ECS 集群批量同步功能
引言 在管理大规模 AWS ECS (Elastic Container Service) 集群时,保持本地数据库与 AWS 实际状态的同步是一项关键任务。手动更新既耗时又容易出错,因此自动化这个过程变得尤为重要。本文将介绍如何利用 Django Admin 的自定义动作功能来实现 ECS 集群的批量同步操作,从而大…...

虚拟拨号技术(GOIP|VOIP)【基于IP的语音传输转换给不法分子的境外来电披上一层外衣】: Voice over Internet Protocol
文章目录 引言I 虚拟拨号技术(GOIP|VOIP)原理特性:隐蔽性和欺骗性II “GOIP”设备原理主要功能III 基于IP的语音传输 “VOIP” (Voice over Internet Protocol)IV “断卡行动”“断卡行动”目的电信运营商为打击电诈的工作V 知识扩展虚拟号保护隐私虚拟运营商被用于拨打骚扰…...

迅为RK3576开发板Android 多屏显示
迅为iTOP-3576开发板采用瑞芯微RK3576高性能、低功耗的应用处理芯片,集成了4个Cortex-A72和4个Cortex-A53核心,以及独立的NEON协处理器。它适用于ARM PC、边缘计算、个人移动互联网设备及其他多媒体产品。 1.1 Android 多屏同显 iTOP-RK3576 开发板支持…...

cmake + vscode + mingw 开发环境配置
1.软件准备 准备如下软件: mingw64(安装完成之后检测是否有环境变量,如果没有需要配置) cmake(安装完成之后检测是否有环境变量,如果没有需要配置) vscode(安装CMake插件࿰…...

大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...

3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...

前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...