Question

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

2019-07-16

7314

vue.js three.js nuxt.js

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

我可以导入 THREE 的主文件夹，但尝试导入示例文件夹中的模块时出错。

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

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 导入