109. 工厂光源(环境贴图和环境光)

环境贴图

如果你不设置任何光源和环境贴图,gltf模型默认PBR材质不会正常显示,一片漆黑。

不过你不设置任何光源,只设置环境贴图,物体表面也能看到。虽然环境贴图不是光源,但是会模拟物体周围环境的反射光。就好比你站在街上,周围房子、树木、马路也会反射光线到你身上。

通过.envMapIntensity可以调节环境贴图对模型外表面的影响程度,.envMapIntensity的值可以通过gui交互界面调节。

javascript 复制代码
const textureCube = new THREE.CubeTextureLoader()
    .setPath('./环境贴图/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
textureCube.encoding = THREE.sRGBEncoding;
loader.load("../工厂.glb", function (gltf) {
    gltf.scene.traverse(function (obj) {
        if (obj.isMesh) { //判断是否是网格模型
            obj.material.envMap = textureCube; //设置环境贴图
            obj.material.envMapIntensity = 1.0;
        }
    });
})

一般实际开发,对于偏向写实的场景,需要设置环境贴图,比如产品展示、物联网或数字孪生的场景。

环境光

一般三维场景需要添加环境光,来整体调节三维场景的明暗,环境光强度可以通过参数2,或光照强度属性.intensity设置。

实际开发,可以先给一个大概的值,然后通过gui交互界面微调AmbientLight的光照强度属性.intensity

javascript 复制代码
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

GUI可视化调试

前面入门部分讲解过gui相关知识,对于光源的等参数,人的大脑很难根据代码想象出来具体效果,所以需要通过可视化的方式调参数。

javascript 复制代码
// 从threejs扩展库引入gui.js
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
const gui = new GUI();//创建GUI对象 
gui.domElement.style.right = '0px';
gui.domElement.style.width = '300px';

gui控制环境光光照强度.intensity

javascript 复制代码
gui.add(ambient, 'intensity', 0, 2).name('环境光.intensity');

GUI控制环境贴图强度.envMapIntensity

通过材质的环境贴图强度属性.envMapIntensity,可以控制环境贴图对物体表面的影响程度,类比环境光的光照强度。

javascript 复制代码
const obj = {
    envMapIntensity:1.0,
}
gui.add(obj,'envMapIntensity',0,2).onChange(function(value){
    // 递归遍历,批量设置模型材质的`.envMapIntensity`属性
    gltf.scene.traverse(function (obj) {
        if (obj.isMesh) {
            obj.material.envMapIntensity = value;
        }
    });
})
相关推荐
-喵侠客-5 分钟前
探索开源MiniMind项目:让大语言模型不再神秘(1)
人工智能·深度学习·语言模型·自然语言处理
.net开发15 分钟前
WPF使用Prism框架首页界面
前端·c#·.net·wpf
新手小白勇闯新世界18 分钟前
论文阅读-用于图像识别的深度残差学习
论文阅读·人工智能·深度学习·学习·计算机视觉
新手小白勇闯新世界26 分钟前
论文阅读- --DeepI2P:通过深度分类进行图像到点云配准
论文阅读·深度学习·算法·计算机视觉
子午33 分钟前
【车辆车型识别】Python+卷积神经网络算法+深度学习+人工智能+TensorFlow+算法模型
人工智能·python·深度学习
名字越长技术越强35 分钟前
vue--vueCLI
前端·javascript·vue.js
是个热心市民37 分钟前
构建一个导航栏web
前端·javascript·python·django·html
J不A秃V头A1 小时前
报错:npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
前端·npm·node.js
B站计算机毕业设计超人1 小时前
计算机毕业设计Hadoop+大模型地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Spark 机器学习 深度学习 Flink 大数据
大数据·hadoop·爬虫·深度学习·机器学习·数据分析·课程设计
GDAL1 小时前
npm入门教程14:npm依赖管理
前端·npm·node.js