vue3+three内存泄漏问题

目录

前言

问题

解决方案

---

前言

        前端展示3d是一件非常炫酷的事情，现在不少前端小伙计都在自己项目上使用three，来满足在线看房、智慧校园、大屏展示等业务，但是呢，不知道你们有没有留意过，当你们浏览完three展示的页面之后，跳转到其他页面会变得非常卡顿，如果你场景中添加的模型少还好，万一需要加载的模型很多的时候，浏览器就会变得非常卡顿，就比如我目前接触的这个项目:三维展示人体器官...

先展示基本需要:

（我寻思这模型数量夺少？） 

问题

不少小伙伴不知道问题出在哪里，下面呈上浏览器内存图片...

 (跳转到three展示页面之前的内存快照)

 

(这个是跳转到three之后，然后返回之前的页面的内存) 

        不少小伙伴可能不知道问题出在哪里，我先说明一下，当我们浏览完three展示页面之后，返回其他页面，内存增加了，打开浏览器内存选项卡你会发现three场景中，scene等对象并没有释放，如果只是一个静态的three场景还好，但我的业务是:每个病人都有自己的模型，这意味着我的用户是这样使用我的系统的：点开管理系统页面，看到病人列表，点击一个病人查看他的器官情况，然后回退病人列表页面，之后再看另外一个病人...用户点击多次之后，内存当中的有关three的对象就会越堆越多，模型文件也会越来越多，然后......客户就打回重做了.......

解决方案

    //清楚动画帧id
    cancelAnimationFrame(animationID)
    //将每个模型释放
    group.traverse(function (v) {
        if (v.type === 'Mesh') {
            v.geometry.dispose()
            v.material.dispose()
        }
        v = null
    })
    // memoryManager.dispose()
    scene.remove(group)
    renderer.forceContextLoss()
    renderer.dispose()
    renderer.domElement = null
    renderer = null
    scene.clear()
    scene = null
    camera = null


    THREE.Cache.clear();

        这段代码放入到页面离开时候的生命周期函数就好(当然，你得对好你的变量...)