# Создание портала в MyWebAR

Одним из отличных примеров использования дополненной реальности являются порталы.

{% embed url="<https://youtu.be/hQT5PrzSCCw>" %}

В MyWebAR вы можете легко создать такую сцену.&#x20;

Для начала необходимо создать новый проект. В данном случае это будет проект с [**отслеживанием QR-кодов**](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/sozdanie-proektov-webar/tipy-proektov#treking-qr-koda).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F3l8UlOtlnVDBS2Gi8Qpw%2Fimage.png?alt=media\&token=9ceb865a-29cc-457f-8722-14723772a85f)

## Добавление 3D-объектов

Первое, что необходимо сделать — добавить [**3D-модель**](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/sozdanie-proektov-webar/dobavlenie-obektov#3d-model) комнаты. Это может быть любая модель, но в данном случае — комната без одной стены.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Ffj22ZwY4fGT3h4PQuKZZ%2Fimage.png?alt=media\&token=d5906b3f-da44-4b25-94f5-bd4273c0fb8a)

В приведенной выше модели не хватает дверного проема, который открывал бы вход в виртуальный мир.

В данном случае дверной проем был сделан в расширенном редакторе, поэтому нам нужно добавить объект [**JSON MAE**](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/sozdanie-proektov-webar/dobavlenie-obektov#javascript-kod-json-mae).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FN1LENNNtXgwLMIRRl3p4%2Fimage.png?alt=media\&token=5d9adc3c-04c1-4435-834c-d18ab8d14b8e)

Объект полностью темный, поэтому, чтобы осветить его, нужно добавить два источника света: [**Ambient Light**](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/sozdanie-proektov-webar/dobavlenie-obektov#istochniki-sveta) и [**Directional Light**](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/sozdanie-proektov-webar/dobavlenie-obektov#istochniki-sveta).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F3iFpi6RSSR0PL4GSIMQG%2Fimage.png?alt=media\&token=b282d0b7-4c12-4ae0-a3b3-619ec3377e52)

Следующим шагом будет корректировка масштаба дверного проема и вписывание его в стену (путем изменения расположения).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FQzfksMiMKG5paxy7I53t%2Fimage.png?alt=media\&token=e2312fc5-57e9-4aa4-a0ab-b74891bf3998)

## Работа с плагином окклюзии

В данном случае основной механикой портала в MyWebAR является окклюзия дополненной реальности.

Что такое окклюзия? Окклюзия — это скрытие виртуальных объектов за реальными (или за виртуальными).

Без окклюзии:

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F8e7UIScAQXBGyqp7tB3l%2Fimage.png?alt=media\&token=4f513c8b-3fa3-43d5-bd3e-59f771ac3e54)

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FmTJeR3wUtIvH6K9F7dH1%2Fimage.png?alt=media\&token=c3f9f9aa-b6e1-474a-9569-5b8beeea7f84)

С окклюзией (скрываем тело пчелки):

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fkf5FG1VHBkNDY9s2iTZI%2Fimage.png?alt=media\&token=0ef592b0-db84-432e-b51e-df2a257a1bfa)

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FOf7RU9C4R0akHsZ13iM7%2Fimage.png?alt=media\&token=441814b5-53d7-4abc-b517-9ecd6474aeef)

Таким образом, MyWebAR может использовать окклюзию, чтобы скрыть некоторые объекты или создать эффект невидимости при просмотре с одной стороны.

Для этого необходимо [**добавить плагин**](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/primery-ispolzovaniya-mywebar/broken-reference). Чтобы добавить плагин, нажмите **Extensions** в левой части экрана.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FcLhVmQfvAQdJOPfaa2KE%2FPortal_1.jpg?alt=media\&token=e76b1d25-8ccd-4bbe-86c7-fcd6703dd7d7)

Откроется страница с доступными расширениями.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FAMy3rjSUrs45SuMbSL8i%2Fimage.png?alt=media\&token=09097b07-7c0a-4a5d-9b7b-527d669482cc)

В списке плагинов нужно найти **Occlusion Cube**, либо можно воспользоваться поиском в правом верхнем углу окна.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FnCiuVbWmqb47TSzeGz4Z%2FPortal_2.jpg?alt=media\&token=4e92e51d-c391-4823-8f71-059a60fd0573)

После этого нажмите кнопку **Install**. В правом верхнем углу появится статус установки плагина. В данном случае плагин установлен (зеленая плашка).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F8rNZteAz1xGvt2C5Z7Ac%2Fimage.png?alt=media\&token=4f2b60ee-32c9-42cf-b87a-b32b29424bf6)

Теперь необходимо закрыть окно для работы с плагинами. **Occlusion Cube** появится в списке **Objects** слева.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FOm4UsCw0XZ1bndHmYuVg%2FPortal_3.jpg?alt=media\&token=5a0124e6-d039-48a2-a871-5766d9e030da)

Чтобы добавить его в сцену, нажмите на **+**. Откроется окно, в котором нужно просто нажать кнопку **Save**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FZ95VZuyuWFvRUZ6obLUS%2Fimage.png?alt=media\&token=502da952-6b2c-4963-aac7-312a4353d246)

Плагин окклюзии на сцене. Это будет полупрозрачный фиолетовый куб.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FpV9xmAwHHZzycSPzLjSU%2Fimage.png?alt=media\&token=4505123b-3bda-48dd-83ef-bc61f5ee8830)

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Ffkxd51ARN73dpaYFq12n%2Fimage.png?alt=media\&token=3d4768f5-d2f9-4587-a1fc-acbdda15a51b)

Таким образом, необходимо закрыть стены комнаты окклюзией, оставив только дверной проем, который создаст эффект портала.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FEZ08HuUmPIBxn4a4mfNE%2Fimage.png?alt=media\&token=320178b5-2b6a-4c39-8207-5feb71587203)

Как это будет выглядеть в предварительном просмотре дополненной реальности (в AR это будет то же самое):

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FWlx9oywXu06J4ZBA9efO%2Fimage.png?alt=media\&token=b31f1c21-2f28-43da-b5db-3cfc2668cd32)

Комната видна только через дверной проем.

Аналогично, вы можете создавать порталы в редакторе MyWebAR без использования кода!

## Пример сцены в дополненной реальности

Ниже вы увидите QR-код. Отсканировав его, вы попадете на страницу с только что созданной сценой портала.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FT65cQuQAXQqWCrVj2gma%2Fimage.png?alt=media\&token=319386af-7111-4c3e-a228-113da057ef84)

Попробуйте навести камеру на QR-код и посмотреть на работу портала.