学习threejs，使用OrbitControls相机控制器

news2025/1/21 5:24:07

👨‍⚕️ 主页： 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 arrow
	UP: 'ArrowUp', // up arrow
	RIGHT: 'ArrowRight', // right arrow
	BOTTOM: '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: ms

            stats.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>

效果如下：
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SQL和MySQL以及DAX的日期表生成？数字型日期？将生成的日期表插入到临时表或者实体表中

SQL和MySQL以及DAX的日期表生成？数字型日期？将生成的日期表插入到临时表或者实体表中

几种生成日期表的方法 如何用SQL语句生成日期表呢&#xff1f; 如何用MySQL语句生成日期表呢&#xff1f; 如何用DAX语句生成日期表呢&#xff1f; 1. MySQL生成日期表 1.1 日期格式&#xff1a;yyyy-MM-dd 字符型 2024-01-02 -- 生成日期表 WITH RECURSIVE temp_dateTable …
阅读更多...
C# 动态创建Label和ComboBox控件并修改Text

C# 动态创建Label和ComboBox控件并修改Text

背景&#xff1a;在做项目的时候可能需要根据一定数量创建某些控件并修改其属性&#xff0c;本文以控件label、ConboBox控件进行动态创建。 程序运行前后的的Form动态图 代码如下&#xff1a; using System; using System.Collections.Generic; using System.ComponentModel; …
阅读更多...
2025年编程语言热度分析：Python领跑，Go与Rust崛起

2025年编程语言热度分析：Python领跑，Go与Rust崛起

TIOBE Index&#xff08;TIOBE 编程语言指数&#xff09;是一个衡量编程语言流行度的排名系统。它通过分析多种搜索引擎、在线编程社区、技术论坛、问答网站&#xff08;如 Google、Bing、Yahoo、Wikipedia、Stack Overflow&#xff09;等的搜索和讨论数据&#xff0c;评估不同…
阅读更多...
【从零开始入门unity游戏开发之——C#篇46】C#补充知识点——命名参数和可选参数

【从零开始入门unity游戏开发之——C#篇46】C#补充知识点——命名参数和可选参数

考虑到每个人基础可能不一样&#xff0c;且并不是所有人都有同时做2D、3D开发的需求&#xff0c;所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】&#xff1a;主要讲解C#的基础语法&#xff0c;包括变量、数据类型、运算符、…
阅读更多...
python学opencv|读取图像（三十九 ）阈值处理Otsu方法

python学opencv|读取图像（三十九 ）阈值处理Otsu方法

【1】引言 前序学习了5种阈值处理方法&#xff0c;包括(反)阈值处理、(反)零值处理和截断处理&#xff0c;还学习了一种自适应处理方法&#xff0c;相关文章链接为&#xff1a; python学opencv|读取图像&#xff08;三十三&#xff09;阈值处理-灰度图像-CSDN博客 python学o…
阅读更多...
【Idea】编译Spring源码 read timeout 问题

【Idea】编译Spring源码 read timeout 问题

Idea现在是大家工作中用的比较多的开发工具&#xff0c;尤其是做java开发的&#xff0c;那么做java开发&#xff0c;了解spring框架源码是提高自己技能水平的一个方式&#xff0c;所以会从spring 官网下载源码&#xff0c;导入到 Idea 工具并编译&#xff0c;但是发现build的时…
阅读更多...
macOS安装Gradle环境

macOS安装Gradle环境

文章目录 说明安装JDK安装Gradle 说明 gradle8.5最高支持jdk21&#xff0c;如果使用jdk22建议使用gradle8.8以上版本 安装JDK mac系统安装最新&#xff08;截止2024.9.13&#xff09;Oracle JDK操作记录 安装Gradle 下载Gradle&#xff0c;解压将其存放到资源java/env目录…
阅读更多...
VMware Workstation Pro 17免费开放，再也不用到处找license了

VMware Workstation Pro 17免费开放，再也不用到处找license了

VMware Workstation Pro 17免费开放啦 VMware Workstation Pro 17.6.2 版本介绍一、免费开放二、性能与稳定性提升三、重要问题修复1. Linux 快照崩溃问题解决2. Windows 11 主机优化3. Linux 内核兼容性增强 四、功能亮点1. 全新的性能优化2. 稳定性和可靠性增强3. 更友好的用…
阅读更多...
寒假1.19

寒假1.19

题解 web&#xff08;堆叠注入&#xff09;&#xff1a;[SUCTF 2019]EasySQL 参考wp&#xff1a;BUUCTF [SUCTF 2019]EasySQL1 writeup(详细版&#xff09;-CSDN博客 判断&#xff1a; 法一&#xff1a; 打开环境&#xff0c;有一个可交互的界面&#xff0c;随便输入几个字…
阅读更多...
WebGL渲染3D高斯泼溅模型

WebGL渲染3D高斯泼溅模型

