In this article, I will show you how to create such a scene in the .
To create animation, you need to go into the itself and create a new project (so that the editor is empty).
Next, you need to create a script linked to the scene.
To switch to edit mode, click the Editbutton.
The entire code of the scene will be written in the opened text editor.
The first step is to create the init() function, this function is executed when the scene starts.
function init() {
}
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.
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).​
Loading various objects using the loader has some limitations.
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);
}
}
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.
Now, if we click the Playbutton located on the top panel, we will see the fog.
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;
});
}
Inside this function, we'll put of the scene. I will add five: filling, directional, and three spot lights (strings 3-16).
​​
For information on how to properly load objects, read.
