1

私はあなた自身のクローゼットをデザインすることができるjavascriptアプリケーションを開発しています。（カメラからクローゼットまでの距離を変えずに）クローゼットをスムーズに回転できるようにしたいと思います。通常、オブジェクト自体を回転させるのが最も簡単ですが、メッシュごとに原点が異なることを考えると、これはオプションではありません（相対（0,0）ポイントはグローバル（0,0）とは異なります）。代わりに、まるで球体のようにクローゼットの周りでカメラを回転させる必要があると考えました。だから私がやりたいのは、経度と緯度（ユーザー入力）に基づいてカメラが持つ必要のある正確な位置を計算することです。結果として、回転は本当に奇妙です。現在の状態のアプリケーションはここにあります（重要：IEでは動作しませんが、将来的にプラグインがあります）。関連するコードは以下のとおりです。注：これらの数式はオンラインで見つかりました。私は自分で数回計算を行い、毎回数式を確認することができました。私が確信している唯一のことは、オフセットポイント（xOffset、yOffset、zOffset）までの距離（半径）は一定ですが、全体が非常に奇妙に回転することです。私はここでこのような別の質問を見つけました。私は自分の数式を自分の数式に置き換えてみましたが（意味がないのに、うまくいくように見えますが）、まったく役に立ちませんでした（回転はまだ奇妙で、半径はもう一定ではないようです）。

擬似：

x = xOffset + radius * cos(longitude) * cos(latitude)
y = yOffset + radius * cos(longitude) * sin(latitude)
z = zOffset + radius * sin(longitude)
camera.lookAt(xOffset, yOffset, zOffset)

関連するコード（注：度はラジアンに変換されます）：

var lon = 30;
var lat = -90;
var cameraRadius = 400;

function cameraReposition() {   
var lon = dimensions.lon;
var lat = dimensions.lat;
camera.position.x = cameraX + cameraRadius * Math.cos(Math.PI * lon / 180) * Math.cos(Math.PI * lat / 180);
camera.position.y = cameraY + cameraRadius * Math.cos(Math.PI * lon / 180) * Math.sin(Math.PI * lat / 180);
camera.position.z = cameraZ + cameraRadius * Math.sin(Math.PI * lon / 180); 
camera.lookAt(new THREE.Vector3(cameraX, cameraY, cameraZ));
}


$('#visiblecanvas').mousemove(function(e){
    if(mousedown || rightMousedown) {
        var clickX = e.pageX - this.offsetLeft;    
        var clickY = e.pageY - this.offsetLeft;
        lon += (clickY - lastY) / 10;
        lat -= (clickX - lastX) / 10;
        lastY = clickY;
        lastX = clickX;
        if (lon > 360)
            lon -= 360;
        if (lon < -360)
            lon += 360;
        if (lat > 360)
            lat -= 180;
        if (lat < -360)
            lat += 360;
    }
});

別の注意：lonとlatの両方が今のところGUIを介して制御されているため（デバッグ目的で）、lonとlatが360を超えたときに変更される方法は今のところあまり関係ありません。

編集：アプリケーションへの間違ったリンク！修繕。

4

2 に答える 2

4 
    latLongToVector3: function(lat, lon, radius, heigth) {
      var phi = (lat)*Math.PI/180;
      var theta = (lon-180)*Math.PI/180;

      var x = -(radius+heigth) * Math.cos(phi) * Math.cos(theta);
      var y = (radius+heigth) * Math.sin(phi);
      var z = (radius+heigth) * Math.cos(phi) * Math.sin(theta);

      return new THREE.Vector3(x,y,z);
    }
于 2012-11-29T18:33:20.790 に答える
1

カメラのポジショニングは私には問題ないように見えます。少なくとも、緯度または経度のいずれかを変更しても、もう一方は一定に保たれている場合は、適切な軌道に従います。奇妙に見えるのはカメラの向きです。lookAtは「上」がどこにあるかを指定しないため、任意の向きを選択できます。たとえば、正しいポイントを見てしまうかもしれませんが、逆さまになります。

私はThree.jsを自分で試したことがありませんが、ドキュメントには、その追加情報をカメラに提供する方法がわかりません。ProjectionMatrixとその逆を手動で設定する必要がある場合があります。

于 2012-07-02T09:36:01.707 に答える