100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

threejs聚光源SpotLight介绍及使用实例

js yekong

在 Three.js 中，聚光源（THREE.SpotLight）是一种类似于手电筒的光源类型，它向特定方向发射一个锥形光束，类似于聚焦的光照效果。聚光源是一种局部光源，它可以产生投影，并且会对场景中的物体进行局部聚焦照明，是创建逼真场景的重要光源之一。

聚光源特点

  1. 位置： 聚光源具有特定的位置，通过设置 THREE.SpotLight 的 position 属性来定义光源的位置。光线将从这个位置向特定方向发射。

  2. 方向： 聚光源有一个特定的方向向量，通过设置 THREE.SpotLight 的 target 属性来定义光源的方向。光线将朝向 target 所表示的位置。

  3. 角度和聚焦度： 聚光源有两个角度属性，angle 和 penumbra，用于控制光束的形状。angle 表示光束的内圆锥角度，penumbra 表示光束的外圆锥角度，两者之间形成渐变区域。通过调整这两个角度，可以控制聚光源的聚焦程度。

  4. 范围： 聚光源有一个影响范围，即光照的有效距离。通过设置 THREE.SpotLight 的 distance 属性来定义聚光源的影响范围。

  5. 强度： 聚光源的强度决定了光照的亮度。通过设置 THREE.SpotLight 的 intensity 属性来调整光源的强度。

  6. 产生阴影： 聚光源可以产生阴影，为场景中的物体增加逼真的阴影效果。要启用聚光源的阴影功能，需要将 castShadow 属性设置为 true，并且为场景中的接收阴影的物体设置 receiveShadow 属性为 true。

聚光源参数

在 Three.js 中，聚光源（THREE.SpotLight）的构造函数有以下参数：

constructor(color?: THREE.Color | string | number, intensity?: number, distance?: number, angle?: number, penumbra?: number, decay?: number)

参数说明：

  • color：聚光源的颜色，可以使用 THREE.Color、字符串表示的颜色（如 '#ffffff' 或 'white'），或者表示颜色的十进制数值。默认值为白色，即 0xffffff。
  • intensity：聚光源的强度，默认值为 1。强度为 0 表示没有光照效果，大于 0 表示有光照效果，并控制着光照的亮度。
  • distance：聚光源的影响范围，即光照的有效距离。默认值为 0，表示光源的光线会一直照射到场景中的所有物体。
  • angle：聚光源的内圆锥角度，表示光束的内锥形状。默认值为 Math.PI / 3，即 60 度。
  • penumbra：聚光源的外圆锥角度，表示光束的外锥形状。默认值为 0，表示光束的外锥形状和内锥形状之间没有渐变区域。值为 1 表示外锥形状和内锥形状之间没有区别，光束是均匀的。
  • decay：衰减因子，用于控制光线随着距离的增加而衰减的程度。默认值为 1，表示光线不会衰减。若设置为非 1 的值，光线的强度会随着距离的增加而减弱。

除了构造函数参数之外，聚光源还具有其他一些属性可以用于进一步调整光照效果：

  • position：聚光源的位置向量，用于设置光源的位置。光线将从这个位置向特定方向发射。你可以使用 THREE.Vector3 来设置 position 的值。
  • target：用于设置聚光源的目标位置，聚光源的方向将朝向 target 所表示的位置。与 position 配合使用，可以更直观地控制光线的方向。
  • castShadow：一个布尔值，表示是否启用聚光源的阴影功能。默认值为 false，表示不产生阴影。如果需要为场景中的物体产生阴影，需要将其设置为 true。
  • shadow：聚光源的阴影属性对象，用于配置聚光源的阴影属性，如阴影贴图的分辨率、阴影的远近平面等。

实例代码

创建聚光源的方式非常简单，只需调用 THREE.SpotLight 的构造函数，传入颜色和强度参数即可。以下是创建一个基本聚光源的示例代码：

import * as THREE from 'three';

// 创建聚光源，颜色为白色，强度为 1，影响范围为 10，内圆锥角度为 Math.PI / 4，外圆锥角度为 Math.PI / 3
const spotLight = new THREE.SpotLight(0xffffff, 1, 10, Math.PI / 4, Math.PI / 3);

// 设置聚光源的位置
spotLight.position.set(2, 3, 4);

// 设置聚光源的方向
const targetPosition = new THREE.Vector3(0, 0, 0);
spotLight.target.position.copy(targetPosition);

// 启用聚光源的阴影功能
spotLight.castShadow = true;

在这个示例中，我们创建了一个聚光源实例 spotLight，将其颜色设置为白色（0xffffff 表示白色），强度设置为 1，影响范围设置为 10，内圆锥角度设置为 Math.PI / 4，外圆锥角度设置为 Math.PI / 3。然后，我们通过设置 position 属性将聚光源放置在位置 (2, 3, 4) 处，并将 target 属性设置为场景的中心位置 (0, 0, 0)，使得光线从聚光源的位置朝向场景的中心。最后，我们将 castShadow 属性设置为 true，启用聚光源的阴影功能。

通过使用聚光源可以为场景提供逼真的局部聚焦照明效果，它通常用于模拟手电筒、聚光灯等场景中。聚光源与其他类型的光源（如环境光、平行光、点光源等）一起使用，以实现更加真实的三维场景效果。通过调整聚光源的位置、方向、角度和强度，你可以控制场景中的局部光照效果，增强场景的真实感。

其他光源

除了聚光源 THREE.SpotLight，Three.js 还提供了其他几种光源类型，用于实现不同类型的光照效果。以下是 Three.js 中常用的光源类型：

  1. 环境光 THREE.AmbientLight： 环境光是一种均匀分布的光源，它没有特定的位置和方向，会均匀地照亮整个场景。环境光没有产生阴影效果，通常用于为场景中的所有物体提供基础的整体照明，使得物体不会完全黑暗。

  2. 平行光 THREE.DirectionalLight： 平行光是一种类似太阳光的光源，它从一个特定的方向发射光线，光线是平行的。平行光可以产生阴影效果，并且通常用于模拟太阳光照明场景。

  3. 点光源 THREE.PointLight： 点光源类似于灯泡，它从特定点向所有方向发射光线，类似于在场景中放置了一个光源。点光源可以产生阴影效果，适合用于局部照明，如模拟手电筒或点光源照明场景。

  4. 方向光 THREE.RectAreaLight： 方向光是一种矩形光源，它从一个特定的方向照射光线，可以产生阴影效果。方向光主要用于模拟矩形光源（如窗户、屏幕等）照明场景。

  5. 半球光 THREE.HemisphereLight： 半球光是一种用于模拟环境光和天空光的光源，它具有两种不同颜色的光，分别用于地面和天空。半球光可以用于增强场景的整体照明效果，并且通常与其他光源一起使用。

这些不同类型的光源可以根据场景需求和光照效果的要求灵活组合使用，以实现丰富多样的光照效果，从而让 Three.js 场景呈现出逼真的三维效果。在使用光源时，还可以调整光源的属性来控制光照的强度、颜色、影响范围等，从而得到所需的照明效果。

threejs 光源有哪些？

喜欢