Three.js：シーンのコーナーにワールド座標軸を表示

Question

これはおそらく非常に基本的な問題ですが、私はまだ解決策を見つけられておらず、悩まされています。カメラの右下隅にあるワールド座標の方向（x、y、z）を示す矢印をMayaで行うようにしたいので、カメラをオブジェクトの周りで回転させたり、シーンを移動するときに、それでも世界座標の方向を特定することができます。私は2つの異なるアプローチを使ってこれを達成しようとしましたが、どちらもこれまで働いていませんでした。

THREE.ArrowHelperクラスを使用する子として3つの矢印を持つオブジェクトがある場合は、すぐにXYZと呼びます。最初の方法は、XYZをシーンの子にして、カメラの現在の位置とカメラが指示している方向のオフセットから計算された位置を提供し、角の下に表示されるように調整します。スクリーンの中心。矢印が正しい回転を維持しているので、私はほとんどこれを手に入れましたが、ポジションはちょっと面白くて、カメラを動かすときに本当に「ジッタイ」だったのでこのルートをやめました。私はそれがパフォーマンス上の問題であろうと何か他のものであるかどうかはわかりません。

XYZローカル位置オフセットを持つカメラの子を作成し、カメラの回転を逆にして逆回転をXYZに適用してワールド座標と一致するようにします。私はこのメソッドを使用して近くにいるようだが、私は正しい位置を取得することも、回転を正しくすることも、両方を取得することもできます。

XYZの正しい向きを私に提供するために、現在コードXYZ.matrix.extractRotation(camera.matrixWorldInverse);を使用していますが、位置はオフです。 XYZ.matrixWorld.extractRotation(camera.matrixWorldInverse);を使用すると、位置は良好なままですが（カメラに取り付けられます）、向きは変わりません。

誰かがこの作業を行うための素早いハックを持っていると大変感謝しています。あなたがより良い方法を持っているなら、私はそれを追求しているよりも役に立つでしょう。

** - EDIT - ** ここで作業バージョンを見つけることができます - （https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/）私はGoogleドライブにコードを保存していますが、ローカルでワンプとエイリアシングを使用しています。 Googleドライブの同期がとればすぐにローカルに反映されます。 I.それはあなたが見ているときに壊れているかもしれません。

Answer 1

これはhereより前に公開されています。

トリックは、元のカメラと同じ向きを持ちながら、原点から指定された距離を維持する第2のカメラで第2のシーンを追加することです。

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

EDIT：更新フィドル：

var axisHelper = new THREE.AxisHelper(5); 
scene.add(axisHelper); 

：新しいthree.jsバージョン（とき以来か分からない）あなたが使用することができますしてhttp://jsfiddle.net/aqnL1mx9/

three.js r.69

Answer 2

リファレンス：AxisHelper

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 
 
\t \t 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()) 
 
\t \t 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);