three.jsで正20面体のパズル（四角でいうところのルービックキューブ） 1つの頂点を中心とした隣り合う5面を連動して回せるようにしたいです。
20面をA面～T面として(A,B,C,D,E)の5面はrotationなどで回せるのですが、その5面を回してしまうと(E,A,B,C,D)と面がずれてしまいます。
ずれた状態でA面～E面のどれかを含む、別の5面を回すと回転方向がおかしくなります。
1つの5面をグループにしてしまうと、別の5面グループを回した時に、前回の回転の影響が残ります。
これの影響を出ないようにパズルを作りたいです。
正20面体は、obj形式のモデル verticesを結んでできている20面体があります。
こうしたらいいのではないか、などヒントになりそうなことでもいいので回答していただけると嬉しいです。
よろしくお願いします。
objはそれぞれ20面、別々に読み込ませています。
この5面の1周する動作を全ての5面になる箇所に適用したいです。
5面で1周する箇所は12箇所かと思います。
どのようにグループ分けをするのか、そもそもグループにしないほうがいいのか、など悩んだのですが、なかなか解決策が思いつきませんでした。
追記 6月17日
Q,W,E,R,A,S,D,F,Z,X,C,V のキーに5面セット(12箇所)の回転が割り当てられています。
1つのキーを1〜4回押した後に、別の隣接する5面セットのキーを押すと、面がずれてしまいます。
1つのキーを5回押した後に、別の隣接する5面セットのキーを押すと、問題なく回ります。
コメントに気付くのが遅れ、申し訳ありませんでした。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+2
ちょっとイメージがつきにくいのですが、
こういうものということでしょうか？
スターミンクス3
http://www.geocities.jp/wajishige/jspuzzle/DodecaV3/
もし可能であれば、（面倒とは思いますが）
- どのようなものを作りたいのか
- 現状ではどのようになってしまうのか
の図などを画像としてアップしていただけると、多分イメージしやすくなるかな…と思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/08 08:39
回答ありがとうございます。
2016/05/15 01:44
> この5面の1周する動作を全ての5面になる箇所に適用したいです。
この「全ての5面になる箇所」とはどこですか？
現在はA〜Eの5つの面が1グループになり、この1グループのみx軸方向の回転を行うようになっていますが、これを12箇所？
例えば
・E,Aの下部に位置する水色、赤味の強いオレンジ、淡いオレンジの面もグループになって（正面から見て）y軸方向にも回転できるようにということですか？
（※常に5面を1セットとして、あらゆるセットを回転できる）
上記のように回転させたい場合、rotation（オイラー角）での回転ではなく
クォーターニン（THREE.Quaternion()）を使うほうがいいんじゃないかなと思います。
※Quaternion
http://threejs.org/docs/#Reference/Math/Quaternion
どちらにせよ、回転ごとにグルーピングをしなければならない場合
1.最初からグルーピングするのではなく、それぞれを座標配置
2.配置用の関数とグルーピングする関数、回転用関数、初期化用関数は分ける
3.どのグループを回転させるか判定（キーによってなのか、クリックした場所なのかは自由にすればよいです）
4.グループの再定義（3の判定後に配列やオブジェクトなどにまとめ、回転させるグループを都度定義→そのグループによって回転方向x,y,zを判定）
5.4で定義したグループを回転
くらいの処理は必要になります。
2016/06/17 00:13
「常に５面を１セットとして、あらゆるセットを回転できる」
正にその通りの回転を実現したいです。
実はあれから色々と調べ、クォータニオンとレイキャスターを使って、
上記の回転に近いものはできました。
しかし、完全な仕上がりではなく、
押すキーの順番によって面がずれる状態です。
質問の方に、そのリンクを追加しておきます。