Three.js 烘培-家居

• 概述
• 模型加载

概述

这篇文章主要介绍一下烘培模型的使用，此处具有以下功能，模型从白天到黑夜的过渡效果，如何使用光照贴图，控制光照强弱，模型动画等

three.js 烘培-家居

动态光照是three.js应用的主要性能瓶颈之一，尤其是模型材质比较复杂时，动态光照需要消耗更多的计算资源。

在一些不需要动态光照的场景里，我们可以将场景中的所有光照和阴影都烘焙bake到材质贴图中，在three.js中渲染时就可以节约大量的计算量，这对手机等性能相对不高的移动设备是一种常用的优化方法。

模型加载

模型就是一个glb，在模型中没有压缩贴图，我们一起来看一下这个模型拥有的贴图

1.白天光照贴图

2.过渡贴图

3.夜晚贴图

我们可以看到每一张贴图上都带有阴影和光照，这样我们就可以把贴图直接map到mesh上就ok了，先看看效果

使用烘培贴图时需要注意加上此代码：

const texture = new THREE.TextureLoader().load('./model/bakedDay.jpg');
texture.encoding = THREE.sRGBEncoding;
texture.flipY = false;
           

待续。。。

如有不明白的，可以加QQ: 2781128388