Three.js：在场景的拐角处显示世界坐标轴

这可能是一个非常基本的问题，但我还没有找到解决方案，这一直困扰着我。我希望在摄影机的右下角显示指示世界坐标方向（x、y、z）的箭头，就像在Maya中所做的那样，以便在围绕对象旋转摄影机或在场景中移动时，仍然可以识别世界坐标的方向。我试图用两种不同的方法来实现这一点，但迄今为止都没有成功

我有一个带有三个箭头的对象，作为孩子使用

three.ArrowHelper

类，我们现在将其称为

XYZ

。第一种方法是使

XYZ

成为场景的子对象，并为其提供一个位置，该位置根据摄影机的当前位置加上摄影机指向的方向上的偏移量计算得出，然后进行调整，使其显示在我希望它显示的角落，而不是屏幕的中心。我几乎能做到这一点，因为箭头保持了正确的旋转，但位置有点滑稽，我停止沿着这条路线走，因为在移动相机时，它真的“抖动”。我不确定这是性能问题还是其他问题

第二种方法是使

XYZ

成为具有局部位置偏移的摄影机的子对象，然后反转摄影机的旋转，并将反转应用于

XYZ

，使其与世界坐标匹配。我似乎接近使用这种方法，但我可以得到正确的位置，或正确的旋转，而不是两者

我目前正在使用代码

XYZ.matrix.extractRotation（camera.matrixWorldInverse）

为我提供XYZ的正确方向，但它的定位已关闭。如果我使用

XYZ.matrixWorld.extractRotation（camera.matrixWorldInverse）然后位置保持良好（连接到相机），但方向不变

如果有人有一个快速的黑客让这项工作将不胜感激。如果你有一个比我所追求的更好的方法，那也会很有帮助。
这是以前提到过的

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

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

编辑：更新的小提琴：

three.js r.69
和新的
three.js
版本，您可以使用：

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

参考资料：

var摄影机、场景、渲染器、几何体、材质、网格、axisHelper、LocalToCameraaxeSplace；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（50，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=500；
camera.up=新的三个矢量3（0,0,1）；
场景。添加（摄影机）；
axisHelper=新的三个.axisHelper（0.1）
localToCameraAxesPlacement=new THREE.Vector3（0.45*camera.aspect，-0.45，-2）；//确保在调整窗口大小时更新此选项
添加（axisHelper）
几何=新的三立方测量法（200200200）；
材质=新的三个。MeshNormalMaterial（）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
var t=0
函数render（）{
t++
摄像机位置x=数学坐标（t/80）*500
摄像机位置y=数学sin（t/80）*500
摄影机.注视（网格.位置）
camera.updateMatrix世界（）
var axesPlacement=camera.localToWorld（localToCameraAxesPlacement.clone（））
axisHelper.position.copy（axesPlacement）；
渲染器。渲染（场景、摄影机）；
}
我知道现在有点晚了，但这是我的codesandbox，它提供了一个可以渲染多个场景的解决方案

它可能有点僵硬，对JS来说是新的，等等。这是基于的教程。它使用
renderer.setScissor
函数正确渲染屏幕的不同部分。这也意味着您可以使用此设置创建各种调试窗口。。。也许是axes助手的一个，同时您可以跟踪主场景

脚本的重要部分是定义将进行绘图的区域。这是通过将测量保持在0-1空间中，然后使用画布大小来适当缩放它们来实现的

var nleft = Math.floor(canvas.width * left);
var nbottom = Math.floor(canvas.height * bottom);
var nwidth = Math.floor(canvas.width * width);
var nheight = Math.floor(canvas.height * height);

不知怎的，我错过了那个环节。我会研究一下这个方法，然后再给你回复。然而，我想知道增加第二个摄像头是否会比让我的上述方法发挥作用更能降低性能？它确实有效！必须删除行
camera2.position.sub（controls.target）
因为OribtControls.js不维护目标位置，但其他解决方案实际上是相同的。不要删除该行。使用r.58中的
controls.center
。每秒实例化多少个
Vector3
s？创建一个并重新使用。@trusktr很抱歉，我添加了一个可运行的代码段