有没有办法在 Nuxt.js 项目中使用 Vanta.js 效果？答案

【问题标题】：Is there a way to use Vanta.js effects in a Nuxt.js project?有没有办法在 Nuxt.js 项目中使用 Vanta.js 效果？
【发布时间】：2020-08-10 17:01:38
【问题描述】：

我目前正在使用 Nuxt.js（使用 TypeScript）制作个人作品集网站。我决定将Vanta.js Halo effect. 用于我的目标网页，但我似乎找不到让它正常工作的方法。

我尝试使用 three.js 和 vanta npm 包，但它会产生错误。 '无法读取未定义的属性“纹理”'

import * as THREE from 'three'
import HALO from 'vanta/dist/vanta.halo.min.js'

...

*inside Vue.extend block*
mounted(){
    this.vantaEffect = HALO({
    el: '#landing',
    *rest of the settings*
    THREE: THREE
    })
}

有什么办法可以让它工作吗？

更新：

我设法使用静态文件消除了错误 - 来自 this vanta repo issue 的方法，但用于启动的静态脚本找不到 #landing 元素。

/*nuxt.config.js*/

...
head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || '',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      { src: 'vanta.halo.min.js' },
      { src: 'three.min.js' },
      { src: 'effect.js' },
    ],
  },
...

/*effect.js - file that initializes the effect*/
VANTA.HALO({
  el: '#landing',
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.0,
  minWidth: 200.0,
  baseColor: 0xffffff,
  backgroundColor: 0x2d2d2d,
  THREE,
})

更新 2：

我通过导出一个初始化效果的函数并从mounted() 运行它并传递元素引用，设法解决了找不到#landing 元素的问题。

/*effect.js*/
const vantaEffect = (elementRef) => {
  return window.VANTA.HALO({
    el: elementRef,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    THREE: THREE,
  })
}

export default vantaEffect

现在出现了这个错误：

[VANTA] Init error TypeError: Cannot read property 'LinearFilter' of undefined

【问题讨论】：

我尝试过但失败了:(，显然需要仅限客户端，但尽管通过了它，但看起来也没有正确通过。codesandbox.io/s/happy-margulis-5wrbv?file=/pages/index.vue 在 [VANTA] 上出错初始化错误TypeError：无法读取未定义的属性'LinearFilter'，它定义得很好。
@LawrenceCherone 我还发现了这个issue on the vanta repo，它使用了静态vanta 和三个.js 文件，但我也无法让它工作。
您是否尝试将其放入 if(process.client) { } 语句块中？

标签： vue.js nuxt.js

【解决方案1】：

所以，我对 Lawrence 提供的沙箱做了一些改动，我能够让它像这样工作：https://codesandbox.io/s/winter-thunder-pffsq

基本上，Vanta 假设在window 上设置了 THREE，当我们从 npm 导入它时不会发生这种情况。所以必须先导入 Vanta，然后再导入 THREE 并将其设置为窗口变量。

import * as THREE from "three";
// import HALO from "vanta/dist/vanta.halo.min";

export default {
  async mounted() {
    // window is only avaiable on browser
    if (process.browser) {
      window.THREE = THREE;
      const { default: HALO } = await import("vanta/dist/vanta.halo.min");
      HALO({
        el: "#abc",
        mouseControls: true,
        touchControls: true,
        minHeight: 200.0,
        minWidth: 200.0,
        xOffset: -0.17,
        size: 2.1,
        THREE: window.THREE
      });
    }
  }
};

【讨论】：