如何在 Nuxt 3 项目中使用 Troisjs

Question

我想将TroisJS （Vue 的three.js包装器）与Nuxt.js一起使用。 根据TroisJS文档（ https://troisjs.github.io/guide/install.html#existing-vuejs-3-project ），我需要将其添加到我的项目中，例如：

import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);

但是，我不知道如何弄清楚我应该把这段代码放在哪里。我希望 nuxt.config.js 文件，但我似乎不太明白它应该放在哪里。

我决定使用TroisJS而不是three.js ，因为我认为前者可能更容易导入和使用。 如果直接导入three.js比较容易，我不介意用。

非常感谢您的帮助！

Answer 1

在/plugins文件夹中添加名为troisjs-plugin.js的新文件，其内容如下：

import { TroisJSVuePlugin } from 'troisjs';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(TroisJSVuePlugin )
})

Answer 2

我发现了一个对 Trois 和 Nuxt 3 进行了一些测试的 repo，可能已经过时并且可能一些 api 已经改变，但是如果你想检查一下： alvarosabu/nuxt3-trois

此外，还有来自 Trois 作者的官方 repo，带有 Nuxt 3 自定义插件（可能也已过时） here