Как импортировать OBJLoader из three.js в Nuxt.js? Невозможно использовать оператор импорта вне модуля

Всего нуб, нужна помощь.

Система: Win 10. Браузер Chrome. Фреймворк: Nuxt, конфигурации по умолчанию

Я установил three.js через npm (через gitbash) с npm install three --save. Он находится в зависимостях package.json как "three": "^0.116.1",. У меня есть файл scene.json, сохраненный в ~ / assets /, который был создан с помощью редактора 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>

person Quinlan Harsch    schedule 20.05.2020    source источник
comment
Вы видели это stackoverflow.com/questions/61249944/?   -  person Marquizzo    schedule 21.05.2020


Ответы (2)


Вам необходимо перекомпилировать файлы модуля three.js ES6.

Добавьте эту строку в файл nuxt.config.js:

build:{
    transpile:["three"]
}
person Dacxj0    schedule 28.12.2020
comment
Огромное спасибо! Я всюду искал решение, пока не увидел это. Это должно быть установлено как ответ. - person ToddPadwick; 02.06.2021

Это был синтаксис ES6. Строка 6 должна выглядеть так:

импортировать { OBJLoader } из "three / examples / jsm / loaders / OBJLoader.js"

ТАКЖЕ НАСТОЯЩИЙ ОТВЕТ: https://stackoverflow.com/a/61196076/11896841

person Quinlan Harsch    schedule 22.05.2020