Threejs之OrbitControls轨道控制器

本文目录

  • 前言
  • 一、Orbitcontrols(轨道控制器)
    • 1.1 基础使用
    • 1.2 代码演示
  • 二、效果展示

前言

Orbitcontrols(轨道控制器)可以使得相机围绕目标进行轨道运动。

一、Orbitcontrols(轨道控制器)

1.1 基础使用

Constructor OrbitControls( object : Camera, domElement : HTMLDOMElement ) object: (必须)将要被控制的相机。该相机不允许是其他任何对象的子级,除非该对象是场景自身。 domElement: 用于事件监听的HTML元素。
更多文档配置请点这里。


1.2 代码演示

在前面我们创建的物体中,可以发现我们没办法去用鼠标控制物体运动。这个时候我们就可以使用Orbitcontrols(轨道控制器),代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}</style>
</head><body><script type="module">// 倒入轨道控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'import * as THREE from "three";// 创建场景const scene = new THREE.Scene();scene.background = new THREE.Color(0xffffff);// 创建相机const camera = new THREE.PerspectiveCamera( // 透视相机45, // 视角 角度数window.innerWidth / window.innerHeight, // 宽高比 占据屏幕0.1, // 近平面(相机最近能看到物体)1000, // 远平面(相机最远能看到物体));camera.position.set(0, 2, 5);camera.lookAt(0, 0, 0);// 创建渲染器const renderer = new THREE.WebGLRenderer({antialias: true, // 抗锯齿});// 设置渲染器宽高renderer.setSize(window.innerWidth, window.innerHeight);// renderer(渲染器)的dom元素添加到我们的HTML文档中document.body.appendChild(renderer.domElement)// 设置Mesh(网格),网格包含一个几何体以及作用在此几何体上的材质const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));// 将网格对象放入到我们的场景中scene.add(cube);// 控制器const control = new OrbitControls(camera, renderer.domElement)// 开启阻尼惯性,默认值为0.05control.enableDamping = true// 渲染循环动画function animate() {// 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环(在大多数屏幕上,刷新率一般是60次/秒)requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 更新控制器。如果没在动画里加上,那必须在摄像机的变换发生任何手动改变后调用control.update();renderer.render(scene, camera);};// 执行动画animate();</script>
</body></html>

二、效果展示

效果如下:
请添加图片描述
可以看到我们书包已经可以拖动旋转,可以看到物体的各个你想看到的面,并且有了惯性的感觉,因为我们设置了阻尼。

在学习的路上,如果你觉得本文对你有所帮助的话,那就请关注点赞评论三连吧,谢谢,你的肯定是我写博的另一个支持。

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

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

相关文章

【Python 千题 —— 基础篇】身份证隐藏的信息

Python 千题持续更新中 …… 脑图地址 👉:⭐https://twilight-fanyi.gitee.io/mind-map/Python千题.html⭐ 题目描述 题目描述 在一个用户信息管理系统中,你需要处理和验证用户提供的身份证号。编写一个程序来从用户信息字符串中提取和验证身份证号,并提供相应的处理方式…

图论----最小生成树讲解与相关题解

目前已更新系列 当前--图论----最小生成树讲解与相关题解 滑动窗口系列算法总结与题解一 算法系列----并查集总结于相关题解 图论---dfs系列 差分与前缀和总结与对应题解&#xff08;之前笔试真的很爱考&#xff09; 数论---质数判断、质因子分解、质数筛&#xff08;埃氏…

在 Cilium CNI 集群上运行 vCluster 虚拟集群

上周在 KubeCon China 2024 大会上&#xff0c;我和社区伙伴们作为志愿者在 Cilium 项目展台与用户交流。有位用户询问 Cilium 是否能与 vCluster 集成&#xff0c;当时未能给出明确答复&#xff0c;特地回来后进行了测试。 答案是&#xff1a;在最新的 vCluster v0.20 中容器…

【Python篇】Python 类和对象:详细讲解(上篇)

文章目录 Python 类和对象&#xff1a;详细讲解1. 什么是类&#xff08;Class&#xff09;类的定义 2. 什么是对象&#xff08;Object&#xff09;创建对象 3. 属性和方法属性&#xff08;Attributes&#xff09;方法&#xff08;Methods&#xff09;在类中定义属性和方法使用对…

重生奇迹MU 小清新职业智弓MM

游戏中有一种令人迷醉的职业——智弓MM&#xff0c;她们以高超的射箭技能闻名于世。本文将为您介绍这个悠闲的小清新职业&#xff0c;在游戏中的特点以及如何成为一名出色的智弓MM。跟随我们一起探索这个奇妙而神秘的职业吧&#xff01; 悠闲的游戏节奏是游戏的初衷之一&#…

52 mysql 启动过程中常见的相关报错信息

前言 我们这里主要是看一下 service mysql start, service mysql stop 的过程中的一些常见的错误问题 这些 也是之前经常碰到, 但是 每次都是 去搜索, 尝试 1, 2, 3, 4 去解决问题 但是 从来未曾思考过 这个问题到底是 怎么造成的 The server quit without updating PID fil…

【设计模式】创建型模式——抽象工厂模式

抽象工厂模式 1. 模式定义2. 模式结构3. 实现3.1 实现抽象产品接口3.2 定义具体产品3.3 定义抽象工厂接口3.4 定义具体工厂3.5 客户端代码 4. 模式分析4.1 抽象工厂模式退化为工厂方法模式4.2 工厂方法模式退化为简单工厂模式 5. 模式特点5.1 优点5.2 缺点 6. 适用场景6.1 需要…

