Three.js-硬要自学系列3 (平行光与环境光、动画渲染循环、stats状态查看器)

本篇中主要学习平行光与环境光点光源概念以及相应的辅助器的使用

平行光与环境光

在Three.js 中，平行光（DirectionalLight）和环境光（AmbientLight）是两种常用的光源类型，它们分别模拟不同的光照效果，通常结合使用以增强场景的真实性。

环境光

使用环境光需要注意以下几点

环境光会均匀照亮场景中的物体，呈现漫反射光
无法产生阴影
只是用来平衡场景的明暗整体色调
单独使用环境光会导致物体缺乏立体感，需要配合其他光源

添加环境光

js 复制代码

// 创建一个环境光，颜色为白色，强度为0.5
const light = new THREE.AmbientLight(0xffffff,0.5)
scene.add(light)

平行光

使用平行光需要注意以下几点

所有平行光都是平行传播，模拟太阳光
通过设置castShadow: true可以生成阴影
通常用于定义场景的明暗关系和物体表面的高光/阴影细节

添加平行光

js 复制代码

const directionalLight = new THREE.DirectionalLight(0xffffff,1)
// 设置平行光源位置
directionalLight.position.set(0,0,30)
scene.add(directionalLight)

添加一个平行光辅助器，方便查看光源方向和位置

js 复制代码

 const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight,2)
 scene.add(directionalLightHelper)

添加一个点光源用于对比平行光

使用点光源需要注意以下几点

光线从单一点向四面八方发射，无明确方向性
光线强度随距离增加而衰减，衰减速率由distance和decay参数控制
默认无阴影，启用castShadow可实现阴影效果

添加点光源

js 复制代码

// 创建一个白色的点光源，强度为8，衰减为0，距离为0
const pointLight = new THREE.PointLight(0xffffff,8,0,0)
// 设置点光源位置
pointLight.position.set(3,3,4)
scene.add(pointLight)

添加一个平行光辅助器

js 复制代码

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

在这个案例中添加了环境光AmbientLight、平行光DirectionalLight、点光源PointLight,场景中的物体在光线的照射下显得更加立体

动画渲染循环

这里需要用到requestAnimationFrameAPI 该api根据屏幕刷新率（通常60Hz）在每次重绘前调用回调函数，确保动画与屏幕刷新同步。

定义一个animation函数，在内部调用该api,实现模型沿Y轴自旋转

js 复制代码

  function animation() {
    // 沿Y旋转立方体
    cube.rotateY(0.01);
    // 渲染场景和相机
    renderer.render( scene, camera );
    requestAnimationFrame( animation );
  }

效果图

stats状态查看器

stats.js 是 Three.js 作者开发的一个辅助库，用于查看 Three.js 当前的渲染性能，具体是计算 Three.js 的渲染帧率（FPS）。渲染帧率（FPS）指的是 Three.js 每秒钟完成的渲染次数，一般渲染达到每秒钟 60 次为最佳状态。stats 性能插件添加后，会默认在左上角显示性能帧数、每次刷新所用时间和占用内存，鼠标左键点击可进行切换，默认显示每秒的帧数

主要指标

FPS（Frames Per Second） ：最近一秒渲染的帧数量，数值越高，性能越好。
MS（Milliseconds） ：渲染帧所需的毫秒数，数值越低，性能越好。
MB（Megabytes） ：占用的内存大小。

导入Stats

js 复制代码

import Stats from 'three/addons/libs/stats.module.js'

添加Stats到项目中

js 复制代码

// 创建一个新的Stats对象
stats = new Stats()
// 设置位置
stats.domElement.style.position = 'absolute' 
stats.domElement.style.top = '40px'
stats.domElement.style.left = '60px'
document.body.appendChild(stats.domElement)

以上案例均可在案例中心查看体验

THREE 案例中心