2016-12-25 19 views
7

私は与えられた6人の顔が立っている立方体を、1つの面を移動可能な立方体のネットとして作ろうとしています。このようなもの:上記画像にthree.jsを使用してキューブを形成する折りたたみ矩形

enter image description here

、6面、一方の面(青1)があるが移動可能です。

「ネット」を形成するために、エッジを一緒に回転させることができます。 終了したら、「折りたたむ」ボタンを押すことができます。すべてのエッジが90度回転して立方体になります(青い面に適切な位置で接合していない場合は立方体にならない場合があります)。

以下は「折り畳み」ボタンを押した後の中間状態です。

enter image description here

顔が折り畳まれた後、それは次のようにする必要があります、対応するアニメーションが、ここで与えられている

enter image description here

を:http://www.mathematikus.de/10/

(何とかそのリンクは、Mac上で動作していません)

私はこれについてどうなるかわかりません。どんな助けもありがとうございます。

ありがとうございます。

+0

8?キューブには6つの顔があります:-) – 6502

答えて

8

オブジェクトの階層を使用できます。

var obj1 = new THREE.Mesh(...); 
var obj2 = new THREE.Mesh(...); 
obj1.add(obj2); 

exampleがあります。

私はこの原則を使用して、あなたの質問で与えられた立方体を折り畳むアニメーションを作った。もちろん、これは究極の解決策ではありません。これは単なる出発点です。

jsfiddle

UPD:私はフィドルを更新しました。 PressMeボタンをクリックすると、折り畳みを開始できます。 Tween.jsで作成されたアニメーション(foldTheCube()関数を参照)

+0

ありがとうございました。どのようにして青いサイドだけを可動/ドラッグ可能にすることができますか?いったん立方体が形成されると、もはやアニメーション化してはなりません。 – Artiga

+1

あなたのニーズに合っていれば、答えを受け入れてください。)オブジェクトの移動/ドラッグについては、[draggable cubes]の良い例があります(https://threejs.org/examples/webgl_interactive_draggablecubes.html) – prisoner849

+0

はい、間違いありません。 :)。私はDragControls.jsライブラリを配置し、イベントをside5に追加しようとしましたが、それはうまく動作しません。 – Artiga

関連する問題