Three.jsにはさまざまなライトが用意されています。
初心者のうちはたくさんの種類があってどれを使うべきか迷いどころです。はじめのうちは、パラメーターの少ないAmbientLightやDirectionalLightを使い、慣れてきたらPointLightやSpotLightを使って表現を高めていくのがいいでしょう。
環境光源
AmbientLightクラスは環境光源を実現するクラスです。3D空間全体に均等に光を当てます。一律に明るくしたいときに使うといいでしょう。陰影や影(cast shadow)ができないので、この光源だけだと立体感を表現することはできません。たいてい、他のライトと一緒に利用します。
// 環境光源を作成
// new THREE.AmbientLight(色, 光の強さ)
const light = new THREE.AmbientLight(0xFFFFFF, 1.0);
scene.add(light);
詳しい仕様は公式ドキュメント「AmbientLight」を参照ください。
平行光源
DirectionalLightクラスは特定の方向に放射される光。光源は無限に離れているものとして、そこから発生する光線はすべて平行になります。わかりやすい利用例としては、太陽の光です。太陽は地球から遠く離れているので、その位置は無限であるとみなすことができます。太陽から地表に降り注ぐ光線は平行となります。
// 平行光源を作成
// new THREE.DirectionalLight(色, 光の強さ)
const light = new THREE.DirectionalLight(0xFFFFFF, 1);
scene.add(light);
詳しい仕様は公式ドキュメント「DirectionalLight」を参照ください。
半球光源
HemisphereLightクラスはAmbientLightクラスに似ていますが、上からの光の色と下からの光の色を分けられます。下からの光は反射光として、屋外での光の見え方に近くなります。
// 半球光源を作成
// new THREE.HemisphereLight(空の色, 地の色, 光の強さ)
const light = new THREE.HemisphereLight(0x888888, 0x0000FF, 1.0);
scene.add(light);
詳しい仕様は公式ドキュメント「HemisphereLight」を参照ください。
点光源
PointLightクラスは単一点からあらゆる方向から放射される光源です。わかりやすい例としては、裸電球です。裸電球は周辺を明るくします。
// 点光源を作成
// new THREE.PointLight(色, 光の強さ, 距離, 光の減衰率)
const light = new THREE.PointLight(0xFFFFFF, 2, 50, 1.0);
scene.add(light);
詳しい仕様は公式ドキュメント「PointLight」を参照ください。
スポットライト光源
SpotLightクラスは、単一の点から一方向に放出され、円錐に沿って放出される光源です。わかりやすい例としては懐中電灯や、ステージのスポットライトを想像するといいでしょう。減衰率や光の方向の指定ができるので、指定できるパラメーターも多いです。たくさん配置すれば立体感・臨場感が生まれます。
// スポットライト光源を作成
// new THREE.SpotLight(色, 光の強さ, 距離, 照射角, ボケ具合, 減衰率)
const light = new THREE.SpotLight(0xFFFFFF, 4, 30, Math.PI / 4, 10, 0.5);
scene.add(light);
詳しい仕様は公式ドキュメント「SpotLight」を参照ください。パラメーターを試せるデモが掲載されてるので、これを使うとイメージしやすいでしょう。
たとえば、exponentプロパティーの値を変更すると次のように光源が変化します。境界がもやっとした感じに調整できます。
コラム：ヘルパークラスの利用
ヘルパークラスであるTHREE.SpotLightHelperクラスを使えば、スポットライトの照らしている範囲をワイヤーフレームで可視化できます。
スポットライトはパラメーターが難しいので、ヘルパークラスを利用してシミュレートするといいでしょう。使い方は次のようなコードで実現します。
// スポットライト光源を作成
const light = new THREE.SpotLight(0xFFFFFF, 4, 30, Math.PI / 6, 0, 0.5);
scene.add(light);
// ヘルパーを作成
const lightHelper = new THREE.SpotLightHelper(light);
scene.add(lightHelper);
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
// レンダリング
renderer.render(scene, camera);
// ヘルパーを更新
lightHelper.update();
requestAnimationFrame(tick);
}
矩形光源
RectAreaLightクラスは、面を横切って矩形平面に均一に放出される光源です。明るい窓やストリップ照明のようなものをシミュレートするために使用できます。
// 矩形光源を作成
// new THREE.RectAreaLight(色, 光の強さ, 幅, 高さ)
const light = new THREE.RectAreaLight(0xFFFFFF, 5.0, 10, 10);
scene.add(light);
詳しい仕様は公式ドキュメント「RectAreaLight」を参照ください。
この光源に関してはRectAreaLightUniformsLib.jsを組み込むと、美しい表示結果が得られます。