程序员经验分享-hwhale

Three.js：在场景角落显示世界坐标轴

2024-01-10

我想在相机的右下角显示指示世界坐标方向（x，y，z）的箭头，就像在 Maya 中所做的那样，这样当围绕对象旋转相机或在场景中移动时，您仍然可以识别世界坐标的方向。

我尝试使用两种不同的方法来完成此任务，但到目前为止都没有奏效。

我有一个带有三个箭头的物体，作为孩子使用THREE.ArrowHelper类，我们称之为XYZ暂时。第一种方法是使XYZ场景的子级，并为它提供一个根据相机当前位置加上相机指向方向的偏移计算的位置，并进行调整，使其出现在我希望它出现的角落而不是屏幕的中心。我几乎已经完成了这项工作，因为箭头保持了正确的旋转，但位置有点有趣，我停止沿着这条路线走，因为移动相机时真的很“紧张”。我不确定这是性能问题还是其他问题。

第二种方法是制作XYZ具有本地位置偏移的相机的子级，然后反转相机的旋转并将反转的旋转应用到XYZ所以它匹配世界坐标。我似乎很接近使用这种方法，但我要么可以得到正确的位置，要么得到正确的旋转，但不能两者兼而有之。

我目前正在使用代码XYZ.matrix.extractRotation( camera.matrixWorldInverse );为我提供正确的方向XYZ，但它的定位已关闭。如果我使用XYZ.matrixWorld.extractRotation( camera.matrixWorldInverse );那么位置保持不变（连接到相机），但方向不会改变。

如果有人能快速实现此功能，我们将不胜感激。如果您有比我正在追求的方法更好的方法，那也会有所帮助。


与新three.js您可以使用的版本：

var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

参考：坐标轴助手 https://threejs.org/docs/#api/helpers/AxesHelper

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

threeJs

coordinatesystems

rotationalmatrices

matrixinverse

