Three.jsのライトの種類

Three.jsのライトについていくつか試してみます。

サンプルコード

全体のコードは以下の通りです。

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// ライトの作成
// ここに追加

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);

// カメラの位置変更と更新
camera.position.set(200, 100, 200);
controls.update();

// オブジェクトの作成
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshStandardMaterial();
const object = new THREE.Mesh(geometry, material);
scene.add(object);

function animate() {
	renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

ここにいくつかのライトを追加して、動作を試してみます。

AmbientLight

AmbientLightはすべてのオブジェクトを全体的に均等に照らします。
引数の1つ目は色、2つ目はライトの強さになります。

// ライトの作成
const light = new THREE.AmbientLight("red", 1);
scene.add(light);

オブジェクト全体に均等にライトが適用されました。
AmbientLightのデモページ

2つ目の引数のライトの強さを変更してみます。

// ライトの作成
const light = new THREE.AmbientLight("red", 3);
scene.add(light);

先ほどと比べて、ライトの光が強くなりました。
AmbientLightのデモページ2

DirectionalLight

DirectionalLightは太陽光に似た光源で、距離を問わず光源から特定の方向に均一に光を放射します。
引数は先ほどと同じで、1つ目は色、2つ目はライトの強さになります。

// ライトの作成
const light = new THREE.DirectionalLight("red", 1);
light.position.set(200, 100, 200);
scene.add(light);

これで光源からみてライトの当たる範囲には光が適用されますが、裏側のライトの当たらない範囲は暗いままになります。
DirectionalLightのデモページ

HemisphereLight

HemisphereLightは上(天頂)からと下(地面)からの光を照射します。
引数の1つ目は上の色、2つ目は下の色、3つ目はライトの強さになります。

照射状態が分かりやすいように、オブジェクトを球体に変更して試してみます。

// ライトの作成
const light = new THREE.HemisphereLight("red", "blue", 1);
scene.add(light);
～略～
// オブジェクトの作成
const geometry = new THREE.SphereGeometry(100);

上からは赤、下からは青の光を照射して、徐々にグラデーションがかって表示されます。
HemisphereLightのデモページ

PointLight

PointLightは裸電球のように、一点から全方向に光を放射します。
引数の1つ目は色、2つ目はライトの強さ、3つ目はライトの最大範囲、4つ目は距離に応じて暗くなる量になります。

光源の位置が分かりにくいため、ヘルパーも合わせて表示して試してみます。

// ライトの作成
const light = new THREE.PointLight("red", 400);
light.position.set(60, 80, 80);
scene.add(light);
const lightHelper = new THREE.PointLightHelper(light, 5);
scene.add(lightHelper);

PointLightのデモページ

RectAreaLight

RectAreaLightは四角の光源で、平面の面全体に均一に光を放射します。
引数の1つ目は色、2つ目はライトの強さ、3つ目はライトの幅、4つ目はライトの高さになります。

こちらもヘルパーを使って光源の位置を表示しますが、アドオンでの追加が必要になります。

～略～
import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
～略～
// ライトの作成
const light = new THREE.RectAreaLight("red", 10, 50, 100);
light.position.set(40, 60, 120);
scene.add(light);
const lightHelper = new RectAreaLightHelper(light);
scene.add(lightHelper);

RectAreaLightのデモページ

SpotLight

SpotLightは一点から一方向に光を放射して、光源から遠ざかる程照射範囲が広くなります。
引数は6つあり、1つ目は色、2つ目はライトの強さになります。

ヘルパーを使って光源の位置を表示して試してみます。

// ライトの作成
const light = new THREE.SpotLight("red", 600);
light.position.set(80, 80, 120);
scene.add(light);
const lightHelper = new THREE.SpotLightHelper(light);
scene.add(lightHelper);

SpotLightのデモページ