CodePen + Three.js でルービックキューブ（モドキ）つくってみた

3D描画するだけならThree.jsでかなり簡単にできる。(参考サイト 1. 参照)

つくってみた

今回、ルービックキューブっぽくするために箱を複数(8個)使っている。
箱を回転させるのはrotation.x,y,zを指定するだけだが、箱の位置も回転させないといけないため、cos,sinで自力で回転させている。
操作できるUIは今回実装してないので、見るだけのルービックキューブです。

※JavaScriptについては、わたしはほぼ素人です。テキトウにコード書いているのであまりマネしないようにおねがいします。

See the Pen DrawCubeUsingThreeJs by kob58im (@kob58im) on CodePen.

カメラの視点をマウスで操作する

ドラッグすると視点を移動します。参考サイト.4 参照。

See the Pen CameraPosChangeSampleUsingThreeJs by kob58im (@kob58im) on CodePen.

もともとやろうとしていたこと

11か月の時を経て、できるようになってました。
全自動ルービックキューブ（大嘘）つくってみた - Qiita

参考サイト

1. WebGL、three.jsでワクワクしてみた
2. Three.jsのさまざまなマテリアル
3. Three.jsのBoxGeometryでそれぞれの面に別々の色を指定する方法
4. Three.jsのカメラの制御 - ICS MEDIA