WebGL渲染3D高斯泼溅模型 原文&#xff1a; GitHub - kishimisu/Gaussian-Splatting-WebGL: 3D Gaussian Splatting Renderer for WebGL 此外&#xff0c;一些基于webgpu&#xff0c;threejs渲染&#xff0c;以及和cesium集成的项目如下 GitHub - playcanvas/supersplat: 3D Ga…
阅读更多...
前端：angular工程目录结构和相关文件学习

前端：angular工程目录结构和相关文件学习

前端工程结构&#xff0c;angular&#xff1a; 环境变量文件说明&#xff1a; // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses environment.ts, but if you do // n…
阅读更多...
Linux图形界面详解以及替换桌面程序方法[持续更新]

Linux图形界面详解以及替换桌面程序方法[持续更新]

说明&#xff1a;本文章主要说明Linux图形界面的启动流程&#xff0c;以及使用自己的图形化应用替换桌面程序的方法&#xff0c;类似与安卓启动会启动Launcher&#xff0c;使用自己程序替换Launcher一样&#xff0c;实现应用独占系统&#xff0c;或者设计自己的桌面程序&#x…
阅读更多...
异地IP属地代理业务解析：如何改变IP属地

异地IP属地代理业务解析：如何改变IP属地

在数字化时代&#xff0c;IP地址作为网络设备的唯一标识符&#xff0c;不仅关乎设备间的通信&#xff0c;还涉及到用户的网络身份与位置信息。随着互联网的深入发展&#xff0c;异地IP属地代理业务逐渐走进大众视野&#xff0c;成为许多用户关注的话题。本文将详细解析异地IP属…
阅读更多...
网络安全VS数据安全

网络安全VS数据安全

关于网络安全和数据安全&#xff0c;我们常听到如下两种不同声音&#xff1a; 观点一&#xff1a;网络安全是数据安全的基础&#xff0c;把当年做网络安全的那一套用数据安全再做一遍。 观点二&#xff1a;数据安全如今普遍以为是网络安全的延伸&#xff0c;实际情况是忽略数据…
阅读更多...
Android系统开发（一）：AOSP 架构全解析：开源拥抱安卓未来

Android系统开发（一）：AOSP 架构全解析：开源拥抱安卓未来

引言 当我们手握智能手机&#xff0c;流畅地滑动屏幕、切换应用、欣赏动画时&#xff0c;背后其实藏着一套庞大且精密的开源系统——Android AOSP&#xff08;Android Open Source Project&#xff09;。这套系统不仅是所有安卓设备的根基&#xff0c;也是系统开发者的终极 pl…
阅读更多...
day02_ElasticSearch基础和SeaTunnel

day02_ElasticSearch基础和SeaTunnel

文章目录 day02_ElasticSearch基础和SeaTunnel一、ElasticSearch基本介绍（了解）1、Elasticsearch应用方向2、ElasticSearch特点3、发展历史二、安装ElasticSearch（操作）1、安装ElasticSearch2、插件安装2.1 浏览器安装可视化插件2.2 PyCharm安装Elasticsearch插件三、Elast…
阅读更多...
AI 大爆发时代，音视频未来路在何方？

AI 大爆发时代，音视频未来路在何方？

AI 大模型突然大火了 回顾2024年&#xff0c;计算机领域最大的变革应该就是大模型进一步火爆了。回顾下大模型的发展历程&#xff1a; 萌芽期&#xff1a;&#xff08;1950-2005&#xff09; 1956年&#xff1a;计算机专家约翰麦卡锡首次提出“人工智能”概念&#xff0c;标志…
阅读更多...
OpenEuler学习笔记（三）：为什么要搞OpenEuler？

OpenEuler学习笔记（三）：为什么要搞OpenEuler？

为什么要搞OpenEuler&#xff1f; 技术自主可控需求 在信息技术领域&#xff0c;操作系统是关键的基础软件。过去&#xff0c;很多关键技术被国外厂商掌控&#xff0c;存在技术“卡脖子”的风险。OpenEuler的出现可以为国内提供一个自主可控的操作系统选择。例如&#xff0c;在…
阅读更多...
linux下的NFS和FTP部署

linux下的NFS和FTP部署

目录 NFS应用场景架构通信原理部署权限认证Kerberos5其他认证方式 命令serverclient查看测试系统重启后自动挂载 NFS 共享 高可用实现 FTP对比一些ftp服务器1. **vsftpd (Very Secure FTP Daemon)**2. **ProFTPD (Professional FTP Daemon)**3. **Pure-FTPd**4. **WU-FTPD (Was…
阅读更多...
STM32-keil安装时遇到的一些问题以及解决方案

STM32-keil安装时遇到的一些问题以及解决方案

前言&#xff1a; 本人项目需要使用到STM32,故需配置keil 5&#xff0c;在配置时遇到了以下问题&#xff0c;并找到相应的解决方案&#xff0c;希望能够为遇到相同问题的道友提供一些解决思路 1、提示缺少&#xff08;missing&#xff09;version 5编译器 step1&#xff1a;找…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023