「3Dって何となく難しそうで手を出しづらいなー」と少し敬遠していたけど、ブラウザ上とかでサクサク動いているのを見てるとやっぱり自分もやってみたい。 というわけで今回はWebブラウザ上で JSベースでぬるぬる動く3Dグラフィックスを実現できる「Three.js」をいじってみた。 Q. JSベースとはいってもなんか複雑そうで手を出しづらいんだけど… 結論から言えば、基本的な流れを理解してしまえばなんとなくいじれるようになった。 この「基本的な流れ」って言うのは、Canvasで言うなら「クロスブラウザのチェックをして、canvas要素取得して、コンテキストを変数に格納して…」みたいな感じ。Three.jsの場合は以下に説明するような流れになる。 Three.js で3Dをいじるまでの基本的な5つの流れ Three.js で流れを組んでいて感じたのが「あれ?これ、何か映画の撮影みたい…」ということ