[ThreeJs学习笔记]2.Threejs卡顿优化-释放显卡缓存

做项目的过程中，遇到了很多的卡顿问题，最后经由暮志未晚 https://www.wjceo.com/ 群内各个大佬的指点，明白释放缓存的重要性，在这里作为一篇小笔记记录在这里

1.删除场景中的物体时，记得同时调用dispose方法来清空显存占用

    /**
     * 清空当前obj对象的缓存
     * @param mesh  mesh对象
     * */
    function clearCache(mesh) {
        let mesh ;
        mesh.geometry.dispose();
        mesh.material.dispose();
    }

上述方法中，需要传入一个参数，该参数可以是一个mesh对象，也可以是一个object3D对象及其子类，然后将其内部的geometry,material(若有texture对象也需要把texture清除)使用.dispose()方法，清空它们在显卡中的缓存

可以在chrome中，按下Shitft+Esc检测显卡缓存

简单的小示例代码，主要用于测试清空缓存的效果
测试过程：
1.changeSphere方法中注释掉
clearCache(list[i])
这一行后，每次切换球体，都会导致显卡内存成倍增加，切换几次后，浏览器崩溃
2.使用了clearCache()清空缓存后，显卡内存不再增加

这里就不上图了，可以自行下来做测试

2.切换页面时，清空当前页面缓存

笔者在Vue+threejs的项目中，使用了组件切换，页面并没有刷新，但是每次都会重载一次场景，致使场景异常的卡顿，所以在每次切换组件后，调用了下列方法来清空上一个组件中的缓存，使得项目大幅度优化

在上述代码中，有一段方法并未在该示例中使用，这段代码就是用来清空渲染器缓存

    function clearRenderer(){
        renderer.dispose();
        renderer.forceContextLoss();
        renderer.context = null;
        renderer.domElement = null;
        renderer = null;
    }

该方法会将显存中，当前页面所有的显存清除，当你要清空当前画布，生成新的画布时调用，会清空上一个画布所占用的显卡缓存，从而优化整体项目