Three.js 灯光介绍

Three.js 灯光介绍

Three.js 提供了多种类型的灯光，每种灯光都有其特定的用途和应用场景。以下是几种常见的灯光类型及其用途：

1. AmbientLight（环境光）

描述：环境光是全局光源，均匀地照亮场景中的所有物体，不会产生阴影。

用途：用于提供场景的基础照明，通常与其他光源配合使用，以避免场景过于黑暗。

示例：

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

2. DirectionalLight（平行光）

描述：平行光从特定方向投射，类似于太阳光，所有光线是平行的，可以产生阴影。

用途：用于模拟太阳光或其他远距离光源，适合用于户外场景。

示例：

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

3. PointLight（点光源）

描述：点光源从一个点向所有方向发光，类似于灯泡，可以产生阴影。

用途：用于模拟近距离的光源，例如灯泡、蜡烛等。

示例：

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

4. SpotLight（聚光灯）

描述：聚光灯从一个点向特定方向发光，光束有一定的锥形角度，可以产生阴影。

用途：用于模拟手电筒、舞台灯等聚光效果，适合用于需要重点照明的场景。

示例：

const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 10, 10);
spotLight.angle = Math.PI / 6;
spotLight.penumbra = 0.1;
spotLight.decay = 2;
spotLight.distance = 200;
scene.add(spotLight);

5. HemisphereLight（半球光）

描述：半球光有两个颜色，一个是天光（上方），一个是地光（下方），没有阴影。

用途：用于提供柔和的全局光照效果，适合用于户外场景，模拟天空和地面的光照。

示例：

const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(hemisphereLight);

6. RectAreaLight（矩形区域光）

描述：矩形区域光从一个矩形平面发光，光线均匀分布，但不能投射阴影。

用途：用于模拟灯管、屏幕等矩形光源，需要添加 RectAreaLightUniformsLib 扩展，只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。。

示例：

import { RectAreaLight, RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib';
RectAreaLightUniformsLib.init();
const rectAreaLight = new THREE.RectAreaLight(0xffffff, 1, 10, 10);
rectAreaLight.position.set(5, 5, 5);
rectAreaLight.lookAt(0, 0, 0);
scene.add(rectAreaLight);

灯光效果展示示例

以下是一个包含多个灯光类型的示例场景，展示了如何在同一个场景中使用不同的灯光：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib.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 ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 添加聚光灯
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(15, 15, 15);
spotLight.angle = Math.PI / 6;
spotLight.penumbra = 0.1;
spotLight.decay = 2;
spotLight.distance = 200;
scene.add(spotLight);

// 添加半球光
const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(hemisphereLight);

// 添加矩形区域光
RectAreaLightUniformsLib.init();
const rectAreaLight = new THREE.RectAreaLight(0xffffff, 1, 10, 10);
rectAreaLight.position.set(5, 5, 5);
rectAreaLight.lookAt(0, 0, 0);
scene.add(rectAreaLight);

// 加载模型
const loader = new GLTFLoader();
loader.load('/path/to/your/model.gltf', function (gltf) {
  scene.add(gltf.scene);
});

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();