在 vue.js/nuxt.js 中使用 three.js 庫客戶端

Question

我正在嘗試使用 three.js 庫（與 npm 一起安裝）在我的 nuxt.js 應用程序的客戶端渲染 3D 模型，但我已經沒有什么想法可以開始導入工作了（ ）。 每次我收到與三個未定義相關的錯誤時。 這是我嘗試過的：

在nuxt.config.js

plugins: [
    {src: "~/plugins/three", mode: "client"}
  ]

在plugins/three.js

import Vue from 'vue'
import * as THREE from 'three'

Vue.use(THREE);

在我嘗試使用它的組件中：

if(process.client) {
    require('three');
    require('three-obj-loader');
    require('three-obj-mtl-loader');
    require('three-orbitcontrols');
}

從函數內部調用THREE.someFunction()

Answer 1

我最近在我的 nuxt 應用程序中成功導入了三個，即使我沒有檢查它是否是客戶端。

從我可以看到你像這樣導入： import * as Three from `three`但是你用three而不是Three來調用它。 它區分大小寫！