首页 > 分享 > 5. 工厂光源(环境贴图和环境光)

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

# 工厂光源(环境贴图和环境光)

接下来两节课利用前面知识,给大家总结下,如何设置类似工厂、园区等3D场景的光照。

环境贴图 环境光 平行光模拟太阳光(下节课内容)

具体threejs知识点前面基本都讲解过,下面把重点放在整体思路讲解上,具体代码你可以参考课件源码。

# 测试工厂模型中光源

课件“演示”文件加载了一个工厂模型,你可以把代码中所有光源注释,执行代码,你无法正常看到工厂模型颜色。

# 环境贴图

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

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

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

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。

const ambient = new THREE.AmbientLight(0xffffff, 0.4); scene.add(ambient);

# GUI可视化调试

关于gui的介绍,参考入门部分18. gui.js库(可视化改变三维场景) (opens new window)

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

// 从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

gui.add(ambient, 'intensity', 0, 2).name('环境光.intensity');

# GUI控制环境贴图强度.envMapIntensity

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

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; } }); })

相关知识

植物工厂炼苗用LED光环境控制装置
基于LED光源优势的植物工厂光照策略探讨.pdf
设施栽培蔬菜光环境及调控研究进展.pdf
设施园艺光生物学与光环境调控创新团队
植物工厂光照和温度调控讲解
无土栽培环境调控1.ppt
园艺植物光环境调控
植物工厂营养液EC值调节与控制
一种缓解樱桃树花果期裂果的光环境调控方法
园艺植物光环境调控.doc

网址: 5. 工厂光源(环境贴图和环境光) https://m.huajiangbk.com/newsview587206.html

所属分类:花卉
上一篇: HT for Web (High
下一篇: Unity 编辑器学习(二)之