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

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和aliasing在本地工作意味着我在本地进行的任何更改都会在谷歌驱动器同步后立即在线反映出来.IE看起来可能会被打破.

Answer 1

这已经出现在这里.

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

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);