用3点结构的s1顺序标定2点结构的s2顺序

在行列可自由变换的条件下&#xff0c;3点结构有6个 (A,B)---6*30*2---(0,1)(1,0) 让A分别是3a1&#xff0c;2&#xff0c;…&#xff0c;6&#xff0c;让B全是0。当收敛误差为7e-4&#xff0c;收敛199次取迭代次数平均值&#xff0c;得到 迭代 搜索难度 1 13913.2 1 2 …

客服系统简易版

整体架构解读 客服端和商城端都通过websocket连接到客服系统, 并定期维持心跳当客户接入客服系统时, 先根据策略选择在线客服, 然后再发送消息给客服 websocket实现 用netty实现websocket协议, 增加心跳处理的handler, 详见chat-server模块 客服路由规则 暂时仅支持轮询的…

视频结构化从入门到精通——视频结构化主要技术介绍

视频结构化主要技术 1 视频接入 “视频接入”是视频结构化管道的起点&#xff08;SRC Point&#xff09;视频接入是视频结构化处理的第一步&#xff0c;它涉及将视频数据从各种采集源获取到系统中进行进一步处理。视频接入的质量和稳定性对后续的数据处理、分析和应用至关重要…

【openwrt-21.02】T750 openwrt-21.02 Linux-5.4.238 input子系统----gpio-keys实现分析

input子系统 输入子系统是由设备驱动层(input driver)、输入核心层(input core)、输入事件处理层(input event handle)组成 input子系统架构图 gpio-keys gpio-keys是基于input子系统实现的一个通用按键驱动,该驱动也符合linux驱动实现模型,即driver和device分离模型.一…

毕设创新点之一:基于GD32/STM32的AI模型部署-github库

将AI模型成功部署到边缘MCU中&#xff0c;常常受限于MCU的计算峰值和内存峰值的限制&#xff0c;部署较为困难&#xff0c;目前有一个将AI算法MCU部署到GD32系列MCU中的宝藏的开源库。 项目网址&#xff1a;HomiKetalys/gd32ai-modelzoo: Provide deployable deep learning mo…

Vue.js 模板语法详解:插值表达式与指令使用指南

Vue.js 模板语法详解&#xff1a;插值表达式与指令使用指南 引言 简要介绍主题&#xff1a; Vue.js 是一个现代化的 JavaScript 框架&#xff0c;用于构建用户界面。Vue 的模板语法提供了直观且功能强大的工具&#xff0c;用于将数据与 DOM 绑定。本文将深入探讨 Vue.js 的两个…

Training language models to follow instructionswith human feedback

Abstract 将语言模型做得更大并不会自动提高它们遵循用户意图的能力。例如&#xff0c;大型语言模型可能会生成不真实、有毒或对用户不有帮助的输出。换句话说&#xff0c;这些模型并未与用户对齐&#xff08;aligned&#xff09;。本文展示了一种通过人类反馈来对齐语言模型与…

2024实战指南:四款全免费的数据恢复工具盘点!

在这个数字化的时代里&#xff0c;数据的安全至关重要。如果一不小心删除或丢失了重要数据应该怎么办呢&#xff1f;这几个全免费的数据恢复工具可以帮你解决问题&#xff0c;亲测好用哦&#xff01; 第一款&#xff1a;福昕数据恢复 直达链接&#xff1a;www.pdf365.cn/foxi…

【并发编程】从AQS机制到同步工具类

AQS机制 Java 中常用的锁主要有两类&#xff0c;一种是 Synchronized 修饰的锁&#xff0c;被称为 Java 内置锁或监视器锁。另一种就是在 JUC 包中的各类同步器&#xff0c;包括 ReentrantLock&#xff08;可重入锁&#xff09;、Semaphore&#xff08;信号量&#xff09;、Co…

Android13 Launcher3 客制化Workspace页面指示器

需求&#xff1a;原生态的workspace页面指示器是个长条&#xff0c;不大好看&#xff0c;需要进行客制化 实现效果如图&#xff1a; 实现原理&#xff1a; 代码实现在WorkspacePageIndicator.java 布局在launcher.xml里 实现在WorkspacePageIndicator.java通过重写onDraw函数…

顺序循环队列

顺序循环队列 队头插入元素&#xff0c;队尾删除元素 本来应该判空和判断是否存满的条件都是&#xff1a;队头 队尾&#xff0c;但这样就没办法区分了&#xff0c;所以&#xff0c;就牺牲一个空间&#xff08;比如长度为10&#xff0c;但只能存9个&#xff09;&#xff0c;这…

auto的使用场景

auto的两面性 合理使用auto 不仅可以减少代码量, 也会大大提高代码的可读性. 但是事情总有它的两面性 如果滥用auto, 则会让代码失去可读性 推荐写法 这里推荐两种情况下使用auto 一眼就能看出声明变量的初始化类型的时候 比如迭代器的循环, 用例如下 #include <iostre…

利用autoDecoder工具在数据包加密+签名验证站点流畅测试

站点是个靶场 https://github.com/0ctDay/encrypt-decrypt-vuls 演示地址http://39.98.108.20:8085/ 不是仅登录位置暴力破解的那种场景&#xff0c;使用autoDecoder&#xff08;https://github.com/f0ng/autoDecoder&#xff09;的好处就是每个请求自动加解密&#xff0c;测…