スタートページ＞ Javascript＞ CANVAS＞ WebGL

WebGL Three.js 　光源と影

立方体と球体に光をあてて、光の当たる面と影の面を表示します。
点光源（Point）とスポットライト（Spot）では、他の物体の影も表示します。
（現在、床への影が表示されません。あるいは原点に小さな影点があるのかもしれません）

光源の種類と特徴

環境光源　　THREE.AmbientLight(色, 光の強さ)
　　空間全体を均一の明るさにします。光源の位置は指定しません。
　　これを指定しないと、全てが黒くなるので何も見えません。
　　指定してもすべてが同じ色になるので、物体の輪郭が見えるだけです。
　　他の光源と合わせて使用するのが通常です。
平行光源　　THREE.DirectionalLight(色, 光の強さ)
　　light.position.set(x,y,z);　により光源位置（厳密には光源方向）を与える必要があります。
　　軸に平行になるので、太陽光線のように無限遠点からの光になります。
点光源　　　THREE.PointLight(色, 光の強さ, 到達距離, 光の減衰率)
　　light.position.set(x,y,z);　に光源があり、全方向に到達距離までの光を出します。
　　物体が移動すると、光源との向きにより明るい面が変化します。
スポットライト　THREE.SpotLight(色, 光の強さ, 到達距離, 照射角, ボケ具合, 減衰率)
　　light.position.set(x,y,z);　にある光源から原点に向かって、照射角の光線を出します。
　　これ以外にも非常に多くのパラメタ指定ができます。

光源定義の記述方法

光源をシーンに追加するための一般形は、次のようになります。
　　var light = new THREE.SpotLight(光の色, 光の強度);
　　light.distance = 1000; // 追加パラメタ（光の到達処理）　光源の種類によりパラメタは異なります
　　　　：
　　light.position.set(x, y, z);　// 光源の位置
　　scene.add(light);　　　// シーンへの追加
パラメタは豊富なので、色と強さは ( ) 内に記述し、それ以外は上の追加パラメタの形式にするのが適切です。
　色は 0xffffff の形式（""で囲まない）が標準ですが、"white" なども使えます。
　強度は１を基準とて、強くするには２，３などとします。
影を扱うには、次の追加パラメタを加えます。点光源（Point）とスポットライト（Spot）で有効です。
　　light.castShadow = true;

影を表示するための追加記述

レンダラー
　　renderer.setSize(400, 400);
　　renderer.shadowMap.enabled = true;
オブジェクト
　MeshBasicMaterial と MeshNormalMaterial は、面をベタ塗りするので、光の影響を受けず不適切です。
　MeshLambertMaterial は、木材やコンクリートなどのように、細かい光の変化には対応しません。
　MeshPhongMaterial は、鏡面のように光の変化に敏感です。
　　var box = new THREE.Mesh(geometry, material);
　　box.castShadow = true;　　　 // この物体が影を発生する
　　box.receiveShadow = true;　　// 他の物体からの影を受ける
　　scene.add(box);
光源（上述）