r84three.jsは、WebGLを使って3次元の表現ができる無償のJavaScriptライブラリです。本稿では、短いコードで3次元空間に立方体をつくって、回してみます。使ったプロパティやメソッドには、できるだけ公式ドキュメントへのリンクを加えました。theree.jsライブラリを使うライブラリはthree.jsサイトのリンク[download]で、ZIPファイルがローカルに保存できます(図001)。buildフォルダの中に、開発用のthree.jsと公開用のthree.min.jsが納められていますので、用途に応じていずれかをお使いください。図001■three.jsサイトの[download]のリンクCDNも公開されていますので、本稿ではこちらを使うことにします。シーンとカメラを定める3次元空間であるシーンは、コンストラクタTHREE.Scene()でつくります。シーンの中に3次元のオブジェクトや光源、それらを映しだすためのカメラが加えられます。カメラを定めるのはコンストラクタTHREE.PerspectiveCamera()です。引数はつぎの4つを渡します(図002)。CG制作者のための画角講座」参照)。画面の縦横比は幅/高さです。奥行きに対して撮影する範囲の始まりと終わりを与えます。シーンとカメラはつぎのように定め、カメラのz軸方向の位置はObject3D.positionプロパティで少し下げました(デフォルト値0)。JavaScriptコードから<body>要素を参照することになるので、<script>要素は<body>の中に置いてください。レンダラーで<canvas>要素をつくってページに加えるカメラの映したシーンを描くのがレンダラーです。コンストラクタTHREE.WebGLRenderer()で<canvas>要素をつくります。幅と高さはWebGLRenderer.setSize()メソッドで決めます(デフォルト値300×150ピクセル)。<canvas>要素はページに加えなければなりません。WebGLRenderer.domElementプロパティで参照できるので、<body>要素に差し込みました。これらの処理は関数(createRenderer())として定め、戻り値のレンダラーは変数に納めます(renderer)。立方体をつくってシーンに加える立体はMeshクラスのオブジェクトとしてつくります。メッシュには、かたちの幾何学情報となるジオメトリーと素材のマテリアルを与えなければなりません。直方体のジオメトリーをつくるのは、THREE.BoxGeometry()メソッドです。幅と高さと奥行きを引数に渡します。THREE.MeshNormalMaterial()でつくる素材は少し変わっていて、面の向きによって色が決まるのです。でき上がったジオメトリー(geometry)とマテリアル(material)のオブジェクトは、コンストラクタTHREE.Mesh()の引数にします。して関数(createCube())から返された立方体(cube)は、Object3D.add()メソッドでシーンに加えてください。cube;}カメラ(camera)で映したシーン(scene)の画像は、レンダラー(renderer)で<canvas>要素に描きます。そのために呼び出すのは、WebGLRenderer.render()メソッドです。引数にはシーンとカメラを渡します。これで、3次元空間に立方体が描かれます(図003)。ここまでのスクリプトは以下のコード001にまとめました。立方体をアニメーションで回す3次元空間に立方体を描いたといっても、正面向きでは立体かどうかわかりません。オブジェクトはObject3D.rotationプロパティで軸を決めて回すことができます(角度はラジアン)。アニメーションで回しましょう。アニメーションの関数(update())を定めてwindow.requestAnimationFrame()メソッドに渡せば、画面が描き替わるたびに呼び出されてアニメーションとして動かせるのです(図004)。3次元空間を描きなおすWebGLRenderer.render()メソッドの呼び出しを忘れないようにしてください。スクリプトは以下のコード002にまとめ、サンプル001はjsdo.itに公開しました。