Three.js-硬要自学系列30之专项学习环境光

什么是环境光

想象一下阴天在户外的感觉:

  1. 整个天空像一个巨大的、均匀的发光体☁️
  2. 光线从四面八方柔和地洒下来
  3. 你站在任何地方,身上受光程度几乎一样,没有明显的影子

核心特点

特性 现实比喻 代码体现
无方向性 阴天时,光线不来自特定角度 无需设置光源位置
均匀照射 树顶、地面、你的脸亮度差不多 所有物体表面均匀受光
不产生影子 阴天下几乎没有清晰投影 无法用环境光生成阴影
效率高 就像开了基础照明灯,省电 计算简单,性能消耗低

实际应用场景

  1. 基础打底光

    • 如同房间的主灯,先给场景铺一层基础亮度
    • 适合:避免物体完全陷入黑暗
  2. 烘托氛围

    • 用蓝色环境光模拟夜晚,用暖黄光模拟黄昏
    • 适合:快速改变全局色调
  3. 搭配其他光源(90%的情况!)

    • 环境光:填充阴影死角(如桌底、缝隙)
    • 方向光:产生明暗对比,塑造立体感

使用误区

"环境光不能替代太阳光!"
真相 :它像画布的底色,而物体结构需要方向性光源(如 DirectionalLight)来刻画。
"环境光并非越强越真实!"
真相:强度过高会使场景像曝光过度的照片,丢失细节(通常强度 ≤0.3 更自然)。

基础使用案例

效果如图

js 复制代码
const al = new THREE.AmbientLight('0xffffff', 1)
scene.add(al)

需要了解的API

AmbientLight 用于构建环境光

核心属性

1. .color

  • 作用:动态修改光源颜色

  • 特性

    • 支持直接赋值(light.color = new THREE.Color(0x00FF00);
    • 颜色变化实时生效(无需重新创建光源)

2. .intensity

  • 作用:调整光照强度

3. .isAmbientLight (只读)

  • :恒为 true,用于类型检查

关键方法

.dispose()

  • 作用:释放光源占用的GPU资源
  • 使用场景 :动态删除光源时必须调用,避免内存泄漏

intensity光强度演示案例

效果如图

js 复制代码
let f = 0;
const fm = 300; 
function animation() {
    const a1 = f / fm;  
    const a2 = 3 - Math.abs(0.5 - a1)*3 / 0.5; // 确保 a2 在 0 到 3 之间

    al.intensity = a2; // 动态修改强度
    f += 1;
    f %= fm;  // 确保 f 在 0 到 fm 之间循环
    renderer.render( scene, camera );
    requestAnimationFrame( animation );
}

结合方向光效果案例

效果如图

js 复制代码
const al = new THREE.AmbientLight('0xffffff', 0.5)
scene.add(al)
const dl = new THREE.DirectionalLight('0xffffff', 4)
dl.position.set(2, 2, -1)
scene.add(dl)

结合点光源效果案例

效果如图

js 复制代码
const pl = new THREE.PointLight('0xffffff', 12,100)
pl.position.set(1, 1.5, 1)
pl.add( new THREE.Mesh( new THREE.SphereGeometry(0.1, 32,32), new THREE.MeshBasicMaterial({color: '#fff'})) )
scene.add(pl)

图中的白色小球标记点光源位置,案例中的明暗切换,也是通过修改环境光强弱实现的,可参照上一个案例的代码

以上便是本篇的所有内容,环境光使用频率还是蛮高的,自己动手练一练,感受一下实际效果

相关推荐
四月_h2 分钟前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate25 分钟前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................2 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_2 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员
golang学习记2 小时前
AI 乱写代码?不是模型不行,而是你的 VS Code 缺了 Context!MCP 才是破局关键
前端
星光不问赶路人2 小时前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
z_y_j2299704383 小时前
服务器中使用Docker部署前端项目
服务器·前端·docker·容器
迪丽热爱3 小时前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js
数字冰雹3 小时前
图观 流渲染场景服务器
服务器·前端·数据库·数据可视化
李明卫杭州4 小时前
详细讲解js中的ResizeObserver
前端·javascript