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)

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

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

  • 光线从单一点向四面八方发射,无明确方向性
  • 光线强度随距离增加而衰减,衰减速率由distancedecay参数控制
  • 默认无阴影,启用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 案例中心

相关推荐
前端小巷子10 分钟前
Web缓存:原理、策略与优化
前端·面试
小磊哥er12 分钟前
【前端工程化】前端工作中如何协同管理开发任务?
前端
程序员小白条17 分钟前
我的第二份实习,学校附近,但是干前端!
java·开发语言·前端·数据结构·算法·职场和发展
编程大全18 分钟前
2025年前端面试题
前端
萌萌哒草头将军29 分钟前
🔥🔥🔥 NuxtLabs 宣布加入了 Vercel !
前端·javascript·vue.js
LuciferHuang8 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing8 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20158 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言9 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手9 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3