书洞笔记

外观

Threejs 光照教程

约 1240 字大约 4 分钟

2025-02-25

定义

光照是模拟现实世界中的光线照射效果，通过光照可以模拟现实世界中的物体表面反射光线的效果，从而产生明暗对比，使物体看起来更加真实。

光照类型

Three.js 中提供了以下几种光照类型：

  • 环境光（AmbientLight）： 环境光是一种均匀的光源，它不会产生阴影，只会照亮整个场景。环境光通常用于模拟自然光的效果。
  • 点光源（PointLight）： 点光源是一种从一个点向所有方向发射光线的光源，它会产生阴影。点光源通常用于模拟灯泡、蜡烛等光源的效果。
  • 平行光（DirectionalLight）： 平行光是一种从一个方向向所有方向发射光线的光源，它会产生阴影。平行光通常用于模拟太阳光的效果。
  • 半球光（HemisphereLight）： 半球光是一种从一个方向向所有方向发射光线的光源，它不会产生阴影。半球光通常用于模拟天空和地面的光照效果。
  • 聚光灯（SpotLight）： 聚光灯是一种从一个点向一个方向发射光线的光源，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。它会产生阴影。聚光灯通常用于模拟手电筒、舞台灯光等光源的效果。
  • ...

正如之前说到的有些材质不受光照影响，有些材质需要光的参与，不然漆黑一片。

AmbientLight

环境光是一种来自四面八方均匀的光源，它不会产生阴影，只会照亮整个场景。环境光通常用于模拟自然光的效果。

const light = new THREE.AmbientLight(0xff0000, 0.5); // 红色，强度为0.5
scene.add(light);

参数：

  • color： 光的颜色，默认值为 0xffffff（白色）。
  • intensity： 光的强度，默认值为 1。

ambientLight

DirectionalLight

平行光是沿着特定方向发射的光。这种光的表现像是无限远，从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果。 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

const light = new THREE.DirectionalLight(0xffffff, 1);
scene.add(light);

参数：

  • color： 光的颜色，默认值为 0xffffff（白色）。
  • intensity： 光的强度，默认值为 1。

directionalLight

加了平行光后，场景中物体的颜色会发生变化，因为平行光会改变物体表面的明暗对比。

DirectionalLightHelper 是一个用于显示 DirectionalLight 光线方向的辅助对象。它可以帮助我们更好地理解 DirectionalLight 的方向和位置。

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

const helper = new THREE.DirectionalLightHelper(light, 1);
scene.add(helper);

参数：

  • light： 要显示方向的 DirectionalLight 对象。
  • size： 辅助对象的大小，默认值为 1。

directionalLightHelper

添加辅助对象后可以更直观的看到光源的方向。默认平行光角度是垂直于地面的，所以看起来是水平的。

位置调整

light.position.set(-5, 5, 0);

DirectionalLight1

HemisphereLight

半球光是一种来自天空和地面的光源，光照颜色从天空光线颜色渐变到地面光线颜色。半球光通常用于模拟天空和地面的光照效果。半球光不能投射阴影。

const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 1);
scene.add(hemisphereLight);

参数：

  • skyColor： 天空的颜色，默认值为 0xffffff（白色）。
  • groundColor： 地面的颜色，默认值为 0xffffff（白色）。
  • intensity： 光的强度，默认值为 1。

hemisphereLight

PointLight

点光源是一种从一个点向所有方向发射光线的光源，它会产生阴影。点光源通常用于模拟灯泡、蜡烛等光源的效果。

const light = new THREE.PointLight(0xffffff, 1, 100);
scene.add(light);

参数：

  • color： 光的颜色，默认值为 0xffffff（白色）。
  • intensity： 光的强度，默认值为 1。
  • distance： 光源照射的最大距离，默认值为 0（表示无限远）。
  • decay： 沿着光照距离的衰退量。默认值为 2。

点光源同样也有辅助对象 PointLightHelper，用于显示点光源的位置和范围。

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

const pointLightHelper = new THREE.PointLightHelper(pointLight, 1);
scene.add(pointLightHelper);

pointLight

SpotLight

聚光灯是一种从一个点向特定方向发射光线的光源，它会产生阴影。聚光灯通常用于模拟手电筒、舞台灯光等光源的效果。

const spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 6, 0.5);
spotLight.position.set(0, 6, 0);
scene.add(spotLight);

参数：

  • color： 光的颜色，默认值为 0xffffff（白色）。
  • intensity： 光的强度，默认值为 1。
  • distance： 光源照射的最大距离，默认值为 0（表示无限远）。
  • angle： 聚光灯的圆锥角度，默认值为 Math.PI / 3。
  • penumbra： 聚光灯的半影衰减百分比，默认值为 0。
  • decay： 沿着光照距离的衰退量。默认值为 2。

spotLight