Three.js：在场景角落显示世界坐标轴 的相关文章

  • 旋转相机与旋转场景点（仅该点，而不是整个场景）之间有什么不同？

    我认为旋转相机并拍摄场景照片与保持相机稳定并反向旋转场景会产生相同的结果 假设原始相机旋转矩阵为R1 旋转相机意味着我们应用另一个旋转矩阵 R12 因此 R2 R12 R1 是新的旋转矩阵 假设X是场景点的真实世界坐标 以反向方式旋转场景点

  • 将球体 a 旋转到自身的 b 点

    我试图弄清楚如何将球体从 A 点旋转到 B 点 我找到了一些Unity3d代码 Quaternion rot Quaternion FromToRotation pointA pointB sphere transform rotation

  • 在 React 中渲染 Three.js 元素？

    我正在尝试制作一个渲染 Three js 场景的 React 组件 但是 每当我尝试安装组件而不是看到正在渲染的任何类型的场景时 我只看到文本 object HTMLCanvasElement 正在显示 这是我的组件 import Reac

  • 可点击的精灵标签？

    我一直在玩精灵文本标签 更具体地说是这个例子 http stemkoski github io Three js Sprite Text Labels html http stemkoski github io Three js Sprit

  • 调试 Three.js 中的低 FPS

    我正在处理 Three js WebGL 场景 当我缩小时 我注意到 60 FPS 以便所有观察结果 约 20 000 个三角形 都在视图中 但当我放大时 FPS 非常低 因此只有一个小三角形的子集在视野中 我想弄清楚是什么导致了这种差异

  • 将颜色渐变应用于网格上的材质 - Three.js

    我有一个 STL 文件加载到我的场景中 并将单一颜色应用于 phong 材质 我想要一种方法 将两种颜色应用于该网格物体的材质 并在 Z 轴上应用渐变效果 如下例所示 渐变花瓶 https i stack imgur com Ty9gq j

  • 在 Three.js 中获取 Object3D 的大小

    我的场景中有这个 3D 对象 var icon new THREE Object3D var iconTexture THREE ImageUtils loadTexture images icon png iconMaterial new

  • 在 Objective C 中使用余弦定律计算两点之间的距离？

    我从 Google 地图获取一些 GPS 坐标 我需要找到它们之间的距离 使用 Objective C 我已经实现了该公式 但得到的结果太大了 我通过将 Google 地图的值传回 Google 地球和互联网上的地理编码服务来测试这些值 一

  • 在 TypeScript 中使用三个 Js + OrbitControl

    我无法得到this http www example com 在 TypeScript 中使用上述组合的示例 I have and 在我的html中和打字稿文件

  • 在 Three.js 中使用多种材质来合并几何体

    我想使用 2 个网格创建一棵松树 其中 1 个用于树干 另一个用于灌木 这就是我所做的 var pine geometry new THREE Geometry var pine texture 1 THREE ImageUtils loa

  • THREE.JS，忽略父级的轮换

    我试图使子对象跟随父级位置并表现得像一个普通的子对象 但是我希望它保持其旋转不变 在不影响性能的情况下 最好的方法是什么 我的CPU预算很紧张 已经运行了2个工作线程并且有很多对象 是否有设置只允许孩子的位置受到影响 同样重要的是 当父级旋

  • Three.js canvas.toDataURL 有时为空

    我正在尝试使用 html2canvas js 渲染 THREE js 场景 一些覆盖的 HTML 元素 有用大多数时候 但并非一直如此 在失败的情况下 将渲染 HTML 元素 背景 覆盖层等 但不会渲染其他元素 THREE js 场景表现得

  • 三-mtl-loader 错误：THREE.MeshPhongMaterial：.shading 已被删除 -> 对象不可见

    昨天我问了这个问题 未捕获的类型错误 THREE MTLLoader 不是构造函数 2 0 https stackoverflow com questions 47741644 uncaught typeerror three mtlloa

  • 渲染 ThreeJS 应用程序第一帧时的性能问题

    目前 当我渲染以下内容时 我的 ThreeJS 应用程序的性能受到很大影响第一帧 它会导致 Edge 和 IE 11 浏览器冻结 5 秒 并弹出窗口指示 此窗口没有响应 这可能会吓到我的用户 使用 Chrome 的性能分析器 问题似乎来自几

  • 使用文件 API 将资源加载到 Three.js 中

    我想创建导入 3D 模型以在浏览器中查看的功能 方法是使用File API http www html5rocks com en tutorials file dndfiles Three js 加载器在我托管的文件上运行良好 我的理解是加

  • 如何在react-三纤维中提取并播放动画

    嗯 我有 gltf 动画模型 我成功加载模型 但无法播放嵌入的动画 我想知道是否可以以任何方式解决它 顺便说一句 我正在反应中工作 先感谢您 在这里您可以找到型号https drive google com file d 1ZVyklaQu

  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2

  • 如何在 Three.js 中进入全屏？

    我已经尝试了数十种不同的方法几个小时 但没有一个有效 如下所示 document body addEventListener keydown function THREEx FullScreen request false 如何让Three

  • 在 C 中使用 lapack 计算矩阵的逆

    我希望能够计算一般的逆NxN使用 lapack 在 C C 中编写矩阵 我的理解是 在 lapack 中进行反转的方法是使用dgetri函数 但是 我无法弄清楚它的所有参数应该是什么 这是我的代码 void dgetri int N dou

  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len

