[Three.js] さまざまなライトを知る

profile image

Three.jsが提供する様々な照明タイプ(AmbientLight、DirectionalLight、PointLight、SpotLight、HemisphereLight、RectAreaLight)の特徴と活用法を例題と一緒に見てみました。

Three.js

この記事は DeepL によって翻訳されました。誤訳があれば教えてください！

Three.js照明の基本コンセプト

照明は、3Dで臨場感と立体感を与える非常に重要な要素です。Three.jsで照明はTHREE.Lightのサブクラスとして実装され、すべての照明オブジェクトは位置、色、強度などの基本的な属性を持ちます。Three.jsでは様々な照明を提供していますが、その種類を一つずつ説明します。

🫢 すべてのMaterialで照明をサポートしているわけではありません。 代表的にMeshPhongMaterial とMeshStandardMaterial で照明を使うことができます。

AmbientLight（アンビエントライト

AmbientLightは、特定の方向がなく、シーン全体を均一に照らす基本的な照明です。影を生成せず、一般的に他の照明と一緒に使用し、暗すぎる場合に明るくする目的で活用されます。 照明の色と強度を引数として受け取ります。

ts
const ambientLight = new THREE.AmbientLight(ambientColor, ambientIntensity);
scene.add(ambientLight);
AmbientLight 데모
#ffffff

DirectionalLight

DirectionalLightは、太陽光のようにすべての光が同じ方向に平行に照射される照明です。遠くの強い光源(通常は太陽)をシミュレートするのに適しており、明確な影を作ることができます。

DirectionalLightの方向設定は他のライトとは少し異なります。一般的な光源(例えば、PointLight)は回転(rotation)で方向を設定できますが、DirectionalLightは光源の位置(position)からターゲット(target)方向に光が移動します。

  • つまり、回転値を変更しても光源の方向には影響しません。照明が太陽だと考えると分かりやすい。
  • 光の方向を変えるには、ターゲットの位置を変更する必要があります。
javascript
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;

// 그림자 설정
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
directionalLight.shadow.camera.left = -10;
directionalLight.shadow.camera.right = 10;
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.camera.bottom = -10;

scene.add(directionalLight);
DirectionalLight 데모
#ffffff

PointLight

PointLightは、電球のように一点からすべての方向に光を発する照明です。距離(distance)に応じて光の強度が減少し、減衰率(decay)で距離に応じた光の強さの減少率を調節可能。 また、複数のPointLightを配置して複雑な照明環境構成も可能。室内照明のような効果を出すのに便利です。

ts
const pointLight = new THREE.PointLight(0xff0000, 1, 100); // 색상, 강도, 최대 거리
pointLight.position.set(10, 5, 5);
pointLight.castShadow = true;
scene.add(pointLight);
PointLight 데모
#ff9900

SpotLight

スポットライトは、一点から円錐状に広がる照明です。DirectionalLightと同様に、SpotLightは光が向くターゲットを設定することができます。舞台照明や懐中電灯のような効果を作り出すことができる。

ts
const light = new THREE.SpotLight(0xffffff, 1);
light.position.set(5, 10, 5); // 광원의 위치 설정
light.target.position.set(0, 0, 0); // 타겟의 위치 설정
scene.add(light);
scene.add(light.target);
SpotLight 데모
#ffffff

HemisphereLight

HemisphereLigthは、空色と地面色の2つの色を混ぜてシーンを照らす**双方向照明です。**光が特定の方向からしか来ない他のライト(DirectionalLight, SpotLight)とは異なり、**周囲全体にわたって柔らかな照明を提供します。**自然光をシミュレートするのに便利です。

ts
const light = new THREE.HemisphereLight(0x4488ff, 0x222222, 1);
HemisphereLight 데모
#87CEEB
#8B4513

RectAreaLight

RectAreaLightは正方形の領域から光を発するライトで、窓から入る光や蛍光灯のような効果を作り出すことができます。PointLightやSpotLightのように一点から広がる光ではなく、広い面から発せられる光です。影には対応していない。

ただし、MeshStandardMaterialやMeshPhysicalMaterialとのみ併用することができる。

javascript
const rectLight = new THREE.RectAreaLight(0xffffff, 5, 4, 10); // 색상, 강도, 너비, 높이
rectLight.position.set(5, 5, 0);
rectLight.lookAt(0, 0, 0);
scene.add(rectLight);
RectAreaLight 데모
#ffffff

まとめ

Three.jsの照明システムは、単純な環境光から複雑な光源まで様々なオプションを提供します。これらの照明を適切に組み合わせて最適化することで、リアルな3Dウェブグラフィックを作成することができます。

照明は実際のレンダリング性能に大きな影響を与えるため、実際のプロジェクトでは、性能と品質のバランスを考えながら照明を設定することが重要です。 また、素材の特性によって照明の効果が異なるため、照明と素材を一緒に考慮する必要があります。

❤️ 0
🔥 0
😎 0
⭐️ 0
🆒 0