[Three.js] 探索各种灯光

Three.js

本帖由 DeepL 翻译。如有任何翻译错误，请告知我们！

Three.js 中照明的基本概念

灯光是 3D 中非常重要的元素，它能带来真实感和深度感。在 Three.js 中，光照是作为THREE.Light的子类实现的。每个光照对象都有位置、颜色和强度等基本属性。Three.js 提供了多种不同类型的光照，下面我们将对此进行讨论。

并非所有材质都支持灯光。 例如，您可以在MeshPhongMaterial 和MeshStandardMaterial 上使用灯光。

环境光

环境光（AmbientLight）是一种基本灯光，它可以均匀地照亮整个场景，没有特定的方向。它不会投射阴影，通常与其他灯光一起用于照亮太暗的区域。 它以灯光的颜色和强度作为参数。

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

方向光

方向光是一种所有光线都平行照射在同一方向上的光线，就像阳光一样。它们非常适合模拟强烈的远处光源（通常是太阳），并能产生鲜明的阴影。

设置定向光的方向与其他光源有些不同。普通光源（如点光源）可以通过旋转来定向，而定向光源则是从光源位置向目标移动光线。

  • 这意味着改变旋转值不会影响光线的方向。将光线想象成太阳。
  • 要改变光线的方向，就需要改变目标的位置。
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

点光源

点光源是从一个点向各个方向发光的光源，就像灯泡一样。光的强度会随着距离的增加而减弱，可以调整衰减率来控制光强度随距离减弱的速度。 您还可以放置多个 PointLights 来创建复杂的照明环境。这对于创建室内照明等效果非常有用。

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

聚光灯

点光源是一种从一个点向外呈锥形扩散的光源。与 DirectionalLight 一样，SpotLight 也允许您设置光线照射的目标。您可以创建类似舞台灯光或手电筒的效果。

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是一种双向灯光，它可以用两种颜色（天蓝色和地面蓝色）混合照亮场景。与只从特定方向照射的其他灯光（定向光、点光源）不同，它能**为整个环境提供柔和的照明。**它适用于模拟自然光。

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

矩形区域灯

矩形区域灯（RectAreaLight）是从一个矩形区域发出光线的灯具，可以营造出光线穿过窗户或荧光灯的效果。它不像点光源或聚光灯那样从单点发光，而是**从一个大面积区域发光。**它不支持阴影。

它只能与MeshStandardMaterial或MeshPhysicalMaterial结合使用。

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