# Particle Creation In The Pro Editor

In this article, I will show you how to create such a scene in the [advanced editor](https://dashboard.mywebar.com/mae-editor/).

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

To create animation, you need to go into the [**editor**](https://dashboard.mywebar.com/mae-editor/) itself and create a new project (so that the editor is empty).

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2FOVGAYgzGJD0dRvdU6mrk%2Fimage.png?alt=media\&token=0d64f33b-da67-44d9-8dce-4fccb7cb1467)

Next, you need to create a script linked to the scene.

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2Fax1k5SM8PotjmF3Duy9v%2Fimage.png?alt=media\&token=83065ccd-b39e-46b6-bc81-c863e5237b39)

To switch to edit mode, click the <mark style="color:blue;">**Edit**</mark> button.

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2FzTPMGZ33zUqHdnPeHRts%2Fimage.png?alt=media\&token=5dc94bd3-932a-4f14-b76f-78cdca4b0e6b)

The entire code of the scene will be written in the opened text editor.

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2FCIihjzVB3uiPS7KQb5DD%2Fimage.png?alt=media\&token=b9f96d4f-f361-4ec8-84ee-f9593f12fe5b)

The first step is to create the **init()** function, this function is executed when the scene starts.

```
function init() {

}
```

Inside this function, we'll put [lightning](https://learn.mywebar.com/sozdanie-proektov-webar/dobavlenie-obektov#istochniki-sveta) of the scene. I will add five[ ](https://learn.mywebar.com/sozdanie-proektov-webar/dobavlenie-obektov#istochniki-sveta)[light sources](https://learn.mywebar.com/sozdanie-proektov-webar/dobavlenie-obektov#istochniki-sveta): filling, directional, and three spot lights *(strings 3-16)*.

```
function init() {

   	let ambientLight = new THREE.AmbientLight(0x555555);
	this.add(ambientLight);
	let directionalLight = new THREE.DirectionalLight(0xff8c19);
	directionalLight.position.set(0,0,1);
	this.add(directionalLight);
	let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
	orangeLight.position.set(200,300,100);
	this.add(orangeLight);
	let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
	redLight.position.set(100,300,100);
	this.add(redLight);
	let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
	blueLight.position.set(300,300,200);
	this.add(blueLight);
	
}
```

The next step is to add directly the piece of fog itself. For this, I will use the following image uploaded to Dropbox.

​![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2FdAAxDRN7QgBZV71ihOST%2Fimage.png?alt=media\&token=7cc26f61-e722-4ecd-847e-5cd4b17fc8c9)​

Now, we have to create a plane and use this image as a texture.

To do this, use a special THREE.js class called the loader (**loader**).​

{% hint style="warning" %}
Loading various objects using the loader has some limitations.

