十二面体を回転する

Question

私は十二面体を持っているThree.js場面を作ろうとしています。私は十二面体の片側をカメラで拡大し、ボタンを押したときにズームアウトし、別の側に立つまで回転してから再びズームインします。

これを明確にするには：カメラが完全に側1にズームアップされるだろうと私は「5」を押した場合

、私はカメラをズームアウトしたいと思うが - 十二面体を示す - そして5に向けて回転させる（または十二面体がカメラの方を向くように回転させますか？）、再びズームインしてください。カメラは常に上または他の回転ではなく、直面している五角形の底面と平行に設定することが重要です。

あまりにも複雑すぎないように、私は立方体で始めるのが賢明だと思っていました。私はいくつかの基本的な動きを説明するためにいくつかのトゥイーン（Gを押すと）を追加しましたが、それはもはやフィドルでは良く見えません。 jsfiddle

私はこの動きをすべて計算して計算する必要があるように感じましたので、最初に各サイドビューが立方体から持っていた各位置と回転を書き留めてみました。 I 缶私がキューブのために書いた値のいくつかのパターンを見てください。しかし、私は十二面体のために、これを動作する関数に変換する方法を知らない。私の注目値は

side1 (0, 0, 600) (0, 0, 0) 
side2 (600, 0, 0) (0, pi/2, 0) 
side3 (0, 0, -600) (0, pi, 0); 
side4 (-600, 0, 0) (0, -pi/2, 0); 
side5 (0, 600, 0) (-pi/2, 0, 0); 
side6 (0, -600, 0) (pi/2, 0, 0); 

ある私は再発のいくつかの並べ替えが起こって、いくつかの関係を見ることができますが、私は機能でそれらをリンクする方法を見ていないでしょう。私は、それが同じように機能するが、より複雑な形になるための最初のステップと考えています。誰かが私が今見ていなければならない方向に私を導くことができますか？私はもちろんif節をたくさん使うことができるので、それは正しい方法ではありません。

Answer 1

問題を解決するには、まず、十二面体の各辺の中心座標を取得します。

あなたがthree.jsに知っているように、メッシュは三角形で構成され、すべての三角形は3点を持っている、すべての面と頂点が十二面体でmesh.geometry.facesとmesh.geometry.vertices.で見つけることができ、それぞれの側は、三面と5つの頂点を持っている、と私それぞれの法線の法線を使用して、それらの法線を同じ平面上に持つ12のグループに分割します。次に、各辺の5点を求め、平均座標を計算して中心座標を求めます。

私たちが回転する必要がある座標を取得した後、一方の方法は12面体を回転させてカメラを保持し、別の方法は12面体を保持してカメラを翻訳することです、この場合は2番目の方法を選択します。

ここでは、カメラから十二面体の中心までの距離を保つ必要があるため、緑色の円はカメラの軌跡です。

ターゲット位置を取得するには、centerBの座標をオブジェクトシステムの座標にするだけで、座標をワールド座標系に変更する必要があります。

次に、カメラをアニメーションで翻訳すると、カメラは円弧を描く必要があります。 3D空間で円のパラメトリック方程式を使って、これを行うことができます。方程式については、Parametric Equation of a Circle in 3D Spaceを参照してください。この式では、カメラ位置にパラメータθ1を、ターゲット位置にθ2を設定しました。すべてのアニメーションフレームループでカメラ位置をθ1で更新します。

私はjsfiddleにいくつかのコメントを追加します。（は、まだいくつかのバグがあり、更新する必要があります。）

Hereは、カメラを維持してオブジェクトを回転させることにより、別のソリューションです。