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

问题描述

这可能是一个非常基本的问题，但是我还没有找到解决方案，这一直困扰着我.我想像在Maya中一样在相机的右下角显示指示世界坐标方向(x，y，z)的箭头，以便在围绕对象旋转相机或在场景中移动时，您仍然可以确定世界坐标的方向.我尝试使用两种不同的方法来完成此操作，但到目前为止都没有奏效.

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 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.

推荐答案

此问题出现在这里.

诀窍是用第二台摄像机添加第二个场景，该场景与原始摄像机的方向相同，但与原点保持指定距离.

The trick is to add a second scene with a second camera, which has the same orientation as the original camera, but maintains a specified distance from the origin.

camera2.position.copy( camera.position );
camera2.position.sub( controls.target );
camera2.position.setLength( CAM_DISTANCE );
camera2.lookAt( scene2.position );

更新小提琴: http://jsfiddle.net/aqnL1mx9/

three.js r.69

three.js r.69

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