「three.js」とは
今回の「three.js」の記事は、執筆時点の最新版であるRevision58を元にして書いています。「three.js」はこの1年で改定が大きく進み、その間でいくつかの仕様が変更になっています。Web上の記事などを参考にプログラムを書く際は、最新のドキュメントを確認しながら書いた方がよいです。記事中のコードで使用されている関数が削除されていたり、別名になっていたり、仕様が変わっていたりします。
「three.js」のドキュメントは、Web上から確認可能です。各項目は、末尾に「Source」というソースコードへのリンクが掲載されています。ドキュメントを見てもよく分からない場合は、このコードを直接見るとよいです。どういった処理が行われているか、どの値がどういった用途で利用されているかが分かります。
また、「three.js」のファイルをダウンロードすると、豊富なサンプルが収録されています。ほとんどの処理は、このサンプルを閲覧して真似すれば作ることができます。ただ、コードは割とリッチなので、本当に簡単なことをしたい場合に、処理を探すのが大変だったりします。この記事では、なるべく分かりやすいようにコードを示していきたいと思います。
「three.js」の本体は、ダウンロードして解凍したフォルダの「build/three.js」に格納されています。また、このファイルには、ミニマイズ化した「build/three.min.js」もあります。デバッグ時は「three.js」を利用して、リリース時には「three.min.js」を使用するとよいでしょう。
- three.js（ライブラリを入手）
- three.js - documentation（ドキュメント）
「three.js」を利用したり、サンプルを利用する際には注意が必要です。ブラウザのセキュリティ制限から、ローカル環境ではテクスチャなどの画像を読み込むことができません。作成したファイルやサンプルは、サーバー上にアップロードして確認するか、ローカル サーバーを立ててブラウザに読み込ませる必要があります。
ローカルでサーバーを実行するには「HTTP Server Anywhere」が便利です。「server.jar」をダブルクリックするだけで、そのフォルダをルートとしたサーバーが起動して、「http://127.0.0.1/（目的のファイル）」でファイルにアクセスできるようになります。
記事の構成
本連載では、以下の内容を、コードを示しながら解説していき、最後にマンガのコマとして、すべてのプログラムを統合したサンプルを作成します。
また、サンプルはテクスチャを読み込む関係上、ローカルでは動作しません。そこで、サーバー上にもサンプルをアップロードしておきました。どういった内容か、以下からご確認ください。
| 内容 | ページ |
| シーンとカメラとレンダラーの準備 | 3ページ |
| 立方体の表示 | 4ページ |
| 色付き板ポリゴンの表示 | 5ページ |
| 画像をテクスチャとして読み込み1 | 5ページ |
| 画像をテクスチャとして読み込み2 | 6ページ |
| Canvasをテクスチャとして読み込み | 6ページ |
| 内容 | ページ |
| マウスによる移動、回転、拡縮操作 | 2ページ |
| レイキャスターを利用した選択と移動1 | 3ページ |
| レイキャスターを利用した選択と移動2 | 4ページ |
| クォータニオンによる回転 | 5ページ |
| 内容 | ページ |
| 集中線の表示 | 1ページ |
| フキダシの表示 | 2ページ |
| 箱人形の表示 | 3ページ |
| WebGLからPNGを出力 | 4ページ |
| まとめ | 4～5ページ |
それでは、コードを示して解説していきます。