For information on how to properly load objects, read[ ](https://learn.mywebar.com/pro-editor/tekushie-ogranicheniya/zagruzka-obektov-s-pomoshyu-klassa-loader)[**Loading the objects using loader class**](https://mywebar.gitbook.io/mywebar-knowledge-base/pro-editor/code-placement-requirements/loading-objects-using-the-basic-class-loader)**.**
{% endhint %}

Add a loader before the function **init()** *(string 1)*.

```
let loader = new THREE.TextureLoader();

function init() {

   	let ambientLight = new THREE.AmbientLight(0x555555);
	this.add(ambientLight);
	let directionalLight = new THREE.DirectionalLight(0xff8c19);
	directionalLight.position.set(0,0,1);
	this.add(directionalLight);
	let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
	orangeLight.position.set(200,300,100);
	this.add(orangeLight);
	let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
	redLight.position.set(100,300,100);
	this.add(redLight);
	let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
	blueLight.position.set(300,300,200);
	this.add(blueLight);
	
}
```

Now it is necessary to create the geometry and material for the future fog particle *(strings 20-26)*. The geometry is a plane **PlaneBufferGeometry** size 500\*500. The material is **MeshLamberMaterial**, where the parameters are passed: **map** — fog texture, **transparent** — transparency (works only for **.png**), **depthWrite** — depth check (removed to prevent overlapping artifacts), **side** — material on both sides of the plane.

```
let loader = new THREE.TextureLoader();

function init() {

   	let ambientLight = new THREE.AmbientLight(0x555555);
	this.add(ambientLight);
	let directionalLight = new THREE.DirectionalLight(0xff8c19);
	directionalLight.position.set(0,0,1);
	this.add(directionalLight);
	let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
	orangeLight.position.set(200,300,100);
	this.add(orangeLight);
	let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
	redLight.position.set(100,300,100);
	this.add(redLight);
	let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
	blueLight.position.set(300,300,200);
	this.add(blueLight);
	
	let cloudGeo = new THREE.PlaneBufferGeometry(500, 500);
	let cloudMaterial = new THREE.MeshLambertMaterial({
		map: loader.load("https://dl.dropboxusercontent.com/s/4wvy8q8eyws4kpf/smoke-1.png?dl=1"),
		transparent: true,
		depthWrite: false,
		side: THREE.DoubleSide
	});
	
}
```

Since we are creating a huge foggy area, we need a lot of similar planes with pieces of fog. Therefore, next, a loop that will create an array of particles *(strings 28-44)* has to be added. Also, before declaring the function, an array where all the fog particles will be added *(string 2)* needs to be created.

```
let loader = new THREE.TextureLoader();
let cloudParticles = [];

function init() {

   	let ambientLight = new THREE.AmbientLight(0x555555);
	this.add(ambientLight);
	let directionalLight = new THREE.DirectionalLight(0xff8c19);
	directionalLight.position.set(0,0,1);
	this.add(directionalLight);
	let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
	orangeLight.position.set(200,300,100);
	this.add(orangeLight);
	let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
	redLight.position.set(100,300,100);
	this.add(redLight);
	let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
	blueLight.position.set(300,300,200);
	this.add(blueLight);
	
	let cloudGeo = new THREE.PlaneBufferGeometry(500, 500);
	let cloudMaterial = new THREE.MeshLambertMaterial({
		map: loader.load("https://dl.dropboxusercontent.com/s/4wvy8q8eyws4kpf/smoke-1.png?dl=1"),
		transparent: true,
		depthWrite: false,
		side: THREE.DoubleSide
	});
	
	for(let i=0; i < 50; i++) {
		
		let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
		cloud.position.set(
			Math.random() * 800 - 400,
			500,
			Math.random() * 500 - 500
		);
		cloud.rotation.x = 1.16;
		cloud.rotation.y = -0.12;
		cloud.rotation.z = Math.random() * 2 * Math.PI;
		cloud.material.opacity = 0.55;
		cloudParticles.push(cloud);
		this.add(cloud);
		
	}
	
}
```

What have we done? We create a mesh *(string 30)*, then we set a random position for each particle so that the fog is not in one small point *(strings 31-35)*, then we rotate the planes a little *(strings 36-38)* and add opacity *(string 39)*. After all that, we add the created particle both to the array and to the scene.

This cycle is repeated 50 times, due to which 50 particles are created.

The script made creates fog over the scene, so you need to turn the camera towards it *(strings 6-9).*

```
let loader = new THREE.TextureLoader();
let cloudParticles = [];

function init() {
	
	camera.position.z = 1;
	camera.rotation.x = 1.16;
	camera.rotation.y = -0.12;
	camera.rotation.z = 0.27;

   	let ambientLight = new THREE.AmbientLight(0x555555);
	this.add(ambientLight);
	let directionalLight = new THREE.DirectionalLight(0xff8c19);
	directionalLight.position.set(0,0,1);
	this.add(directionalLight);
	let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
	orangeLight.position.set(200,300,100);
	this.add(orangeLight);
	let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
	redLight.position.set(100,300,100);
	this.add(redLight);
	let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
	blueLight.position.set(300,300,200);
	this.add(blueLight);
	
	let cloudGeo = new THREE.PlaneBufferGeometry(500, 500);
	let cloudMaterial = new THREE.MeshLambertMaterial({
		map: loader.load("https://dl.dropboxusercontent.com/s/4wvy8q8eyws4kpf/smoke-1.png?dl=1"),
		transparent: true,
		depthWrite: false,
		side: THREE.DoubleSide
	});
	
	for(let i=0; i < 50; i++) {
		
		let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
		cloud.position.set(
			Math.random() * 800 - 400,
			500,
			Math.random() * 500 - 500
		);
		cloud.rotation.x = 1.16;
		cloud.rotation.y = -0.12;
		cloud.rotation.z = Math.random() * 2 * Math.PI;
		cloud.material.opacity = 0.55;
		cloudParticles.push(cloud);
		this.add(cloud);
		
	}
	
}
```

{% hint style="info" %}
Rotation of the camera (camera.rotation.x and the like) will not work in augmented reality, it is only needed to view the resulting fog.

Also, you can change the very arrangement of the particles by changing the parameters in strings 32 - 36.
{% endhint %}

Now, if we click the <mark style="color:blue;">**Play**</mark> button located on the top panel, we will see the fog.

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2F0Ykk8dNtjE0oVInDgegq%2Fimage.png?alt=media\&token=be7dce83-2608-420e-b3ae-255237968046)

The fog will be static. In order for it to start moving as in the example above, you need to create an **update()** function and add the rotation of each particle there *(strings 53-59).*

```
let loader = new THREE.TextureLoader();
let cloudParticles = [];

function init() {
	
	camera.position.z = 1;
	camera.rotation.x = 1.16;
	camera.rotation.y = -0.12;
	camera.rotation.z = 0.27;

   	let ambientLight = new THREE.AmbientLight(0x555555);
	this.add(ambientLight);
	let directionalLight = new THREE.DirectionalLight(0xff8c19);
	directionalLight.position.set(0,0,1);
	this.add(directionalLight);
	let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
	orangeLight.position.set(200,300,100);
	this.add(orangeLight);
	let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
	redLight.position.set(100,300,100);
	this.add(redLight);
	let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
	blueLight.position.set(300,300,200);
	this.add(blueLight);
	
	let cloudGeo = new THREE.PlaneBufferGeometry(500, 500);
	let cloudMaterial = new THREE.MeshLambertMaterial({
		map: loader.load("https://dl.dropboxusercontent.com/s/4wvy8q8eyws4kpf/smoke-1.png?dl=1"),
		transparent: true,
		depthWrite: false,
		side: THREE.DoubleSide
	});
	
	for(let i=0; i < 50; i++) {
		
		let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
		cloud.position.set(
			Math.random() * 800 - 400,
			500,
			Math.random() * 500 - 500
		);
		cloud.rotation.x = 1.16;
		cloud.rotation.y = -0.12;
		cloud.rotation.z = Math.random() * 2 * Math.PI;
		cloud.material.opacity = 0.55;
		cloudParticles.push(cloud);
		this.add(cloud);
		
	}
	
}

function update() { 

	cloudParticles.forEach(p => { 
		p.rotation.z -= 0.001; 
	}); 
	
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mywebar.gitbook.io/mywebar-knowledge-base/pro-editor/current-restrictions/particle-creation-in-the-pro-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.