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

threejs点光源PointLight介绍及使用

js yekong

在 Three.js 中，点光源（THREE.PointLight）是一种类似于灯泡的光源类型，它从特定点向所有方向发射光线，就像在场景中放置了一个光源。点光源会在所有方向上均匀地照亮场景中的物体，类似于在场景中添加了一个发光的球体。点光源可以产生阴影，并且会对场景中的物体进行局部照明，是创建逼真场景的重要光源之一。

点光源特点

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

  2. 范围： 点光源有一个影响范围，范围越大，照亮的区域就越大。通过设置 THREE.PointLight 的 distance 属性来定义点光源的影响范围。

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

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

使用点光源可以为场景提供逼真的局部照明效果，它通常与其他类型的光源（如环境光、平行光等）一起使用，以实现更加真实的三维场景效果。通过调整点光源的位置、影响范围和强度，你可以控制场景中的局部光照效果，增强场景的真实感。

点光源参数

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

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

参数说明：

  • color：点光源的颜色，可以使用 THREE.Color、字符串表示的颜色（如 '#ffffff' 或 'white'），或者表示颜色的十进制数值。默认值为白色，即 0xffffff。
  • intensity：点光源的强度，默认值为 1。强度为 0 表示没有光照效果，大于 0 表示有光照效果，并控制着光照的亮度。
  • distance：点光源的影响范围，即光照的有效距离。默认值为 0，表示光源的光线会一直照射到场景中的所有物体。
  • decay：衰减因子，用于控制光线随着距离的增加而衰减的程度。默认值为 1，表示光线不会衰减。若设置为非 1 的值，光线的强度会随着距离的增加而减弱。

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

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

示例代码

import * as THREE from 'three';

// 创建点光源，颜色为白色，强度为 1，影响范围为 10，衰减因子为 2
const pointLight = new THREE.PointLight(0xffffff, 1, 10, 2);

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

// 启用点光源的阴影功能
pointLight.castShadow = true;

在这个示例中，我们创建了一个点光源实例 pointLight，将其颜色设置为白色，强度设置为 1，影响范围设置为 10，衰减因子设置为 2。然后，我们通过设置 position 属性将点光源放置在位置 (2, 3, 4) 处，并将 castShadow 属性设置为 true，启用点光源的阴影功能。

通过使用点光源的参数，你可以调整光源的颜色、强度、影响范围和衰减因子，以及启用或禁用阴影功能，以实现所需的光照效果和场景表现。

其他光源

除了点光源 THREE.PointLight，Three.js 还提供了其他几种光源类型，用于实现不同类型的光照效果。以下是除了点光源之外的另外几种光源类型：

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

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

  3. 聚光源 THREE.SpotLight： 聚光源向特定方向发射一个锥形光束，类似于手电筒的效果。聚光源可以产生投影，并且会对场景中的物体进行局部聚焦照明。

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

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

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

threejs光源

喜欢