如何将 Three.js 导入我的 Nuxt 项目

Question

我想将 THREE.js 中示例文件夹中的模块（例如 OBJLoader）导入到我的 Nuxt 项目中。

我可以导入三个的主文件夹，但是尝试在示例文件夹中导入模块时发生错误。

在官方文档中尝试了这些步骤。

https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules

我在下面收到错误

SyntaxError 意外标记 {

<template>
</template>
<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
export default{
}
</script>

这是我的 github 存储库 https://github.com/ksuhara/threejs-test

Answer 1

终于我能找出问题所在。

好吧，它与nuxt构建系统有关。使用第三方库时，应该将它们添加到nuxt.config.js bild->transpile数组中，以便它可以作为 Babel 的依赖项包含在内。

transpile: [ "three" ]

参考：https : //nuxtjs.org/api/configuration-build#transpile

Answer 2

Threejs 必须在客户端运行，因此用<client-only>标签封装组件并动态加载它const MyComponent = () => import('~/path/to/MyComponent.vue');，但现在我在服务器端收到错误。