1

私は現在THREE.jsを学んでいますが、おそらく初心者の問題で立ち往生しています。

JSON オブジェクト幅の動的更新があり、4 つの壁のデータが含まれています。JSON 構造体:

{

...

walls: [{
            start: { 
                x : 0,  
                y : 0, 
                z : 0  
            },
            length: 1200,  
            rotation: 0    
        }, {
            start: { 
                x : 0, 
                y : 0, 
                z : 0  
            },
            length: 1200,   
            rotation: -(Math.PI/2)   
        }, {
            start: { 
                x : 0, 
                y : 0,
                z : 1200 
            },
            length: 1200,  
            rotation: 0    
        }, {
            start: { 
                x : 1200, 
                y : 0, 
                z : 0   
            },
            length: 1200,
            rotation: (Math.PI/2) 
        }],

...

}

壁をキャンバスに配置しようとしています。壁に平行移動または回転だけがある場合は問題ありませんが、壁に両方がある場合は問題があります。

これが私のコードです（this._containerは のインスタンスですTHREE.Mesh）：

this._container.matrixAutoUpdate = false;
this._container.add(new THREE.AxisHelper(1000));

if(rotation) {
    this._container.rotation.y = rotation;
    this._container.updateMatrix();        
}

if(translation) {
    this._container.translateX((translation.x + (width/2)));
    this._container.translateY((translation.y + (height/2)));
    this._container.translateZ((translation.z));
    this._container.updateMatrix();
}

最初に回転を適用してから移動すると、オブジェクトのローカル軸も回転し、移動の方向が間違ってしまいます ( http://robber.hu/webgl/1.png )。回転よりも先に平行移動を適用すると、Y 軸が別の位置に移動し、回転が間違った点 ( http://robber.hu/webgl/2.png ) を中心に行われます。

この問題を解決するには 2 つの方法があると思いますが、解決策が見つかりません。

  • どういうわけか「グローバル移動」を使用して、オブジェクトがシーンの軸上で移動するようにしてから、最初の方法を使用します

  • オブジェクトの「ピボット」を左端または右端に変更し、2 番目の方法を使用します。

どうすれば実装できますか、またはこれに関するドキュメント/チュートリアルはどこにありますか?

4

1 に答える 1

2

解決しました。解決策は次のとおりです。 2 つではなく 3 つの変換を使用します。最初にオブジェクトを最終的な位置に移動し、次に回転させ、最後にローカルの X 軸と Y 軸を介して再び移動します。ローカル軸をオブジェクトの中心からコーナーに移動する 3 番目の移動。

R

于 2012-11-07T20:44:11.913 に答える