如何在 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