Question

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

我有一个带有三个箭头的对象作为使用THREE.ArrowHelper类的孩子，我们暂时将其称为XYZ。第一种方法是让XYZ成为场景的孩子，并根据相机的当前位置计算出一个位置，加上相机指向的方向偏移并进行调整，使其显示在我想要的角落里而不是在屏幕的中心。我几乎得到了这个工作，因为箭头保持正确的旋转，但位置有点滑稽，我停止沿着这条路线，因为当移动相机时它真的是“紧张”。我不确定这是性能问题还是其他问题。

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

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

如果有人快速破解这项工作，我们将不胜感激。如果你有一个比我正在追求的方法更好的方法，那么这也会有所帮助。

** - 编辑 - ** 应该提一下，你可以在这里找到工作版本 - （https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/）我将我的代码存储在谷歌驱动器中，但使用wamp和别名在本地工作，这意味着我在本地进行的任何更改都会立即在线反映到谷歌驱动同步。 I.E.当你看一眼时，它可能会被打破。

Answer 1

这已经出现在here之前。

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

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

Answer 2

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

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

参考：AxesHelper

Answer 3

var camera, scene, renderer, geometry, material, mesh, axisHelper, localToCameraAxesPlacement;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    camera.up = new THREE.Vector3(0,0,1);
    scene.add(camera);
    
    axisHelper = new THREE.AxisHelper( 0.1 )
    localToCameraAxesPlacement = new THREE.Vector3(0.45 * camera.aspect,-0.45, -2); // make sure to update this on window resize
		scene.add(axisHelper)

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

var t = 0
function render() {
    t++
    
    camera.position.x = Math.cos(t/80) * 500
    camera.position.y = Math.sin(t/80) * 500
    camera.lookAt(mesh.position)
    
    camera.updateMatrixWorld()
    var axesPlacement = camera.localToWorld(localToCameraAxesPlacement.clone())
		axisHelper.position.copy(axesPlacement);

    renderer.render(scene, camera);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

这是一种“快速而肮脏”的方式来添加AxisHelper而不创建其他场景。它的工作原理是在每次渲染时将轴辅助器移动到摄像机前面。

// Initialize
var scene = getScene();
axisHelper = new THREE.AxisHelper( 0.1 );
var localToCameraAxesPlacement = new THREE.Vector3(0.45 * camera.aspect,-0.45,-2); // make sure to update this on window resize
scene.add(axisHelper);

// On every render
var camera = getCamera();
camera.updateMatrixWorld();
var axesPlacement = camera.localToWorld(localToCameraAxesPlacement.clone());
axisHelper.position.copy(axesPlacement);

Answer 4

我知道这有点晚了，但这是我的codeandbox，其中包含一个可渲染多个场景https://codesandbox.io/s/eager-glade-46ung的解决方案。

对于JS来说，这可能有点老套，而且还不错。这是基于threejsfundamentals的教程。它使用renderer.setScissor函数，以正确渲染屏幕的不同部分。这也意味着您可以使用此设置来创建各种调试窗口……也许是一个用于轴辅助程序的调试窗口，同时您可以跟踪主要场景。

脚本的重要部分是定义将要进行绘制的区域。通过将测量保持在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);

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

4 个答案: