Блог

Главная - Вопросы по программированию - Импортировано three.js модуль OrbitControls «не определен»

Импортировано three.js модуль OrbitControls «не определен»

#javascript #html #three.js

#javascript #HTML #three.js

Вопрос:

Новичок в Javascript и HTML здесь:

Я пытаюсь отобразить 3D-модель (файл .gltf) на веб-сайте с элементами управления (панорамирование, масштабирование и т.д.), Используя javascript three.js Модуль OrbitControls. Несмотря на использование <script type="module"> тегов в HTML для загрузки OrbitControls, когда я пытаюсь загрузить страницу, я получаю Uncaught ReferenceError: OrbitControls is not defined от firefox. Я могу успешно отобразить изображение, если я не включу оператор, определяющий элементы управления, но включу тег импорта.

Краткий код:

—HTML:

 <head>
  <!-- Imports for three.js and GLTFLoader.js, both seem to be working -->
  <script type="module"> 
    import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js"; 
  </script>
  <script src="script.js" defer="defer"></script>
</head>

—Javascript (из script.js ):

 "use strict";

function main() {
    //Create render and camera objects; both work when not using controls

    const controls = new OrbitControls( camera, renderer.domElement );

    // create scene, GLTFLoader, run animate function
}
const obj_returned = main();

Я попробовал несколько разных стилей команды script:

<script type="module"> import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js"; </script>

Это приводит к Uncaught ReferenceError: OrbitControls is not defined ошибке,

<script type="module" src="https://unpkg.com/three/examples/jsm/controls/OrbitControls.js">

выдает ту же ошибку, и

<script src="https://unpkg.com/three/examples/jsm/controls/OrbitControls.js"></script>

На самом деле это дает ту же ошибку плюс Uncaught SyntaxError: import declarations may only appear at top level of a module , я думаю, из-за отсутствия type="module" флага.

Все локальные файлы находятся в одном каталоге.

Я просмотрел несколько других примеров подобного рода, чтобы увидеть, чего мне не хватает (например, здесь, здесь, здесь, three.js документация, исходный код OrbitControls и некоторые другие).

Я очень новичок в JS и HTML, поэтому 1) это, вероятно, что-то очень очевидное и 2) если это не тривиально / опечатка, я был бы признателен за небольшое объяснение того, почему это не работает, чтобы я мог избежать подобных ошибок в будущем. Спасибо!

Комментарии:

1. Добро пожаловать в SO! Если вы хотите использовать любой менеджер пакетов js (просто привяжите файл js к своей странице) — используйте папки ‘js’ в дистрибутиве threejs, а не ‘jsm’. папки ‘Jsm’ содержат модуль для использования с webpack или другими менеджерами.

2. @SalientBrain Спасибо за ваш ответ! Если я правильно понимаю, ваше предложение состоит в том, чтобы просто изменить URL-адрес импорта, чтобы быть /js/controls/OrbitControls.js ? Это дает мне SyntaxError: import not found ошибку для OrbitControls в дополнение к ссылочной ошибке, упомянутой в моем вопросе (хотя этот адрес кажется правильным). Есть ли просто лучший способ сделать этот импорт в целом?

3. @LvP вы решили это? У меня точно такая же проблема

Метки: