threejs - 性能优化点（一）

对与web端而已，可以用到的浏览器性能是有限的，所以这里我们探讨下对于web端3D场景我们有哪些方法来提升提升性能。

1. 通过减少模型/物体的三角面来节省webgl的渲染性能（面越多越精细，合理控制面数，对于不需要展示的面尽量简化）

// 查看模型三角面
const geometry = new THREE.BoxGeometry(20,20);
const material = new THREE.BasicMaterial({
    color: 0xff0000,
    // 开启三角面辅助
    wireframe:true
})；
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);

2. 显卡在3060及以上（不推荐），顶点等数据存在显存中，顶点面数越多所需要的显存越高
3. 模型拆分小模块加载提升加载速度，对于可视区内比较小的物体到放大到一定程度时候才精细显示
4. 对于结构化物体进行合并成一个提升渲染速度（比如将钢架结构直接合并成整体，前提材质相同，不能单独配置某段独立材质）
5. 通过模型软件draco压缩模型（模型效果有一定影响），模型大小能得到较大程度压缩，也需要考虑模型过大解压同样会需要更多时间
6. 纹理贴图文件大小需要控制在1m内（最好贴图在250kb内），非透明需求贴图使用jpeg格式
7. 模型软件/程序中通过共享几何体降低模型大小（这个方法其中一个几何被修改其他几何都会被影响）

// 例如多个材质不同几何，形状相同
const geometry = new THREE.BoxGeometry(20,20);
for(let i = 0;i<20;i++){
    const material = new THREE.BasicMaterial({
        color: 0xff0000,
    })；
    const mesh = new THREE.Mesh(geometry,material);
    mesh.position.x = Math.random()*10;
    scene.add(mesh);
}