質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

1回答

2787閲覧

three.jsで正20面体のパズルを作り、所々を回転できるようにしたいです。

snow

総合スコア54

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

3クリップ

投稿2016/05/06 05:51

編集2022/01/12 10:55

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面体があります。

こうしたらいいのではないか、などヒントになりそうなことでもいいので回答していただけると嬉しいです。

よろしくお願いします。

図1

objはそれぞれ20面、別々に読み込ませています。
この5面の1周する動作を全ての5面になる箇所に適用したいです。
5面で1周する箇所は12箇所かと思います。

どのようにグループ分けをするのか、そもそもグループにしないほうがいいのか、など悩んだのですが、なかなか解決策が思いつきませんでした。

追記 6月17日

20面体

Q,W,E,R,A,S,D,F,Z,X,C,V のキーに5面セット(12箇所)の回転が割り当てられています。
1つのキーを1〜4回押した後に、別の隣接する5面セットのキーを押すと、面がずれてしまいます。
1つのキーを5回押した後に、別の隣接する5面セットのキーを押すと、問題なく回ります。
コメントに気付くのが遅れ、申し訳ありませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ちょっとイメージがつきにくいのですが、
こういうものということでしょうか?
スターミンクス3
http://www.geocities.jp/wajishige/jspuzzle/DodecaV3/

もし可能であれば、(面倒とは思いますが)

  • どのようなものを作りたいのか
  • 現状ではどのようになってしまうのか

の図などを画像としてアップしていただけると、多分イメージしやすくなるかな…と思います。

投稿2016/05/07 14:07

編集2016/05/07 14:10
manabufukai

総合スコア700

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

snow

2016/05/07 23:39

画像とリンクを追加させていただきました。 回答ありがとうございます。
manabufukai

2016/05/14 16: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で定義したグループを回転 くらいの処理は必要になります。
snow

2016/06/16 15:13

本当にすみません。コメントしていただけているのに今、気付きました。 「常に5面を1セットとして、あらゆるセットを回転できる」 正にその通りの回転を実現したいです。 実はあれから色々と調べ、クォータニオンとレイキャスターを使って、 上記の回転に近いものはできました。 しかし、完全な仕上がりではなく、 押すキーの順番によって面がずれる状態です。 質問の方に、そのリンクを追加しておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問