如何提升网站打开速度软件优化

Stone 3D电商行业制作案例 - 在线家居用品交互展示

应用简介

类似上面视频所演示的交互式产品展示网页3D应用，包含如下主要功能：

1. 家居（glb模型）场景实时渲染，三维浏览

2. 选中沙发（或餐桌台面）可以进行多选材质交互定制

3. 高亮选中物，并显示其商品规格

4. 自动聚焦所选商品

5. 点击地毯可以缓动移位切换视角

完成以上功能，您不需要写一行代码，只需要使用几个Stone 3D的内置组件即可。

制作过程

首先glb模型的加载，使用remote-mesh组件，把该组件添加在一个空实体上，使用remote-mesh组件的好处是，所保存的tsp工程文件的尺寸将非常精简。限制是不能动态修改使用remote-mesh加载的模型的材质。

模型加载后，添加一些常见的光照，比如环境光、直射光、矩形光和点光源，完成环境的构建。

（当然为了最佳视觉效果和性能，可以选择先烘焙，使用基础材质，省掉多余的光源消耗）

然后给需要交互定制材质的产品实体添加material-variant组件来添加材质变体。

同时给产品实体添加click-focus组件实现自动聚焦，添加product-card组件实现商品规格定义。

给地毯（地面）添加click-walk组件实现点击地面后的自动导航。

最后给scene实体添加outline组件来实现选中物体的边缘高亮。

质量和性能的权衡

关于渲染质量，场景多处有细长条，Stone 3D通过优化规避了闪烁和锯齿；

关于运行性能，以上应用中的模型为近百万面，光源用了6个，全部为PBR材质。

在2系列的显卡笔记本上，默认相机位，FPS为40+，如果使用烘焙估计能到80左右。

关于网络消耗，该工程约为1.5M，glb模型可以放oss上加速并缓存本地，这样整个应用加载少于5s。

结语

和Unity或Unreal不同，Stone 3D是一款轻应用引擎，并不追求极致逼真的渲染效果，而是聚焦在小几十倍的体量里达到接近的渲染效果，以便于被快速访问和分享。