r85「three.js入門」01「3次元空間で立方体を回す」と02「フォンマテリアルとライトを使う」は、よく使われる立方体でアニメーションをつくりました。基本的(primitive)な立体の形状はほかにもあります。かたちを決める幾何学的な情報がジオメトリーです。本稿は基本的なジオメトリーのいくつかをご紹介します。立方体を回すサンプルコード「three.js入門」01のコード002「3次元空間につくった立方体をアニメーションで回す」が短くてわかりやすいので、これを書き替えるかたちで進めます。その前に、少しだけ手直ししておきましょう。three.jsのライブラリはr85が公開されたので、差し替えます。Guide」を見るかぎり、大きな変更はなさそうです。02」03「JavaScriptコードを<head>要素に移す」参照)。最後に、変数と関数の名前です。立方体以外も試しますので、誤解されないように名前を変えました(meshとcreateMesh())。これから試すもととなる立方体を回すスクリプトは、以下のコード001のとおりです(図001)。jsdo.itにサンプル001として掲げました。立体(メッシュ)の幾何学情報がジオメトリーです。その基本的な要素をたしかめましょう。つぎの3つです(図002)。頂点同士を直線で結び合うことによって立体がかたちづくられる。ふたつの頂点を結ぶ直線。辺によって立体のかたちが決まる。3つの辺でつくられる表面の最小単位。ポリゴンともよばれる。立体の表面をつくるポリゴンの数は変えられます。直方体をつくるBoxGeometryのコンストラクタでは、第4から第6引数で各辺を何分割するかというセグメント数が与えられます(デフォルト値1)。平面のままかたちを変えないなら、細かく分ける意味はありません。曲面を表す場合には、数を増やすほど滑らかに見えます。平面をつくる直方体よりもさらに面の少ない平面をつくるのはPlaneGeometry()コンストラクタです。引数には幅と高さを渡します。高さ)前掲コード001の立体をつくる関数(createMesh())は、つぎのように書き替えます。受け取る引数はふたつですので、呼び出し側も引数の数を減らします。アニメーションはそのまま、3次元空間で平面が回ります(図003)。直したコード行数は少ないですからまとめて示すことはせず、jsdo.itに以下のサンプル002を掲げます。正二十面体をつくる面の多い立体としては、正二十面体がIcosahedronGeometry()コンストラクタでつくれます。引数は中心から頂点までの半径です。THREE.IcosahedronGeometry(半径)前掲のコードをつぎのように書き替えれば、3次元空間につくられた正二十面体が回ります(図003)。以下のサンプル003がjsdo.itに掲げたコードです。面の数がもう少し少ない正八面体のOctahedronGeometryや球面のSphereGeometryも、基本的に同じようにつくれます。これらも、それぞれサンプル004と005としてjsdo.itに加えました。球面も厳密にはポリゴンの三角形で組み立てられます。立方体の頂点座標を動かす基本的なジオメトリーでつくった立体であっても、頂点の座標はあとから変えられます。前掲コード001の立方体で試してみましょう。立体のMesh.geometryプロパティでGeometryオブジェクトが参照できます。頂点座標のオブジェクトを納める配列がGeometry.verticesです。配列から取り出したオブジェクトのxyz座標を、つぎの関数(randomizeVertices())でランダムな位置にずらします。すると、立方体のかたちが歪むのです(図005)。