Three.js:在场景一角显示世界坐标轴 [英] Three.js: Show world coordinate axes in corner of scene

问题描述

这可能是一个非常基本的问题，但我还没有找到解决方案，它一直困扰着我.我想在相机的右下角显示指示世界坐标方向(x、y、z)的箭头，就像在 Maya 中所做的那样，这样当围绕一个物体旋转相机或在场景中移动时，您仍然可以识别世界坐标的方向.我尝试使用两种不同的方法来实现这一点，但到目前为止都没有奏效.

This is probably a very basic problem, but I haven't found a solution yet and it's been bugging me. I'd like to show arrows indicating the world coordinate directions (x, y, z) in the bottom right hand corner of the camera like is done in Maya, so that when rotating the camera around an object, or moving through a scene, you can still identify the directions of the world coordinates. I've tried to accomplish this using two different approaches and neither has worked so far.

我有一个使用 THREE.ArrowHelper 类的带有三个箭头的对象，我们暂时将其命名为 XYZ.第一种方法是让 XYZ 成为场景的子元素，并为其提供一个位置，该位置由相机当前位置加上相机指向的方向的偏移量计算得出，然后调整使其出现在角落 I希望它而不是在屏幕中央.我几乎已经开始工作了，因为在箭头中保持正确的旋转，但位置有点有趣，我停止沿着这条路线走，因为在移动相机时真的很紧张".我不确定这是性能问题还是其他问题.

I have an object with three arrows as children using the THREE.ArrowHelper class, we'll call it XYZ for the moment. The first approach is to make XYZ a child of the scene and provide it a position calculated from the camera's current position plus an offset in the direction the camera is pointing and adjust so it appears down in the corner I want it to instead of in the center of the screen. I've almost got this working, as in the arrows maintain the correct rotation, but the position is a little bit funny, and I stopped going down this route because it was really 'jittery' when moving the camera around. I'm not sure whether it was a performance issue or something else.

第二种方法是使XYZ成为具有局部位置偏移量的相机的孩子，然后反转相机的旋转并将反转的旋转应用到XYZ，所以它匹配世界坐标.使用这种方法我似乎很接近，但我可以得到正确的位置，或者正确的旋转，而不是两者.

The second method is to make XYZ a child of the camera with a local position offset and then reverse the rotation of the camera and apply the reversed rotation to XYZ so it matches world coordinates. I seem to be close using this method, but I can either get the position correct, or the rotation correct, not both.

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

I'm currently using the code XYZ.matrix.extractRotation( camera.matrixWorldInverse ); to provide me with the correct orientation for XYZ, but it's positioning is off. If I use XYZ.matrixWorld.extractRotation( camera.matrixWorldInverse ); then the position remains fine (attached to camera) but the orientation doesn't change.

如果有人能快速解决这个问题，我们将不胜感激.如果您有比我正在追求的方法更好的方法，那也会有帮助.

If anyone has a quick hack to get this working it'd be much appreciated. If you've got a better method, than the one's I'm pursuing then that would also be helpful.

推荐答案

使用新的 three.js 版本，您可以使用:

With new three.js versions you can use:

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

参考:AxesHelper

这篇关于Three.js:在场景一角显示世界坐标轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！