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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);
}

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

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

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

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);
}

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

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

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

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);
        }
    }
}

ВАЖНО: Инициализация таких элементов, как camera, renderer и scene выполняется автоматически при запуске сцены. Именно поэтому их присутствие в коде не будет выполнено и выдаст ошибку.

В пункте Добавление объектов мы добавили частицу (строки 5-13) и свет (строки 1-3), поэтому их так же нужно удалить.

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);
        }
    }
}

Нужно сказать редактору, где находится наша частица, добавленная в главе Добавление частицы (спрайта). Это делается следующим образом (строка 1).

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);
        }
    }
}

Все готово! Теперь нужно импортировать сцену в простой редактор.

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

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

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

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

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

ВАЖНО: Для того, чтобы не возникало конфликта, переименуйте файл app.js, на любой другое название. Например, mySceneInProEditor.js.

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

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

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

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

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

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

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

3KB

mySceneInProEditor.json

Open