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

Threejs必须在客户端上运行，因此用<no-ssr>标记封装了该组件，并用const MyComponent = () => import('~/path/to/MyComponent.vue');动态地加载了它，但是现在我在服务器端遇到了错误。