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');动态加载它，但是现在我在服务器端遇到了错误。

Answer 3

最后我设法做到了！

<template>
    <div>
        <client-only>
            <threejs-component />
        </client-only>
    </div>
</template>
<script>
export default {
    components: {
        ThreejsComponent: process.browser ? () => import('~/path/to/ThreejsComponent.vue') : null
    }
}
</script>

ThreejsComponent.vue内部都是threejs导入

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

3 个答案: