JavaScriptで書く3次元表現 [Edit]

投稿者：野中 文雄 | 投稿日：2014.02.17 | [CreateJS][HTML5][野中ゼミ]

JavaScriptで3次元空間を表現するには、いくつかのやり方があります。そうした解説の中でとくに初心者向けの記事をご紹介します。

01 CreateJSでがんばる

アニメーションやインタラクティブなコンテンツで、CreateJSは注目を集めています。けれど、CreateJSそのものには、3次元空間を扱う機能はありません。それでも、2次元平面の変換行列を備えていますので、3次元空間の扱いにも応用できます。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」では、第20回から3回にわたってつぎのようなサンプルについて解説しています。

サンプル001■EaselJS 0.7.1: Rotating a Cube around the X and Y axes

3次元座標を扱うために、簡単なクラスとはいえ自力でつくらなければなりません。その分、後にご紹介する3次元のライブラリを使うより、どうしても行数は多めです。また、光や陰影の表現まで含めるのは難しいでしょう。

02 Away3Dに期待する

Flashで使われている3DエンジンAway3Dが、「Away3D Typescript」としてJavaScriptへの移行が進められ、現在アルファリリースとして公開されています。正規リリースはこれからとはいえ、期待されるライブラリです。

「Away3D: 立方体を回してみる」では、ごく簡単なJavaScriptコードの作例を詳しく解説しました。40行弱のコードで、3次元空間につぎのように立方体をつくって回しています。また、ICS LABで「簡単なJSで始めるWebGL対応Away3Dチュートリアル」という連載が始まっています。

サンプル002■Away3D: Rotating a cube in the 3D space

03 人気のthree.jsを使う

これまでのJavaScriptライブラリで、3次元表現によく使われてきたのがthree.jsです。技術情報も比較的多いでしょう。最近HTML5Experts.jpに「初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞」という記事が公開されました。題名のとおり、わかりやすい解説です。また、これもお約束どおり、立方体が多めに回っています。

サンプル003■forked: 2014-02-06 1st

その他の記事