# Пример интеграции готового скрипта

В данной статье я расскажу как перенести данный скрипт, сделанный на чистом THREE.js, в продвинутый редактор.

{% embed url="<https://codepen.io/shikitos/pen/oNeQoXB>" %}

## Создание проекта

Первым делом нужно перейти в продвинутый редактор.&#x20;

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FgOdWJf8Cd0HpFVWKN2w7%2FExample_1.jpg?alt=media\&token=42c51211-094a-46e6-9b04-15379d346da2)

Далее, нужно создать новую сцену (для того, чтобы на сцене не было лишних объектов), нажатием на **File** → **New**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FOAIDcQ75Z1DsWIrF7uae%2FExample_2.jpg?alt=media\&token=7fbd8524-a73c-415d-ac73-862e8c272eb8)

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

Для начала стоит взглянуть на приведенный выше код примера. Вы заметите, что в сцену добавляется два объекта: частица спрайта и источник света.

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

Первым делом нужно добавить точечный источник света. Для его добавления, на верхней панели нажмите **Add** → **Point Light**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F8fVJcZATDeaBjAV884xb%2FExample_3.jpg?alt=media\&token=99c9744e-7b31-49db-ac80-7474005e08a4)

Далее вы можете немного поднять источник, как в приведенном скрипте сверху.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FQTidxwSj8OU7KA1YaeVL%2FExample_4.jpg?alt=media\&token=d61b38b8-b16e-4b58-a28b-47f354f8ab8b)

### Добавление частицы (спрайта)

Для добавления спрайта, нужно нажать **Add** → **Sprite**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FXmWBRbPksL8hi0D0E9hM%2FExample_5.jpg?alt=media\&token=70c998e1-4986-4019-90ce-66acb6d11505)

Затем добавленный спрайт следует уменьшить в размере, изменив параметр **Scale**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FCFjp9eYxEE9vJyqpO9Jt%2FExample_6.jpg?alt=media\&token=514efc5d-bf0f-4cc2-9d4e-ef813bd7fa54)

## Импорт скрипта

Теперь, когда все объекты находятся на сцене, можно заняться импортом сценария. Первоначально код выглядит следующим образом:

{% code lineNumbers="true" %}

```javascript
let renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.z = 10;
camera.position.y = 5;
camera.lookAt(0, 0, 0);
scene.add(camera);

let light = new THREE.PointLight(0xffffff);
light.position.set(-100, 200, 100);
scene.add(light);

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([-0.05, -0.05, 0.05,
    0.05, -0.05, 0.05,
    0.05, 0.05, 0.05,
    0.05, 0.05, 0.05, -0.05, 0.05, 0.05, -0.05, -0.05, 0.05
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const original = new THREE.Mesh(geometry, material);

let particles = [];
for (let i = 0; i < 100; i++) {
    let particle = original.clone();
    particle.userData.velocity = new THREE.Vector3();
    scene.add(particle);
    particles.push(particle);
}

animate();

function animate() {
    let particle = particles.shift();
    particles.push(particle);
    
    let velocity = particle.userData.velocity;
    velocity.x = Math.random() * 0.1 - 0.05;
    velocity.y = Math.random() * 0.1 + 0.1;
    velocity.z = Math.random() * 0.1 - 0.05;
    for (let i = 0; i < particles.length; i++) {
        let particle = particles[i];
        let velocity = particle.userData.velocity;
        velocity.y -= 0.0098;
        particle.position.add(velocity);
        if (particle.position.y < 0) {
            particle.position.y = 0;
            velocity.y = -velocity.y;
            velocity.multiplyScalar(0.6);
        }
    }

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}
```

{% endcode %}

Первое, что нужно сделать, это добавить сценарий, привязав его к сцене.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Ff8Ws5ujF6lWXJ8Z862LY%2FExample_7.jpg?alt=media\&token=37e8cf2a-fa4c-408e-bb7d-06053ee7861c)

Далее, нажав **Edit**, откройте код скрипта и вставьте код, который нужно импортировать (в данном случае это код, показанный выше).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FLIsTKSXbpv7J9kxaBzc6%2FExample_8.jpg?alt=media\&token=9ae310a8-3ce2-4f0f-a4e1-f47ce236fefa)

