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

【问题标题】：How do I import Three.js into my Nuxt project如何将 Three.js 导入我的 Nuxt 项目
【发布时间】：2019-07-16 05:24:03
【问题描述】：

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

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

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

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

下面出现错误

语法错误意外的令牌 {

<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

【问题讨论】：

该错误消息的上下文是什么？你在哪里看到的？它指的是代码的哪一部分？
根本无法重现这个~codesandbox.io/s/vue-template-jmdmd
可能是stackoverflow.com/questions/41761761/…的副本
您找到出现此错误的原因了吗？我有一段时间面临同样的问题，显然这是唯一谈论它的地方。您能否更新问题，或者回答一下？

标签： vue.js three.js nuxt.js

【解决方案1】：

终于找到问题所在了。

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

transpile: [ "three" ]

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

【讨论】：

非常感谢！终于让它工作了，被困了好几天。他们真的应该在插件部分的官方 nuxt 指南中提到这一点。
这对我有用，只是给那些觉得它不明显的人做一个简短的说明：transpile 数组属性必须在你的 nuxt.config.js 中的build 对象属性内文件。我一味的复制了答案里的内容，放到了我的文件里，这显然是行不通的。

【解决方案2】：

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

【讨论】：

【解决方案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 导入

【讨论】：