随机推荐

  • 在 R 包中使用 C++ 库

    在 R 中使用 C 库的最佳方式是什么 希望保留 C 数据结构 我根本不是 C 用户 因此我不清楚可用方法的相对优点 R ext 手册似乎建议将每个 C 函数包装在 C 中 但是 至少存在四到五种其他合并 C 的方法 有两种方法是具有相似血

  • 如何将像素数据的所有权传递给 cv::Mat

    我正在创建一个 cv Mat 传递我在外部分配的像素数据 cv Mat myMatrix vImageResult height vImageResult width CV 8UC1 vImageResult data 我希望 cv Mat

  • 如何获得市场上多个价格项目的反应

    我通过以下链接查看背包 cs go 中每件物品的价格 但以 100 件商品为例 我检查 100 个链接以获取所有商品的价格 是否可以查询带有许多商品的 steam 而 steam 只响应一个包含所有请求价格的 json 我希望它是一个这样的

  • Swift DateComponentsFormatter 删除前导零，但在分钟位置保留至少一位数字

    我在 Swift 中使用以下 DateComponentsFormatter let formatter DateComponentsFormatter formatter unitsStyle positional formatter a

  • AJAX 使用 CORS 获取自定义响应标头

    我的服务器随响应一起发送自定义标头 我得到了正确的响应数据 但我无法使用 jQuery 访问自定义标头getAllResponseHeaders 或 AngularJS http服务 我得到的只是content type 当我使用 DevT

  • pybot 和机器人命令行

    我尽了最大努力 但无法找到答案 无法找到 pybot 和机器人命令行之间的区别 这是实现相同任务 即执行机器人测试套件 案例 的两个不同选项吗 或者有一个特殊的规则说明何时使用pybot以及何时使用robot命令行运行机器人测试用例 请帮助

  • 如何使用 MSVC 在 C++ 中定义外部 C 结构返回函数？

    以下源文件将无法使用 MSVC 编译器 v15 00 30729 01 进行编译 stest c ifdef cplusplus extern C endif struct Test NB This may be extern when i

  • 如何以编程方式与 winlogon 交互？

    我有一个 Windows 服务 我想使用该服务通过帐户用户名和密码以编程方式解锁工作站 This article https technet microsoft com en us library dn751047 v ws 11 aspx

  • 检查字符串是否仅包含数字或仅包含字符 (R)

    我有这三个字符串 letters lt abc numbers lt 123 mix lt b1dd 如何检查这些字符串中哪一个仅包含字母或仅包含数字 在 R 中 letters仅应在仅字母检查中为 TRUE numbers仅在 NUMBE

  • Bash 中的行尾（新行）转义

    转义字符 可用于转义行尾 例如 echo This could be a very long line Output This could be a very long line 但是 行尾 新行 不是由 n其中有两个字符 转义的结果不应该

  • 为什么交换多维数组不是 noexcept ？

    我有以下片段 include

  • 根据关系表获取多个表的结果

    我有 dbo Users 表 Id Name 1 John 2 Mary 3 Michael 然后我有 dbo Phones 表 Id Phonenumber 10 1234 11 5555 然后我有 dbo Relationship 表

  • Laravel Eloquent 按关系表列排序

    我尝试对产品进行排序shop products表格依据pinned专栏来自shop products options table products Shop Product with options gt function query qu

  • lein REPL 服务器启动超时

    在基于 liberator 的 clojure 项目中 我们使用 datomic 作为数据库 将我们的本地开发数据库迁移到 S3 托管的数据库并在我们的 project clj 上添加所需的依赖项后 我们无法启动 REPL 但 Libera

  • django-filter：使用 ChoiceFilter 并根据请求进行选择

    我正在使用 django filter 并需要添加ChoiceFilter根据我收到的请求进行选择 我正在阅读 ChoiceFilter 的文档 但它说 This filter matches values in its choices a

  • 将 csv 最快导入数据库表

    我已经实现了一个导入功能 该功能从 Asp Net 应用程序中的 csv 文件获取数据 文件大小可以从几 kb 到最大 10 MB 不等 但是 当发生导入并且文件大小 gt 50000 时 大约需要 20 分钟 这时间太多了 我需要在 2

  • 如何在由javascript创建的html中显示动态url图像

    我试图通过 Javascript 生成的动态链接直接以 HTML 形式显示图像 function dynamicUrl var url http xxx xxx xxx dynamic variables jpg return url 我的

  • 适用于多类型用户的猫鼬模型

    我正在用 MEAN stack 为学生和老师建立一种社交网络 学生有自己的帐户页面 与教师的帐户页面不同 我有一个供教师和学生使用的注册页面 注册时 用户必须使用 select html 标签选择帐户的 类型 学生或教师 我想要一个代表两种

  • UITableView reloadData 导致 UITextField 辞职 FirstResponder

    我有一个文本字段 设置为使用输入的每个字母更改 tableView 的数据源 并调用 reloadData 但由于某种原因 每次输入字母时 键盘都会消失 有人知道为什么吗 您的文本字段正在辞职 因为重新加载的单元格被发送 resignFir

  • Three.js：在场景角落显示世界坐标轴

    我想在相机的右下角显示指示世界坐标方向 x y z 的箭头 就像在 Maya 中所做的那样 这样当围绕对象旋转相机或在场景中移动时 您仍然可以识别世界坐标的方向 我尝试使用两种不同的方法来完成此任务 但到目前为止都没有奏效 我有一个带有三个

热门标签