当前位置: 首页 > news >正文

学习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相机控制器

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.OrbitControls 相机控…...

说说Babylon.js中scene.deltaTime的大坑

诡异的问题 下面是给一个材质设置发光颜色周期变化和纹理偏移的代码&#xff0c;你能感觉到这里面可能出现的问题吗&#xff1f; 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&#xff08;VSCode&#xff09;中搭建React开发环境是一个相对简单但非常重要的步骤&#xff0c;可以帮助你更高效地进行前端开发。以下是详细的步骤和配置指南&#xff1a; 一、准备工作 安装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 下载环境&#xff1a;https://golang.google.cn/dl/选择对应的版本&#xff1a; 使用 wget 直接拉包下载到服务器中 wget https://golang.google.cn/dl/go1.23.4.linux-amd64.tar.gz如果找不到 wget 命令&#xff0c;yum 下载 wget yum -y install wget配置 go 的环境…...

爬虫后的数据处理与使用(使用篇--实现分类预测)

&#xff08;&#xff09;紧接上文&#xff0c;在完成基本的数据处理后&#xff0c;接下来就是正常的使用了。当然怎么用&#xff0c;确实需要好好思考一下~ 上文&#xff1a;爬虫后的数据处理与使用&#xff08;处理篇&#xff09; 前言&#xff1a; 一般来说&#xff0c;我…...

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、时间&#xff1a;2006-2020年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区名称、年份、工业增加值 4、范围&#xff1a;31省 5、指标解释&#xff1a;工业增加值是指工业企业在一定时期内以货币形式…...

【MySQL】使用C语言链接

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;MySQL 目录 一&#xff1a;&#x1f525; MySQL connect &#x1f98b; Connector / C 使用&#x1f98b; mysql 接口介绍&#x1f98b; 完整代码样例 二&#xff1a;&#x1f525; 共勉 一&#…...

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 安装&#xff1a; 按需引入&#xff1a; 135_尚硅谷Vue技术_element-ui按需引入_哔哩哔哩_b…...

使用 LLaMA-Factory 微调大模型

本文将介绍如下内容&#xff1a; 一、搭建 Docker Container 环境二、配置大模型训练环境三、构建、配置数据集四、训练大模型 一、搭建 Docker Container 环境 笔者此前多篇文章说明&#xff0c;此处不再赘述&#xff0c;可参考&#xff1a;NGC容器中快速搭建Jupyter环境 E…...

数据仓库的复用性:模型层面通用指标体系、参数化模型、版本化管理

在数据仓库设计中&#xff0c;复用性 是一个关键原则&#xff0c;它不仅能提升数据资产的使用效率&#xff0c;还能降低开发成本、优化系统运维。下面将从 模型层面的复用性、通用指标体系、参数化模型、版本化管理 四个方面进行详细介绍&#xff0c;并提供可落地的设计方案。 …...

Web APP 阶段性综述

Web APP 阶段性综述 当前&#xff0c;Web APP 主要应用于电脑端&#xff0c;常被用于部署数据分析、机器学习及深度学习等高算力需求的任务。在医学与生物信息学领域&#xff0c;Web APP 扮演着重要角色。在生物信息学领域&#xff0c;诸多工具以 Web APP 的形式呈现&#xff…...

某国际大型超市电商销售数据分析和可视化

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

电子杂志制作平台哪个好

​作为一个热爱分享的人&#xff0c;我试过了好几个平台&#xff0c;终于找到了几款比较好用得电子杂志制作平台&#xff0c;都是操作界面很简洁&#xff0c;上手非常快的工具。 FLBOOK:这是一款在线制作H5电子画册软件&#xff0c;提供了各种类型的模板&#xff0c;可支持添加…...

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高性能、低功耗的应用处理芯片&#xff0c;集成了4个Cortex-A72和4个Cortex-A53核心&#xff0c;以及独立的NEON协处理器。它适用于ARM PC、边缘计算、个人移动互联网设备及其他多媒体产品。 1.1 Android 多屏同显 iTOP-RK3576 开发板支持…...

cmake + vscode + mingw 开发环境配置

1.软件准备 准备如下软件&#xff1a; mingw64&#xff08;安装完成之后检测是否有环境变量&#xff0c;如果没有需要配置&#xff09; cmake&#xff08;安装完成之后检测是否有环境变量&#xff0c;如果没有需要配置&#xff09; vscode&#xff08;安装CMake插件&#xff0…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

3.3.1_1 检错编码(奇偶校验码)

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

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

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; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

12.找到字符串中所有字母异位词

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