最近在做的 Nuxt3 项目中，其中一个页面使用到了一个由 ThreeJs 实现的特效，所以需要引入 ThreeJs 库，但是页面跑起来之后，控制台就弹出警告：

WARNING: Multiple instances of Three.js being imported

我的 ThreeJs 引入方式是通过 useHead() 函数的 script 属性引入的，具体代码如下

useHead({
   script: [
      { src: '/scripts/three.min.js', tagDuplicateStrategy: 'replace' },
      { src: '/scripts/vanta.birds.min.js' }
   ]
})

项目跑起来之后，当页面切走，再切回来时，控制台就会弹出这个警告，虽然警告不会影响程序运行，但是看着就很不舒服，而且 Three.js 实例多了，页面性能可能会受到影响，特效的流畅度也会卡卡的。所以放任不管是不行的，只能找找原因把它给解决了。通过网上查找和咨询群友，都没能找到解决方案，还是只能自己折腾。根据警告信息虽然知道是 Three.js 重复加载导致的，但是却不知道如何下手。

后来通过控制台的警告信息，顺藤摸瓜，查看 Three.js 的源码，发现这个警告是通过判断 window 对象上是否已经存在 __THREE__ 这个对象来实现的。

看到这里瞬间就想到，如果每次进入页面我先把 window.__THREE__ 对象清空是不是就不存在这个问题了，这也算是变相的解决问题了。找到了解决方案就好办了，具体的代码如下：

useHead({
    script: [
       { innerHTML: 'window.__THREE__ = null;' },
       { src: '/scripts/three.min.js', tagDuplicateStrategy: 'replace' },
       { src: '/scripts/vanta.birds.min.js' }
    ]
})

注意，清空操作一定要放在加载 three.js 之前。改完代码经过测试，发现问题完美解决，控制台再也不弹出那个烦人的警告了~