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