An Example Of Integration Of A Ready-Made Script

In this article I will tell you how to transfer this script, made in pure THREE.js, to the advanced editor.

Project creation

First, you need to go to the advanced editor.

Next, you need to create a new scene (so that there are no unnecessary objects on the scene) by clicking on File → New.

Adding objects

For starters, look at the code in the example above. You will notice that two objects are added to the scene: a sprite particle and a light source.

Adding a light source

The first step is to add a point light sour. To add it, click Add → Point Light on the top panel.

Then, you can slightly raise the source, as is done in the script above.

Adding a part (sprite)

To add a sprite, click Add → Sprite.

Then, the added sprite should be reduced in size by changing the Scale parameter.

Importing a script

Now, after all the objects are in the scene, you can import the script. Initially, the script looks like following:

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

The first step is to add a script by linking it to the scene.

Next, by clicking Edit, open the script code and paste the code that you need to import (in this case, this is the code shown above).

First of all, you have to rename the animation function animate() → update() (string 37) and remove the call to this function (string 35), as well as remove the method requestAnimationFrame(animate); (string 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);
}

The advanced editor uses a built-in update() function, which works in the same way as the animate() function calls each frame.

Also, the function is called by the editor itself when the scene starts, which is why there is no need to call the init() and update() functions.

Then, you need to remove the creation of the renderer (including setting it up and calling it in the function animate() → update()) (strings 1-3, 55), camera (strings 7-11) and scene (string 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);
        }
    }
}

IMPORTANT: Elements such as camera, renderer and scene are initialized automatically when the scene starts. That is why their presence in the code will fail and return an error.

In the Adding object section, we added a particle (strings 5-13) and lighting (strings 1-3), so they also need to be removed.

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

We need to tell the editor where our particle is, added in the chapter Adding a particle (sprite). This is done as follows (string 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);
        }
    }
}

Everything is ready! Now you need to import the scene into the simple editor.

Importing a project into the simple editor

To import a scene, click File → Publish.

After that, the download of the archive will begin.

This archive must be unzipped. Afterwards, go to the folder.

Here we need the app.js file.

IMPORTANT: To avoid conflicts, rename the app.js file to any other name. For example, mySceneInProEditor.js.

For each import, try to give a unique name to the file to avoid errors.

Next, you need to go to the simple editor and create a project where this scene will be used.

Next, add the created scene to the editor. We need a Json MAE item.

Add the created json file.

The last step is to properly scale the scene with an advanced editor (it may be too large, so you just need to reduce Scale).

Also, be sure to remove all lighting elements in the simple editor, since we have already set up the lighting in the advanced editor.