2

完全菜鸟，需要帮助。

系统：Win 10. 浏览器 Chrome。框架：Nuxt，默认配置

我通过 npm（通过 gitbash）安装了 three.js 和npm install three --save. 它在 package.json 依赖项中为"three": "^0.116.1",. 我在 ~/assets/ 中保存了一个 scene.json 文件，该文件是使用three.js 编辑器> 导出场景生成的。

我收到错误“不能在模块外使用导入语句”，有或没有type="module"

这是我正在使用的 Vue 组件：（它仅在客户端呈现。）

<template>
  <div id="Three">
    <div id="threeContainer"></div>
  </div>
</template>

<script type="module">
import * as Three from 'three'
import OBJLoader from 'three/examples/jsm/loaders/OBJLoader.js'

export default {
  name: 'Three',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const container = document.getElementById('threeContainer')

      this.camera = new Three.PerspectiveCamera(
        70,
        container.offsetWidth / container.offsetHeight,
        0.01,
        10
      )
      this.camera.position.z = 1

      this.scene = new Three.Scene()

      const loader = new OBJLoader()
      loader.load(
        '~/assets/scene.json',
        function(obj) {
          this.scene.add(obj)
        },
        function(xhr) {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        function(err) {
          console.error(err.stack)
        }
      )

      this.renderer = new Three.WebGLRenderer({ antialias: true })
      this.renderer.setSize(container.clientWidth, container.clientHeight)
      container.appendChild(this.renderer.domElement)
    }
  }
}
</script>

<style lang="scss">
#threeContainer {
  height: 300px !important;
  background: black;
}
</style>
4

2 回答 2

4

您需要转译 three.js ES6 模块文件。

将此行添加到 nuxt.config.js 文件中：

build:{
    transpile:["three"]
}
于 2020-12-28T03:54:12.510 回答
1

这是 ES6 语法。第 6 行应如下所示：

从“三个/examples/jsm/loaders/OBJLoader.js”导入{ OBJLoader }

也是真正的答案： https ://stackoverflow.com/a/61196076/11896841

于 2020-05-22T12:30:09.500 回答