THREE. js не предоставляет экспорт с именем EventDispatcher при загрузке OrbitControls в main. js - PullRequest
Новая
       46

THREE. js не предоставляет экспорт с именем EventDispatcher при загрузке OrbitControls в main. js

0 голосов
/ 05 августа 2020

Описание

Я пытаюсь использовать OrbitControls из THREE. js в своем проекте. Когда я пытаюсь импортировать объект OrbitControls, я получаю следующее сообщение об ошибке в консоли Google Chrome DevTools.

Запрошенный модуль './three.js' не работает предоставить экспорт с именем 'EventDispatcher'

Когда я вручную проверяю three.js (r119), я вижу, что он экспортирует EventDispatcher в строке 50631.

Вопрос : Учитывая эту информацию, почему я получаю вышеупомянутое сообщение об ошибке и как я могу это исправить?

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="three.js" crossorigin="anonymous"></script>
    <script src="main.js" type="module"></script>
</body>
</html>

main. js

import { OrbitControls } from './OrbitControls.js'

EDIT : Благодаря Стиву, причиной root моей проблемы было то, что я использовал немодульную версию three.js вместо правильной (для моего использования case) набрал three.module.js. Если вы получаете сообщение об ошибке, убедитесь, что вы загружаете файл three.module.js.

1 Ответ

2 голосов
/ 05 августа 2020

Я предполагаю, что вы используете OrbitControls. js находится в https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js

Вы смешиваете библиотеку модулей с библиотекой, не являющейся модулем. Если вы посмотрите на первые строки OrbitControls.js

import {
    EventDispatcher,
    MOUSE,
    Quaternion,
    Spherical,
    TOUCH,
    Vector2,
    Vector3
} from "../../../build/three.module.js";

, он пытается импортировать переменные из ../../../build/three.module.js, которого, вероятно, не существует. Судя по вашему сообщению об ошибке, похоже, что кто-то уже отредактировал его как './three.js', что звучит как немодульная версия.

Решения

Сохранение ссылок

  • Загрузить все three.js в папку (например, lib/three)
  • (Необязательно) Удалите ненужные файлы

Импорт через: 

import { OrbitControls } from './lib/three/examples/jsm/controls/OrbitControls.js';
import * as THREE from './lib/three/build/three.module.js';

Изменение только нужных файлов

Или вы можете загрузить только нужные файлы и изменить ссылки:

  • Скачать three.module.js из https://github.com/mrdoob/three.js/blob/dev/build/three.module.js
  • Замените ../../../build/three.module.js в OrbitControls.js на соответствующий путь. Он должен быть там, где three.module.js соотносится с OrbitControls.js
  • . Удалите тег <script src="three.js"> в вашем HTML, поскольку OrbitControls.js напрямую импортирует его

Ссылка на CDN

В качестве альтернативы вы можете напрямую ссылаться на CDN, например: 

import { OrbitControls } from 'https://unpkg.com/three@0.119.1/examples/jsm/controls/OrbitControls.js';
import * as THREE from 'https://unpkg.com/three@0.119.1/build/three.module.js';

Это работает, потому что все необходимые файлы размещены на CDN

...