javascript - ルービックキューブを描くための3Dの基礎

Question

パースペクティブを使用して html キャンバス要素にルービック キューブを描画したいのですが、3D グラフィックスやパースペクティブなどの経験がないため、これを達成するために役立つリソースをすべて探しています。私が見つけた唯一の役立つリンクは、このデモ用です:

http://oos.moxiecode.com/js_canvas/3d_cube/index.html

Answer 1

確かに、webGL または 3-d JavaScript ライブラリを使用してキャンバスで 3-d モデルを作成できますが、ルービックス キューブを作成する場合は、代わりに CSS3 変換と変換を個人的に使用します (約束しますが、それははるかに少ないコードになります)。 . これをチェックすると、インスピレーションが得られます：

http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

このデモでは線形回転を使用していますが、イーズ イン アウト回転を使用すると、回転がより自然に見えます。

Answer 2

ちょっと前にこれ書いた

http://www.pascarello.com/canvas/rubikscube/

色を混ぜ始めると問題が発生しますが、コードをいじることはできます。