three.jsはブラウザ上で3次元のCGを表現することのできるJavaScriptライブラリで、WebGLやCanvasとの組み合わせが可能になっています。three.jsを使って遊んでみたので初歩的なことを書いておきます。

Three.jsの基礎

Three.jsに必須な6つのオブジェクト

Three.jsの主役になるのはレンダラ、シーン、カメラ、ジオメトリ、マテリアル、メッシュの6つ です。他にライト（光源）とかフォッグ（霧）とかもありますが、とにかくこの6つが必要不可欠です。それぞれの役割は次のようになっています。この役割をしっかり理解してください。
  • レンダラ 3Dの物体を描画する領域のことです。レンダラにシーンとカメラを渡して、「描画してね」っていう命令を出すと渡されたシーンをカメラの視点から描画してくれます。またレンダラ自身がHTMLのcanvas要素をもっていて、このcanvas要素をHTMLの中に追加することで初めて3D世界がブラウザ上に描画されることになります。その意味でHTMLとJavaScriptを繋ぐ橋渡しになります。

  • シーン 3D世界の舞台です。この中に3Dの物体や視点となるカメラを配置します。3Dの物体（メッシュ）を作成したらシーンに追加していきます。最終的にはカメラと一緒にレンダラに渡されて3D世界がブラウザ上に表示されます。

  • カメラ 3D世界の中の視点を与えます。カメラを動かすと視点が動くので3D世界の中で動き回ることができます。カメラには「透視投影カメラ」と「平行投影カメラ」の2つがあります。このカメラに映っているものが最終的にブラウザ上に表示されます。

    1. 透視投影カメラ 透視投影カメラというのは3次元の物体を見たとおりに2次元平面に描画するレンダリング手法です。透視投影カメラでは手前のものは大きく、奥にあるものは小さく映ります。いわゆる遠近法です。透視投影カメラでは画角やアスペクト比、手前のどこから、奥はどこまでを映すかの設定をします。

    2. 平行透視カメラ 平行透視カメラでは近くのものも遠くのものも同じ大きさで映ります。例えば透視投影カメラで正立方体を見ると歪んで見えますが、平行透視カメラだと歪みなく正立方体だと判断できるように映ります。平行透視カメラでは前後左右をどこまで視線に入れるか、手前のどこから、奥はどこまで映すかを設定します。

  • ジオメトリ 3Dの物体の形状です。どんな形をしているのか、例えば立方体であれば頂点の座標の情報などをジオメトリが担うことになります。

  • マテリアル 3Dの物体の材質です。物体の表面のことだと思って大丈夫です。その表面の色や材質などなどの情報を担うのがマテリアルです。メッシュには色々あって、中には光源がないと真っ暗になるものもあります。下のコードで使ってるのは光源を必要としないメッシュです。

  • メッシュ 形状であるジオメトリと材質であるマテリアルが合わさってメッシュになります。これが3Dの物体そのものになります。コードの中を見ると分かりますが、メッシュはジオメトリとマテリアルの2つを渡すことで作られます。作ったメッシュはシーンに追加することで3D世界の中に登場させることができます。

とりあえずなんか表示させてみる

説明はこれくらいにして、なんか表示させてみましょう。下のコードをindex.htmlとかって名前のファイルにコピペして保存してブラウザで開いてみてください。球体が表示されると思います。コードの中に説明が書いてあるので一体何をしているのかは中を読んでもらうのが早いと思います。

回転させてみる

表示させただけだと面白くありません。ということで回転させてみましょう。回転させるためには2つの方法があります。一つは球体そのものを回転させる方法です。物体を回転させるんだから回転します。当たり前です。もう一つは物体を固定したままでカメラを回転させる方法です。視点が変わるので「回転しているように見える」というわけです。シーンに追加するオブジェクトが多くなるとそれ全部を回転させるとなるとコードを書くのが大変ですが、カメラを回転させると数行で済みます。 ということでここではカメラを回転させてみましょう。ちなみにカメラを固定して球体自体を回転させるときは、camera.position.set の行と camera.lookAtの行をmesh.rotation.y = theta; に書き換えてやるとOKです。 このコードをコピーしてさっきのコードの renderer.render( scene, camera ); の後ろ、100行目に貼付けてください。下のような感じで回転すると思います。

コードの実行結果

参考ページ