初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

1章初めての3Dシーン作成

モダンブラウザは進化を続け、JavaScrptを通じて直接アクセスできる機能も次第に強力になってきています。HTML5で新しく登場したタグを使用すれば動画や音声を簡単に追加でき、canvas要素を使用するとインタラクティブな画面要素も簡単に作成できます。HTML5とともに、モダンブラウザはWebGLのサポートも開始しました。WebGLを使用することで、グラフィックスカードの処理能力を直接利用して、高性能な2D／3Dコンピューターグラフィックスを作成できます。しかし、JavaScriptから直接WebGLを使用してプログラミングし、3Dシーンを作成してアニメーションさせるのは非常に複雑で間違いを起こしやすい作業です。本書で紹介するThree.jsというライブラリはこの作業を大幅に簡単にしてくれます。Three.jsを使用することで容易になる作業の一部を以下に示します。

• 単純あるいは複雑な3D形状の作成
• 3Dシーン上のオブジェクトのアニメーションや移動
• オブジェクトへのテクスチャやマテリアルの適用
• シーンを照らすさまざまな光源の利用
• 3Dモデリングソフトウェアからのオブジェクトの読み込み
• 3Dシーンへの高度なポストプロセッシング効果の追加
• 独自に作成したカスタムシェーダーの使用
• ポイントクラウドの作成

図1-1のように、数行のJavaScriptで単純な3Dモデルからフォトリアリスティックなリアルタイムシーンまであらゆるものが作成できます（http://www.vill.ee/eye/をブラウザで開けば実際に見ることができます）。

図1-1　Three.jsを使用した3Dシーン

この章ではThree.jsの世界に飛び込み、初めてのサンプルを作成します。その中にはThree.jsがどのように動作するかを示すためだけのものもあれば、実際に遊ぶことができるものもあります。まだここでは技術的な詳細のすべてに触れることはありません。それはこの先に続くいくつかの章で学ぶことです。この章で触れられる内容は以下のようなものです。 ...