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

标签 three.js coordinate-systems rotational-matrices matrix-inverse

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

<小时/>

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

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

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

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

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

最佳答案

通过新的 third.js 版本,您可以使用:

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

引用:AxesHelper

关于Three.js:在场景角落显示世界坐标轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16226693/

相关文章:

javascript - 如何在 three.js 中包含 typeface.json 字体文件?

javascript - 如何在飞机的正面和背面放置两种不同的纹理?

javascript - 用欧拉 Angular 或旋转矩阵平均旋转

opencv - 两个相机系统之间的旋转矩阵

Java Tetris - 使用旋转矩阵的旋转

three.js - 计算顶点法线

javascript - BufferGeometry 和 LineBasicMaterial : segments thickness

c# - 有直径的圆

python - 是否有用于不同范数向量空间之间坐标转换的python算法?

c++ - 在笛卡尔坐标和屏幕坐标之间转换