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

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

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

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

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

Далее мы поговорим о добавлении возможности поворота камеры во время воспроизведения сцены. Это может понадобиться, например, для того, чтобы иметь возможность проверить работу созданного интерфейса, как показано в статье [sozdanie-ui](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/pro-editor/tekushie-ogranicheniya/sozdanie-ui "mention"), или для просмотра сцены с разных ракурсов. 

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

{% hint style="info" %}
О том, как добавлять скрипты, можно прочесть в статье   [#sozdanie-scenariev-dlya-sceny](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/kak-ustroen-pro-editor/osnovnye-vozmozhnosti#sozdanie-scenariev-dlya-sceny "mention").
{% endhint %}

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FzNP9jIA2zmcWaMEAp3ro%2FImport_1.jpg?alt=media\&token=59e472cc-c7e4-4ca3-9a7e-833b1e11c793)

Затем нажмите на кнопку <mark style="color:blue;">**Edit**</mark>, чтобы открыть редактор кода.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FMGO41EsqgVlzSKJKs9LF%2FImport_2.jpg?alt=media\&token=1c1421e4-f1db-426a-90c0-759233a5aff0)

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FhTaPnQ39Tq9iTTJtte0Y%2FImport_3.jpg?alt=media\&token=6ba253da-cc5e-4934-88ab-d1c97f553c39)

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FSjDjFpIuYR9eDrBE1tnz%2FImport_%C4%8D.jpg?alt=media\&token=5db26aa4-f074-4037-95e7-d2f163937bac)

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

Было:

{% code lineNumbers="true" %}

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

{% endcode %}

Стало:

{% code lineNumbers="true" %}

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

{% endcode %}

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

{% code lineNumbers="true" %}

```javascript
export { OrbitControls, MapControls };
```

{% endcode %}

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

{% hint style="warning" %}
Таким образом, при импорте библиотек части импорта или экспорта должны быть обязательно изменены/удалены.
{% endhint %}

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

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

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FbzLKKiToljC2x7Eh1tah%2FImport_5.jpg?alt=media\&token=4259fb10-10a4-450e-bae2-30212671d4f4)

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

{% file src="<https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FT3GfyOg5F3a6OoAKud7l%2FOrbitControlsWithObjectOnScene.json?alt=media&token=955fab59-85ac-406d-91d9-877d248e7d20>" %}

{% hint style="danger" %}
**OrbitControls** нужен только для просмотра сцены в расширенном редакторе и для ее тестирования. Обязательно удалите этот скрипт, когда сцена будет готова (т.е. перед экспортом из расширенного редактора), иначе сцена не будет корректно работать при загрузке в простой редактор.
{% endhint %}