Первым делом нужно переименовать функцию анимирования `animate()` → `update()` *(строка 37)* и удалить вызов этой функции *(строка 35)*, а так же, удалить метод `requestAnimationFrame(animate);` *(строка 58)*.

{% code lineNumbers="true" %}

```javascript
let renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.z = 10;
camera.position.y = 5;
camera.lookAt(0, 0, 0);
scene.add(camera);

let light = new THREE.PointLight(0xffffff);
light.position.set(-100, 200, 100);
scene.add(light);

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([-0.05, -0.05, 0.05,
    0.05, -0.05, 0.05,
    0.05, 0.05, 0.05,
    0.05, 0.05, 0.05, -0.05, 0.05, 0.05, -0.05, -0.05, 0.05
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const original = new THREE.Mesh(geometry, material);

let particles = [];
for (let i = 0; i < 100; i++) {
    let particle = original.clone();
    particle.userData.velocity = new THREE.Vector3();
    scene.add(particle);
    particles.push(particle);
}

function update() {
    let particle = particles.shift();
    particles.push(particle);
    
    let velocity = particle.userData.velocity;
    velocity.x = Math.random() * 0.1 - 0.05;
    velocity.y = Math.random() * 0.1 + 0.1;
    velocity.z = Math.random() * 0.1 - 0.05;
    for (let i = 0; i < particles.length; i++) {
        let particle = particles[i];
        let velocity = particle.userData.velocity;
        velocity.y -= 0.0098;
        particle.position.add(velocity);
        if (particle.position.y < 0) {
            particle.position.y = 0;
            velocity.y = -velocity.y;
            velocity.multiplyScalar(0.6);
        }
    }

    renderer.render(scene, camera);
}
```

{% endcode %}

{% hint style="info" %}
В продвинутом редакторе используется вшитая в него функция `update()`, которая работает таким же образом, как и функция `animate()` вызывается каждый кадр.

Так же, вызов функции осуществляется самим редактором при запуске сцены, именно поэтому, вызовать функций `init()` и `update()` не нужно.
{% endhint %}

Далее, нужно удалить создание `renderer` (в том числе его настройку и вызов в функции `animate()` → `update()`) *(строки 1-3, 55)*, `camera` *(строки 7-11)* и `scene` *(строка 5)*.

{% code lineNumbers="true" %}

```javascript
let light = new THREE.PointLight(0xffffff);
light.position.set(-100, 200, 100);
scene.add(light);

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([-0.05, -0.05, 0.05,
    0.05, -0.05, 0.05,
    0.05, 0.05, 0.05,
    0.05, 0.05, 0.05, -0.05, 0.05, 0.05, -0.05, -0.05, 0.05
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const original = new THREE.Mesh(geometry, material);

let particles = [];
for (let i = 0; i < 100; i++) {
    let particle = original.clone();
    particle.userData.velocity = new THREE.Vector3();
    scene.add(particle);
    particles.push(particle);
}

function update() {
    let particle = particles.shift();
    particles.push(particle);
    
    let velocity = particle.userData.velocity;
    velocity.x = Math.random() * 0.1 - 0.05;
    velocity.y = Math.random() * 0.1 + 0.1;
    velocity.z = Math.random() * 0.1 - 0.05;
    for (let i = 0; i < particles.length; i++) {
        let particle = particles[i];
        let velocity = particle.userData.velocity;
        velocity.y -= 0.0098;
        particle.position.add(velocity);
        if (particle.position.y < 0) {
            particle.position.y = 0;
            velocity.y = -velocity.y;
            velocity.multiplyScalar(0.6);
        }
    }
}
```

{% endcode %}

{% hint style="warning" %}
ВАЖНО: Инициализация таких элементов, как `camera`, `renderer` и `scene` выполняется автоматически при запуске сцены. Именно поэтому их присутствие в коде не будет выполнено и выдаст ошибку.
{% endhint %}

