3次元空間で立方体を回す」は、できるだけ少ないコードで3次元空間に立方体をつくって、アニメーションで回しました。本稿はこのコード002「3次元空間につくった立方体をアニメーションで回す」に手を加えます。立方体のマテリアルを差し替え、シーンにライトを置きましょう。01」のコード002では、立方体のマテリアルとしてMeshNormalMaterialのオブジェクトを与えていました。これをフォンマテリアルのMeshPhongMaterial()コンストラクタで差し替えます。引数は、プロパティとその値を納めたオブジェクトです。ここでは、colorプロパティで色を定めることにしましょう。この値は関数(createCube())に引数(color)として加えました。cube;}ここでコードを実行すると、立方体が見えません。MeshNormalMaterialのオブジェクトは少し変わっていて、カラーを発色しました。普通のマテリアルは光を当てなければ、暗闇に紛れてしまうのです。シーンにライトを加えるシーンにライトを加えましょう。光を放つ光源にはいくつかの種類があります(Wikipedia「3次元コンピュータグラフィックス」の「ライティング(照光、Lighting)」参照)。light)です(図001)。拡散することなく平行に進み、距離によって弱まることがありません。平行光源のコンストラクタDirectionalLight()には、第1引数に色が渡せます(デフォルト値0xFFFFFF)。ライトのオブジェクトのObject3D.positionプロパティを参照して、Vector3.set()メソッドで3次元空間の位置が決められます。関数から返されたオブジェクトは、変数(light)に納めたうえで、シーン(scene)に加えました。これで、青い立方体がライトに照らされて回ります(図002)。01」のコード002は、<script>要素を<body>要素の中に置きました。コードから<body>要素を参照したためです。<head>要素に含めたほうが管理はしやすいでしょう。イベントリスナーを使えば、DOMが参照できるまで待てます。HTMLドキュメントの読み込みと解析を終えたとき起こるイベントがDOMContentLoadedです(「DOMContentLoaded周りの処理を詳しく調べてみました」参照)。つぎのように初期化の関数(init())を定めて、イベントリスナーに加えます。これで、JavaScriptコードは<head>要素に移せます。init);書き改めたスクリプトは、つぎのコード001にまとめました。合わせて、サンプル001をjsdo.itに掲げておきます。