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;
        }
    });
})
相关推荐
腾讯TNTWeb前端团队38 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试