В пункте [#dobavlenie-obektov](#dobavlenie-obektov "mention") мы добавили частицу *(строки 5-13)* и свет *(строки 1-3)*, поэтому их так же нужно удалить.

{% code lineNumbers="true" %}

```javascript
let particles = [];
for (let i = 0; i < 100; i++) {
    let particle = original.clone();
    particle.userData.velocity = new THREE.Vector3();
    scene.add(particle);
    particles.push(particle);
}

function update() {
    let particle = particles.shift();
    particles.push(particle);
    
    let velocity = particle.userData.velocity;
    velocity.x = Math.random() * 0.1 - 0.05;
    velocity.y = Math.random() * 0.1 + 0.1;
    velocity.z = Math.random() * 0.1 - 0.05;
    for (let i = 0; i < particles.length; i++) {
        let particle = particles[i];
        let velocity = particle.userData.velocity;
        velocity.y -= 0.0098;
        particle.position.add(velocity);
        if (particle.position.y < 0) {
            particle.position.y = 0;
            velocity.y = -velocity.y;
            velocity.multiplyScalar(0.6);
        }
    }
}
```

{% endcode %}

Нужно сказать редактору, где находится наша частица, добавленная в главе [#dobavlenie-chasticy-spraita](#dobavlenie-chasticy-spraita "mention"). Это делается следующим образом *(строка 1)*.

{% code lineNumbers="true" %}

```javascript
let original = this.getObjectByName( 'Sprite' );

let particles = [];
for (let i = 0; i < 100; i++) {
    let particle = original.clone();
    particle.userData.velocity = new THREE.Vector3();
    scene.add(particle);
    particles.push(particle);
}

function update() {
    let particle = particles.shift();
    particles.push(particle);
    
    let velocity = particle.userData.velocity;
    velocity.x = Math.random() * 0.1 - 0.05;
    velocity.y = Math.random() * 0.1 + 0.1;
    velocity.z = Math.random() * 0.1 - 0.05;
    for (let i = 0; i < particles.length; i++) {
        let particle = particles[i];
        let velocity = particle.userData.velocity;
        velocity.y -= 0.0098;
        particle.position.add(velocity);
        if (particle.position.y < 0) {
            particle.position.y = 0;
            velocity.y = -velocity.y;
            velocity.multiplyScalar(0.6);
        }
    }
}
```

{% endcode %}

Все готово! Теперь нужно импортировать сцену в [простой редактор](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/s-chego-nachat/obzor-redaktora).

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

Для импорта сцены, нажмите **File** → **Publish**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FLqlP8aZLiLsr7Hjls0lV%2FExample_9.jpg?alt=media\&token=4851fe65-45e7-4610-b680-cc7e9112e39e)

После этого начнется загрузка архива.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FCwqL4IF2Db3BHMyb6R1u%2FExample_10.jpg?alt=media\&token=339852b0-8afa-44bb-bdcc-e53605dfd826)

Данный архив нужно разархивировать. После, зайти в папку.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FUT9XsyNb4jF34bTNO1CO%2FExample_11.jpg?alt=media\&token=1a0c3df9-f391-40fa-8a50-63bed0f26454)

Здесь нам нужен файл app.js.&#x20;

{% hint style="danger" %}
ВАЖНО: Для того, чтобы не возникало конфликта, переименуйте файл app.js, на любой другое название. Например, mySceneInProEditor.js.&#x20;

При каждом импорте старайтесь делать уникальное название для файла, для избежать возникновения ошибок.
{% endhint %}

Далее, нужно пройти в простой редактор и создать проект, где будет использоваться данная сцена.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FAkJTgLl35NU75n7Gc9fA%2Fimage.png?alt=media\&token=e298e482-9a90-42d8-83da-356fe238048e)

Далее, нужно добавить сделанную сцену в редактор. Нам нужен пункт **Json MAE**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F5JSzRNPH7hJmjc6AcWDh%2FExampleProEditor_1.jpg?alt=media\&token=836f4a0f-d1ac-4593-92a8-e7265146a936)

Добавляем созданный json-файл.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FMDF8dC17KwO5s8EmLXsj%2Fimage.png?alt=media\&token=01dc929d-7526-42a1-bf83-b65e6dcd2e76)

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

Так же, обязательно удалите все элементы освещения в простом редакторе, так как мы уже настроили освещение в [продвинутом редакторе](https://dashboard.mywebar.com/mae-editor/).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FMWh9QeteliO6pK1Ra74o%2Fimage.png?alt=media\&token=ff46143a-142c-41c4-8ce4-3c93ad5c143a)

Проект готов, ниже представлен json-файл сделанной сцены.

{% file src="<https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FfwwsreMymew1LwRg58Rk%2FmySceneInProEditor.json?alt=media&token=2e79f2d8-9413-4493-888a-744ee4e64cc1>" %}