Импорт частей кода

Описание ограничения

Очень часто при создании проекта в продвинутом редакторе вам может понадобиться импортировать некоторые библиотеки или расширения THREE.js.

Примером может служить класс THREE.js OrbitControls, который необходим для добавления возможности управления камерой во время работы сцены (не работает в AR). Или отдельные 3D-библиотеки, такие как THREE.Reflector (позволяет создавать отражения, работающие в AR).

Добавление сторонней библиотеки

Далее мы поговорим о добавлении возможности поворота камеры во время воспроизведения сцены. Это может понадобиться, например, для того, чтобы иметь возможность проверить работу созданного интерфейса, как показано в статье Создание UI, или для просмотра сцены с разных ракурсов.

Чтобы добавить стороннюю библиотеку, необходимо создать новый сценарий.

О том, как добавлять скрипты, можно прочесть в статье Создание сценариев для сцены.

Затем нажмите на кнопку Edit, чтобы открыть редактор кода.

Теперь по поводу кода самой библиотеки OrbitControls. Скрипт был взят с официального github разработчиков THREE.js. Ссылка на данную библиотеку: https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js.

Далее я просто копирую этот код и вставляю его в сценарий в расширенном редакторе.

Как видите, в верхней части консоли возникает ошибка, поскольку в исходный код импортируются различные библиотеки, но эти библиотеки уже находятся в редакторе по умолчанию, поэтому нам нужно изменить эту часть кода (с 1 по 9 строку).

Было:

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

Стало:

const {
	EventDispatcher,
	MOUSE,
	Quaternion,
	Spherical,
	TOUCH,
	Vector2,
	Vector3
} = THREE;

Но в самом низу кода экспортируется эта библиотека:

export { OrbitControls, MapControls };

Эту строчку тоже нужно удалить.

Таким образом, при импорте библиотек части импорта или экспорта должны быть обязательно изменены/удалены.

В этом случае OrbitControls не будет работать, так как необходимо вызвать импортированный код.

Как это сделать, описано в документации OrbitControls.

Если добавить пример операции в самом низу и переименовать animate() в update(), как показано в документации OrbitControls, все будет работать.

Ниже прикреплен файл, где используется OrbitControls. Вы можете вставить его в продвинутый редактор и посмотреть на код, а также на то, как работает сцена.

32KB

OrbitControlsWithObjectOnScene.json

OrbitControls нужен только для просмотра сцены в расширенном редакторе и для ее тестирования. Обязательно удалите этот скрипт, когда сцена будет готова (т.е. перед экспортом из расширенного редактора), иначе сцена не будет корректно работать при загрузке в простой редактор.