# [threejs-journey] Part 4

Difficulty Hard

## Introduction

Let’s use what we’ve learned to create a haunted house. We will only use Three.js primitives as geometries, the textures in the `/static/textures/` folder, and one or two new features.

We will create an elementary house composed of walls, a roof, a door, and some bushes. We will also produce graves in the garden. Instead of visible ghosts made of sheets, we will simply use multicolor lights floating around and passing through the walls and the floor.

## Tips for measurements

One beginner mistake we always make when creating something using primitives is using random measures. One unit in Three.js can mean anything you want.

Suppose you are creating a considerable landscape to fly above. In that case, you might think of one unit as one kilometer. If you are building a house, you might think of one unit as one meter, and if you are making a marble game, you might think of one unit as one centimeter.

Having a specific unit ratio will help you create geometries. Let’s say you want to make the door. You know that a door is slightly taller than you, so it should reach around 2 meters.

For those using imperials units, you’ll have to do the conversion.

## Setup

The starter is only composed of a floor, a sphere, some lights (way too intense for a haunted house), and shadows aren’t even working.

We will have to create the house all by ourselves, tweak the current lights for a better ambiance, add the shadows, and the rest.

## The house

First, let’s remove the sphere and create a tiny house. We can leave the floor.

Instead of putting every object composing that house in the scene, we will first create a container just in case we want to move or scale the whole thing:

``````// House container
const house = new THREE.Group()
``````

JavaScript

Copy

Then we can create the walls with a simple cube and add it to the `house` . Don’t forget to move the walls up on the `y` axis; otherwise it will be half inside the floor:

``````const walls = new THREE.Mesh(
new THREE.BoxBufferGeometry(4, 2.5, 4),
new THREE.MeshStandardMaterial({ color: '#ac8e82' })
)
walls.position.y = 1.25
``````

JavaScript

Copy

We chose `2.5` for the height because it would seem like a normal height for the ceiling. We also chose `'#ac8e82'` for the color, but it’s temporary, and we will replace those colors with textures later.

For the roof, we want to make a pyramid shape. The problem is that Three.js doesn’t have this kind of geometry. But if you start from a cone and reduce the number of sides to `4` , you’ll get a pyramid. Sometimes you just have to deflect basic features usages:

``````// Roof
const roof = new THREE.Mesh(
new THREE.ConeBufferGeometry(3.5, 1, 4),
new THREE.MeshStandardMaterial({ color: '#b35f45' })
)
roof.rotation.y = Math.PI * 0.25
roof.position.y = 2.5 + 0.5
``````

JavaScript

Copy

Finding the right position and the right rotation might be a little hard. Take your time, try to figure out the logic behind the values, and don’t forget that `Math.PI` is your friend.

As you can see, we left `2.5 + 0.5` . We could have written `3` but it’s sometime better to visualize the logic behind the value. `2.5` , because the roof walls are `2.5` units high and `0.5` because the cone is `1` unit high (and we need to move it up to half its height).

We will use a simple plane for the door as we are going to use the beautiful door texture we used in a previous lesson.

``````// Door
const door = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2, 2),
new THREE.MeshStandardMaterial({ color: '#aa7b7b' })
)
door.position.y = 1
door.position.z = 2 + 0.01
``````

JavaScript

Copy

We don’t know yet if the plane has the right size, but we can fix that later when we have the textures working.

As you can see, we move the door on the `z` axis to stick it to the wall but we also added `0.01` units. If you don’t add this small value, you’ll have a bug we already saw in a previous lesson called z-fighting. Z-fighting happens when you have two faces in the same position (or very close). The GPU doesn’t know which one is closer than the other, and you get some strange visual pixel fighting.

Let’s add some bushes. Instead of creating one geometry for each bush, we will create only one, and all meshes will share it. The result will be visually the same, but we’ll get a performance improvement. We can do the same with the material.

``````// Bushes
const bushGeometry = new THREE.SphereBufferGeometry(1, 16, 16)
const bushMaterial = new THREE.MeshStandardMaterial({ color: '#89c854' })

const bush1 = new THREE.Mesh(bushGeometry, bushMaterial)
bush1.scale.set(0.5, 0.5, 0.5)
bush1.position.set(0.8, 0.2, 2.2)

const bush2 = new THREE.Mesh(bushGeometry, bushMaterial)
bush2.scale.set(0.25, 0.25, 0.25)
bush2.position.set(1.4, 0.1, 2.1)

const bush3 = new THREE.Mesh(bushGeometry, bushMaterial)
bush3.scale.set(0.4, 0.4, 0.4)
bush3.position.set(- 0.8, 0.1, 2.2)

const bush4 = new THREE.Mesh(bushGeometry, bushMaterial)
bush4.scale.set(0.15, 0.15, 0.15)
bush4.position.set(- 1, 0.05, 2.6)

``````

JavaScript

Copy

It does take too long to place and scale all these objects directly in the code. In a later lesson, we will learn how to use a 3D software to create all of this.

We won’t add too many details to the house because we must move forward, but feel free to pause and add anything you want like low walls, an alley, windows, a chimney, rocks, etc.

## The graves

Instead of placing each grave manually, we are going to create and place them procedurally.

The idea is to place the graves randomly on a circle around the house.

First, let’s create a container just in case:

``````// Graves
const graves = new THREE.Group()
``````

JavaScript

Copy

Like in the 3D Text lesson where we created multiple donuts with one geometry and one material, we are going to create one BoxBufferGeometryand one MeshStandardMaterial that will be shared amongst every graves:

``````const graveGeometry = new THREE.BoxBufferGeometry(0.6, 0.8, 0.2)
const graveMaterial = new THREE.MeshStandardMaterial({ color: '#b2b6b1' })
``````

JavaScript

Copy

Finally, let’s loop and do some mathematics to position a bunch of graves around the house.

We are going to create a random angle on a circle. Remember that a full revolution is 2 times π. Then we are going to use that angle on both a `sin(...)` and a `cos(...)` . This is how you position things on a circle when you have the angle. And finally we also multiply those `sin(...)` and `cos(...)` results by a random value because we don’t want the graves to be positioned on a perfect circle.

``````for(let i = 0; i < 50; i++)
{
const angle = Math.random() * Math.PI * 2 // Random angle
const x = Math.cos(angle) * radius        // Get the x position using cosinus
const z = Math.sin(angle) * radius        // Get the z position using sinus

// Create the mesh
const grave = new THREE.Mesh(graveGeometry, graveMaterial)

// Position
grave.position.set(x, 0.3, z)

// Rotation
grave.rotation.z = (Math.random() - 0.5) * 0.4
grave.rotation.y = (Math.random() - 0.5) * 0.4

// Add to the graves container
}
``````

JavaScript

Copy

## Lights

We have a pretty cool scene, but it’s not that scary yet.

First, let’s dim the ambient and moon lights and give those a more blue-ish color:

``````const ambientLight = new THREE.AmbientLight('#b9d5ff', 0.12)

// ...

const moonLight = new THREE.DirectionalLight('#b9d5ff', 0.12)
``````

JavaScript

Copy

We can’t see much right now. Let’s also add a warm PointLight above the door. Instead of adding this light to the scene, we can add it to the house:

``````// Door light
const doorLight = new THREE.PointLight('#ff7d46', 1, 7)
doorLight.position.set(0, 2.2, 2.7)
``````

JavaScript

Copy

## Fog

In horror movies, they always use fog. The good news is that Three.js supports it already with the Fog class.

The first parameter is the `color` , the second parameter is the `near` (how far from the camera does the fog start), and the third parameter is the `far` (how far from the camera will the fog be fully opaque).

To activate the fog, add the `fog` property to the `scene` :

``````/**
* Fog
*/
const fog = new THREE.Fog('#262837', 1, 15)
scene.fog = fog
``````

JavaScript

Copy

Not bad, but we can see a clean cut between the graves and the black background.

To fix that, we must change the clear color of the `renderer` and use the same color as the fog. Do that after instantiating the `renderer` :

``````renderer.setClearColor('#262837')
``````

JavaScript

Copy

Here’s a slightly scarier scene.

## Textures

For even more realism, we can add textures. The `textureLoader` is already in the code.

### The door

``````const doorColorTexture = textureLoader.load('/textures/door/color.jpg')
``````

JavaScript

Copy

Then we can apply all those textures to the door material. Don’t forget to add more subdivisions to the PlaneBufferGeometry, so the `displacementMap` has some vertices to move. Also, add the `uv2` attribute to the geometry for the `aoMap` as we did in the Materials lesson.

You can access the door’s geometry by using `mesh.geometry` :

``````const door = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2, 2, 100, 100),
new THREE.MeshStandardMaterial({
map: doorColorTexture,
transparent: true,
alphaMap: doorAlphaTexture,
aoMap: doorAmbientOcclusionTexture,
displacementMap: doorHeightTexture,
displacementScale: 0.1,
normalMap: doorNormalTexture,
metalnessMap: doorMetalnessTexture,
roughnessMap: doorRoughnessTexture
})
)
door.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(door.geometry.attributes.uv.array, 2))
``````

JavaScript

Copy

There you go! That’s a more realistic door.

Now that we have the textures, you realize that the door is a little too small. You can simply increase the PlaneBufferGeometry sizes:

``````// ...
new THREE.PlaneBufferGeometry(2.2, 2.2, 100, 100),
// ...
``````

JavaScript

Copy

### The walls

Let’s do the same for the walls using the textures on the `/static/textures/bricks/` folder. We don’t have as many textures as for the door, but it’s not a problem. We don’t need an alpha texture, and the wall has no metal in it, so we don’t need a metalness texture either.

``````const bricksColorTexture = textureLoader.load('/textures/bricks/color.jpg')
``````

JavaScript

Copy

Then we can update our MeshStandardMaterial for the wall. Don’t forget to remove the `color` and add the `uv2` attribute for the ambient occlusion.

``````const walls = new THREE.Mesh(
new THREE.BoxBufferGeometry(4, 2.5, 4),
new THREE.MeshStandardMaterial({
map: bricksColorTexture,
aoMap: bricksAmbientOcclusionTexture,
normalMap: bricksNormalTexture,
roughnessMap: bricksRoughnessTexture
})
)
walls.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(walls.geometry.attributes.uv.array, 2))
``````

JavaScript

Copy

### The floor

Same deal as for the walls. The grass textures are located in the `/static/textures/grass/` folder.

``````const grassColorTexture = textureLoader.load('/textures/grass/color.jpg')
``````

JavaScript

Copy

Update the MeshStandardMaterial of the floor and don’t forget to remove the `color` and add the `uv2` attribute for the ambient occlusion:

``````const floor = new THREE.Mesh(
new THREE.PlaneBufferGeometry(20, 20),
new THREE.MeshStandardMaterial({
map: grassColorTexture,
aoMap: grassAmbientOcclusionTexture,
normalMap: grassNormalTexture,
roughnessMap: grassRoughnessTexture
})
)
floor.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(floor.geometry.attributes.uv.array, 2))
``````

JavaScript

Copy

The texture is too large. To fix that, we can simply repeat each grass texture with the `repeat` property:

``````grassColorTexture.repeat.set(8, 8)
grassAmbientOcclusionTexture.repeat.set(8, 8)
grassNormalTexture.repeat.set(8, 8)
grassRoughnessTexture.repeat.set(8, 8)
``````

JavaScript

Copy

And don’t forget to change the `wrapS` and `wrapT` properties to activate the repeat:

``````grassColorTexture.wrapS = THREE.RepeatWrapping
grassAmbientOcclusionTexture.wrapS = THREE.RepeatWrapping
grassNormalTexture.wrapS = THREE.RepeatWrapping
grassRoughnessTexture.wrapS = THREE.RepeatWrapping

grassColorTexture.wrapT = THREE.RepeatWrapping
grassAmbientOcclusionTexture.wrapT = THREE.RepeatWrapping
grassNormalTexture.wrapT = THREE.RepeatWrapping
grassRoughnessTexture.wrapT = THREE.RepeatWrapping
``````

JavaScript

Copy

## Ghosts

For the ghosts, let’s keep things simple and do with what we know.

We are going to use simple lights floating around the house and passing through the ground and graves.

``````/**
* Ghosts
*/
const ghost1 = new THREE.PointLight('#ff00ff', 2, 3)

const ghost2 = new THREE.PointLight('#00ffff', 2, 3)

const ghost3 = new THREE.PointLight('#ffff00', 2, 3)
``````

JavaScript

Copy

Now we can animate them using some mathematics with a lot of trigonometry:

``````const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Ghosts
const ghost1Angle = elapsedTime * 0.5
ghost1.position.x = Math.cos(ghost1Angle) * 4
ghost1.position.z = Math.sin(ghost1Angle) * 4
ghost1.position.y = Math.sin(elapsedTime * 3)

const ghost2Angle = - elapsedTime * 0.32
ghost2.position.x = Math.cos(ghost2Angle) * 5
ghost2.position.z = Math.sin(ghost2Angle) * 5
ghost2.position.y = Math.sin(elapsedTime * 4) + Math.sin(elapsedTime * 2.5)

const ghost3Angle = - elapsedTime * 0.18
ghost3.position.x = Math.cos(ghost3Angle) * (7 + Math.sin(elapsedTime * 0.32))
ghost3.position.z = Math.sin(ghost3Angle) * (7 + Math.sin(elapsedTime * 0.5))
ghost3.position.y = Math.sin(elapsedTime * 4) + Math.sin(elapsedTime * 2.5)

// ...
}
``````

JavaScript

Copy

Activate the shadow map on the renderer:

``````renderer.shadowMap.enabled = true
``````

JavaScript

Copy

Activate the shadows on the lights that you think should cast shadows:

``````moonLight.castShadow = true
``````

JavaScript

Copy

Go through each object of your scene and decide if that object can cast and/or receive shadows:

``````walls.castShadow = true

for(let i = 0; i < 50; i++)
{
// ...
// ...
}

``````

JavaScript

Copy

The scene looks much better with these shadows, but we should optimize them anyway.

A good thing would be to go through each light, create camera helpers on the `light.shadowMap.camera` , and make sure the `near` , the `far` , the `amplitude` or the `fov` fit nicely. But instead, let’s use the following values that should be just right.

We can also reduce the shadow map render sizes to improve performances:

``````moonLight.shadow.mapSize.width = 256

// ...

// ...

// ...

// ...

// ...

``````

JavaScript

Copy

This process is long, but it’s essential. We are already flirting with performance limitations, and the haunted house might not even work at 60fps on mobile. We will see more optimization tips in a future lesson.

## Go further

That’s it for the lesson, but you can try to improve what we did. You can add new elements in the scene, replace the ghosts with real 3D ghosts by using Three.js primitives, add names on the grave, etc.

Difficulty Hard

## Introduction

Particles are precisely what you expect from that name. They are very popular and can be used to achieve various effects such as stars, smoke, rain, dust, fire, and many other things.

The good thing with particles is that you can have hundreds of thousands of them on screen with a reasonable frame rate. The downside is that each particle is composed of a plane (two triangles) always facing the camera.

Creating particles is as simple as making a Mesh. We need a geometry (ideally a BufferGeometry), a material that can handle particles (PointsMaterial), and instead of producing a Mesh we need to create a Points.

## Setup

The starter is only composed of a cube in the middle of the scene. That cube ensures that everything is working.

## First particles

Let’s get rid of our cube and create a sphere composed of particles to start.

### Geometry

You can use any of the basic Three.js geometries. For the same reasons as for the Mesh, it’s preferable to use BufferGeometries. Each vertex of the geometry will become a particle:

``````/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereBufferGeometry(1, 32, 32)
``````

JavaScript

Copy

### PointsMaterial

We need a special type of material called PointsMaterial. This material can already do a lot, but we will discover how to create our own particles material to go even further in a future lesson.

The PointsMaterial has multiple properties specific to particles like the `size` to control all particles size and the `sizeAttenuation` to specify if distant particles should be smaller than close particles:

``````// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true
})
``````

JavaScript

Copy

As always, we can also change those properties after creating the material:

``````const particlesMaterial = new THREE.PointsMaterial()
particlesMaterial.size = 0.02
particlesMaterial.sizeAttenuation = true
``````

JavaScript

Copy

### Points

Finally, we can create the final particles the same way we create a Mesh, but this time by using the Points class. Don’t forget to add it to the scene:

``````// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
``````

JavaScript

Copy

That was easy. Let’s customize those particles.

## Custom geometry

To create a custom geometry, we can start from a BufferGeometry, and add a `position` attribute as we did in the Geometries lesson. Replace the SphereBufferGeometry with custom geometry and add the `'position'` attribute as we did before:

``````// Geometry
const particlesGeometry = new THREE.BufferGeometry()
const count = 500

const positions = new Float32Array(count * 3) // Multiply by 3 because each position is composed of 3 values (x, y, z)

for(let i = 0; i < count * 3; i++) // Multiply by 3 for same reason
{
positions[i] = (Math.random() - 0.5) * 10 // Math.random() - 0.5 to have a random value between -0.5 and +0.5
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)) // Create the Three.js BufferAttribute and specify that each information is composed of 3 values
``````

JavaScript

Copy

Don’t be frustrated if you can’t pull out this code by yourself. It’s a little complex, and variables are using strange formats.

You should get a bunch of particles all around the scene. Now is an excellent time to have fun and test the limits of your computer. Try `5000` , `50000` , `500000` maybe. You can have millions of particles and still have a reasonable frame rate.

You can imagine that there are limits. On an inferior computer or a smartphone, you won’t be able to have a 60fps experience with millions of particles. We are also going to add effects that will drastically reduce the frame rate. But still, that’s quite impressive.

For now, let’s keep the count to `5000` and change the size to `0.1` :

``````const count = 5000

// ...

particlesMaterial.size = 0.1

// ...
``````

JavaScript

Copy

## Color, map and alpha map

We can change the color of all particles with the `color` property on the PointsMaterial. Don’t forget that you need to use the Color class if you’re changing this property after instancing the material:

``````particlesMaterial.color = new THREE.Color('#ff88cc')
``````

JavaScript

Copy

We can also use the `map` property to put a texture on those particles. Use the TextureLoader already in the code to load one of the textures located in `/static/textures/particles/` :

``````/**
* Textures
*/

// ...

particlesMaterial.map = particleTexture
``````

JavaScript

Copy

These textures are resized versions of the pack provided by Kenney and you can find the full pack here: https://www.kenney.nl/assets/particle-pack. But you can also create your own.

As you can see, the `color` property is changing the map, just like with the other materials.

If you look closely, you’ll see that the front particles are hiding the back particles.

We need to activate transparency with `transparent` and use the texture on the `alphaMap` property instead of the `map` :

``````// particlesMaterial.map = particleTexture
particlesMaterial.transparent = true
particlesMaterial.alphaMap = particleTexture
``````

JavaScript

Copy

Now that’s better, but we can still randomly see some edges of the particles.

That is because the particles are drawn in the same order as they are created, and WebGL doesn’t really know which one is in front of the other.

There are multiple ways of fixing this.

### Using alphaTest

The `alphaTest` is a value between `0` and `1` that enables the WebGL to know when not to render the pixel according to that pixel’s transparency. By default, the value is `0` meaning that the pixel will be rendered anyway. If we use a small value such as `0.001` , the pixel won’t be rendered if the alpha is `0` :

``````particlesMaterial.alphaTest = 0.001
``````

JavaScript

Copy

This solution isn’t perfect and if you watch closely, you can still see glitches, but it’s already more satisfying.

### Using depthTest

When drawing, the WebGL tests if what’s being drawn is closer than what’s already drawn. That is called depth testing and can be deactivated (you can comment the `alphaTest` ):

``````// particlesMaterial.alphaTest = 0.001
particlesMaterial.depthTest = false
``````

JavaScript

Copy

While this solution seems to completely fix our problem, deactivating the depth testing might create bugs if you have other objects in your scene or particles with different colors. The particles might be drawn as if they were above the rest of the scene.

Add a cube to the scene to see that:

``````const cube = new THREE.Mesh(
new THREE.BoxBufferGeometry(),
new THREE.MeshBasicMaterial()
)
``````

JavaScript

Copy

### Using depthWrite

As we said, the WebGL is testing if what’s being drawn is closer than what’s already drawn. The depth of what’s being drawn is stored in what we call a depth buffer. Instead of not testing if the particle is closer than what’s in this depth buffer, we can tell the WebGL not to write particles in that depth buffer (you can comment the `depthTest` ):

``````// particlesMaterial.alphaTest = 0.001
// particlesMaterial.depthTest = false
particlesMaterial.depthWrite = false
``````

JavaScript

Copy

In our case, this solution will fix the problem with almost no drawback. Sometimes, other objects might be drawn behind or in front of the particles depending on many factors like the transparency, in which order you added the objects to your scene, etc.

We saw multiple techniques, and there is no perfect solution. You’ll have to adapt and find the best combination according to the project.

## Blending

Currently, the WebGL draws the pixels one on top of the other.

By changing the `blending` property, we can tell the WebGL not only to draw the pixel, but also to add the color of that pixel to the color of the pixel already drawn. That will have a saturation effect that can look amazing.

To test that, simply change the `blending` property to `THREE.AdditiveBlending` (keep the `depthWrite` property):

``````// particlesMaterial.alphaTest = 0.001
// particlesMaterial.depthTest = false
particlesMaterial.depthWrite = false
``````

JavaScript

Copy

Add more particles (let’s say `20000` ) to better enjoy this effect.

But be careful, this effect will impact the performances, and you won’t be able to have as many particles as before at 60fps.

Now, we can remove the `cube` .

## Different colors

We can have a different color for each particle. We first need to add a new attribute named `color` as we did for the position. A color is composed of red, green, and blue (3 values), so the code will be very similar to the `position` attribute. We can actually use the same loop for these two attributes:

``````const positions = new Float32Array(count * 3)
const colors = new Float32Array(count * 3)

for(let i = 0; i < count * 3; i++)
{
positions[i] = (Math.random() - 0.5) * 10
colors[i] = Math.random()
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
``````

JavaScript

Copy

Be careful with singulars and plurals.

To activate those vertex colors, simply change the `vertexColors` property to `true` :

``````particlesMaterial.vertexColors = true
``````

JavaScript

Copy

The main color of the material still affects these vertex colors. Feel free to change that color or even comment it.

``````// particlesMaterial.color = new THREE.Color('#ff88cc')
``````

JavaScript

Copy

## Animate

There are multiple ways of animating particles.

### By using the points as an object

Because the Points class inherits from the Object3D class, you can move, rotate and scale the points as you wish.

Rotate the particles in the `tick` function:

``````const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update particles
particles.rotation.y = elapsedTime * 0.2

// ...
}
``````

JavaScript

Copy

While this is already cool, we want more control over each particle.

### By changing the attributes

Another solution would be to update each vertex position separately. This way, vertices can have different trajectories. We are going to animate the particles as if they were floating on waves but first, let’s see how we can update the vertices.

Start by commenting the previous rotation we did on the whole `particles` :

``````const tick = () =>
{
// ...

// particles.rotation.y = elapsedTime * 0.2

// ...
}
``````

JavaScript

Copy

To update each vertex, we have to update the right part in the `position` attribute because all the vertices are stored in this one dimension array where the first 3 values correspond to the `x` , `y` and `z` coordinates of the first vertex, then the next 3 values correspond to the `x` , `y` and `z` of the second vertex, etc.

We only want the vertices to move up and down, meaning that we are going to update the `y` axis only. Because the `position` attribute is a one dimension array, we have to go through it 3 by 3 and only update the second value which is the `y` coordinate.

Let’s start by going through each vertices:

``````const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3
}

// ...
}
``````

JavaScript

Copy

Here, we chose to have a simple `for` loop that goes from `0` to `count` and we created a `i3` variable inside that goes 3 by 3 simply by multiplying `i` by 3.

The easiest way to simulate waves movement is to use a simple sinus . First, we are going to update all vertices to go up and down on the same frequency.

The `y` coordinate can be access in the array at the index `i3 + 1` :

``````const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3

particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime)
}

// ...
}
``````

JavaScript

Copy

Unfortunately, nothing is moving. The problem is that Three.js has to be notified that the geometry changed. To do that, we have to set the `needsUpdate` to `true` on the `position` attribute once we are done updating the vertices:

``````const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3

particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime)
}
particlesGeometry.attributes.position.needsUpdate = true

// ...
}
``````

JavaScript

Copy

All the particles should be moving up and down like a plane.

That’s a good start and we are almost there. All we need to do now is apply an offset to the sinus between the particles so that we get that wave shape.

To do that, we can use the `x` coordinate. And to get this value we can use the same technique that we used for the `y` coordinate but instead of `i3 + 1` , it’s just `i3` :

``````const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
let i3 = i * 3

const x = particlesGeometry.attributes.position.array[i3]
particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime + x)
}
particlesGeometry.attributes.position.needsUpdate = true

// ...
}
``````

JavaScript

Copy

You should get beautiful waves of particles. Unfortunately, you should avoid this technique. If we have `20000` particles, we are going through each one, calculating a new position, and updating the whole attribute on each frame. That can work with a small number of particles, but we want millions of particles.

### By using a custom shader

To update these millions of particles on each frame with a good framerate, we need to create our own material with our own shaders. But shaders are for a later lesson.

Difficulty Hard

## Introduction

Now that we know how to use particles, we could create something cool like a Galaxy. But instead of producing just one galaxy, let’s do a galaxy generator.

For that, we’re going to use Dat.GUI to let the user tweak the parameters and generate a new galaxy on each change.

## Setup

The starter is only composed of a cube in the middle of the scene. It ensures that everything is working.

## Base particles

First, remove the cube and create a `generateGalaxy` function. Each time we call that function, we will remove the previous galaxy (if there is one) and create a new one.

We can call that function immediately:

``````/**
* Galaxy
*/
const generateGalaxy = () =>
{

}

generateGalaxy()
``````

JavaScript

Copy

We can create an object that will contain all the parameters of our galaxy. Create this object before the `generateGalaxy` function. We will populate it progressively and also add each parameter to Dat.GUI :

``````const parameters = {}
``````

JavaScript

Copy

In our `generateGalaxy` function, we’re going to create some particles just to make sure that everything is working. We can start with the geometry and add the particles count to the parameters:

``````const parameters = {}
parameters.count = 1000

const generateGalaxy = () =>
{
/**
* Geometry
*/
const geometry = new THREE.BufferGeometry()

const positions = new Float32Array(parameters.count * 3)

for(let i = 0; i < parameters.count; i++)
{
const i3 = i * 3

positions[i3    ] = (Math.random() - 0.5) * 3
positions[i3 + 1] = (Math.random() - 0.5) * 3
positions[i3 + 2] = (Math.random() - 0.5) * 3
}

geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
}
generateGalaxy()
``````

JavaScript

Copy

That’s the same code as before, but we handled the loop a little differently.

We can now create the material by using the PointsMaterial class. This time again, we can add tweaks to the `parameters` object:

``````parameters.size = 0.02

const generateGalaxy = () =>
{
// ...

/**
* Material
*/
const material = new THREE.PointsMaterial({
size: parameters.size,
sizeAttenuation: true,
depthWrite: false,
})
}
``````

JavaScript

Copy

Finally, we can create the points by using the Points class and add it to the scene:

``````const generateGalaxy = () =>
{
// ...

/**
* Points
*/
const points = new THREE.Points(geometry, material)
}
``````

JavaScript

Copy

You should see few points floating around.

## Tweaks

We have already two parameters, `count` and `size` . Let’s add them to the Dat.GUI instance that we already created at the start of the code. As you can imagine, we must add those tweaks after creating the parameters:

``````parameters.count = 1000
parameters.size = 0.02

``````

JavaScript

Copy

You should have two new ranges in the tweaks but changing them doesn’t generate a new galaxy. To generate a new galaxy, you must listen to the change event. More precisely to the `finishChange` event to prevent generating galaxies while you are drag and dropping the range value:

``````gui.add(parameters, 'count').min(100).max(1000000).step(100).onFinishChange(generateGalaxy)
``````

JavaScript

Copy

This code won’t work because the `generateGalaxy` doesn’t exist yet. You must move those tweaks after the `generateGalaxy` function.

Be careful, we still have a problem, and if you play too much with the tweaks, your computer will start to heat. It’s because we didn’t destroy the previously created galaxy. We are creating galaxies one above the other.

To make things right, we must first move the `geometry` , `material` and `points` variables outside the `generateGalaxy` .

``````let geometry = null
let material = null
let points = null

const generateGalaxy = () =>
{
// ...

geometry = new THREE.BufferGeometry()

// ...

material = new THREE.PointsMaterial({
size: parameters.size,
sizeAttenuation: true,
depthWrite: false,
})

// ...

points = new THREE.Points(geometry, material)

// ...
}
``````

JavaScript

Copy

Then, before assigning those variables, we can test if they already exist. If so, we can call the `dispose()` method on the geometry and the material. Then remove the points from the scene with the `remove()` method:

``````const generateGalaxy = () =>
{
// Destroy old galaxy
if(points !== null)
{
geometry.dispose()
material.dispose()
scene.remove(points)
}

// ...
}
``````

JavaScript

Copy

Instead of using a texture that can create depth and alpha issues as we saw in the previous lesson, we will just let the default square shape. Don’t worry; there will be so many small particles that we won’t notice that they are squares.

Now that we can estimate how much particles we can have and their size, let’s update the parameters:

``````parameters.count = 100000
parameters.size = 0.01
``````

JavaScript

Copy

## Shape

Galaxies can have several different shapes. We will focus on the spirals one. There are many ways to position the particles to create a galaxy. Feel free to try your way before testing the lesson way.

First, let’s create a `radius` parameter:

``````parameters.radius = 5

// ...

``````

JavaScript

Copy

Each star will be positioned accordingly to that radius. If the radius is `5` , the stars will be positioned at a distance from `0` to `5` . For now, let’s position all the particles on a straight line:

``````    for(let i = 0; i < parameters.count; i++)
{
const i3 = i * 3

positions[i3 + 1] = 0
positions[i3 + 2] = 0
}
``````

JavaScript

Copy

### Branches

Spin galaxies always seem to have at least two branches, but it can have much more.

Create a `branches` parameter:

``````parameters.branches = 3

// ...

``````

JavaScript

Copy

We can use `Math.cos(...)` and `Math.sin(...)` to position the particles on those branches. We first calculate an angle with the modulo ( `%` ), divide the result by the branches count parameter to get an angle between `0` and `1` , and multiply this value by `Math.PI * 2` to get an angle between `0` and a full circle. We then use that angle with `Math.cos(...)` and `Math.sin(...)` for the `x` and the `z` axis and we finally multiply by the radius:

``````    for(let i = 0; i < parameters.count; i++)
{
const i3 = i * 3

const branchAngle = (i % parameters.branches) / parameters.branches * Math.PI * 2

positions[i3    ] = Math.cos(branchAngle) * radius
positions[i3 + 1] = 0
positions[i3 + 2] = Math.sin(branchAngle) * radius
}
``````

JavaScript

Copy

### Spin

Create a `spin` parameter:

``````parameters.spin = 1

// ...

``````

JavaScript

Copy

Then we can multiply the `spinAngle` by that `spin` parameter. To put it differently, the further the particle is from the center, the more spin it’ll endure:

``````    for(let i = 0; i < parameters.count; i++)
{
const i3 = i * 3

const spinAngle = radius * parameters.spin
const branchAngle = (i % parameters.branches) / parameters.branches * Math.PI * 2

positions[i3    ] = Math.cos(branchAngle + spinAngle) * radius
positions[i3 + 1] = 0
positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius
}
``````

JavaScript

Copy

## Randomness

Those particles are perfectly aligned. We need randomness. But what we truly need is spread stars on the outside and more condensed star on the inside.

Create a `randomness` parameter:

``````parameters.randomness = 0.2

// ...

``````

JavaScript

Copy

Now create a random value for each axis with `Math.random()` , multiply it by the `radius` and then add those values to the `postions` :

``````    for(let i = 0; i < parameters.count; i++)
{
const i3 = i * 3

const spinAngle = radius * parameters.spin
const branchAngle = (i % parameters.branches) / parameters.branches * Math.PI * 2

const randomX = (Math.random() - 0.5) * parameters.randomness * radius
const randomY = (Math.random() - 0.5) * parameters.randomness * radius
const randomZ = (Math.random() - 0.5) * parameters.randomness * radius

positions[i3    ] = Math.cos(branchAngle + spinAngle) * radius + randomX
positions[i3 + 1] = randomY
positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius + randomZ
}
``````

JavaScript

Copy

It’s working but it’s not very convincing, right? And we can still see the pattern. To fix that, we can use `Math.pow()` to crush the value. The more power you apply, the closest to `0` it will get. The problem is that you can’t use a negative value with `Math.pow()` . What we will do is calculate the power then multiply it by `-1` randomly.

First create the power parameter:

``````parameters.randomnessPower = 3

// ...

``````

JavaScript

Copy

Then apply the power with `Math.pow()` and multiply it by `-1` randomly:

``````        const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
``````

JavaScript

Copy

## Colors

For a better effect, we need to add some colors to our creation. A cool thing would be to have different colors inside the galaxy and on its edges.

``````parameters.insideColor = '#ff6030'
parameters.outsideColor = '#1b3984'

// ...

``````

JavaScript

Copy

We’re going to provide a color for each vertex. We must active the `vertexColors` on the material:

``````    material = new THREE.PointsMaterial({
size: parameters.size,
sizeAttenuation: true,
depthWrite: false,
vertexColors: true
})
``````

JavaScript

Copy

Then add a `color` attribute on our geometry just like we added the `position` attribute. For now, we’re not using the `insideColor` and `outsideColor` parameters:

``````    geometry = new THREE.BufferGeometry()

const positions = new Float32Array(parameters.count * 3)
const colors = new Float32Array(parameters.count * 3)

for(let i = 0; i < parameters.count; i++)
{
// ...

colors[i3    ] = 1
colors[i3 + 1] = 0
colors[i3 + 2] = 0
}

geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
``````

JavaScript

Copy

You should get a red galaxy.

To use the colors from the parameters, we first need to create a Color instance for each one. We have to do it inside the `generateGalaxy` function for reasons you’ll understand in a bit:

``````const generateGalaxy = () =>
{
// ...

const colorInside = new THREE.Color(parameters.insideColor)
const colorOutside = new THREE.Color(parameters.outsideColor)

// ...
}
``````

JavaScript

Copy

Inside the loop function, we want to mix these colors into a third color. That mix depends on the distance from the center of the galaxy. If the particle is at the center of the galaxy, it’ll have the `insideColor` and the further it gets from the center, the more it will get mixed with the `outsideColor` .

Instead of creating a third Color, we are going to clone the `colorInside` and then use the `lerp(...)` method to interpolate the color from that base color to another one. The first parameter of `lerp(...)` is the other color, and the second parameter is a value between `0` and `1` . If it’s `0` , the color will keep its base value, and if it’s `1` the result color will be the one provided. We can use the `radius` divided by the radius parameter:

``````        const mixedColor = colorInside.clone()
``````

JavaScript

Copy

We can then use the `r` , `g` and `b` properties in our `colors` array:

``````        colors[i3    ] = mixedColor.r
colors[i3 + 1] = mixedColor.g
colors[i3 + 2] = mixedColor.b
``````

JavaScript

Copy

And here you have a beautiful galaxy generator. You can play with the tweaks and continue to add parameters and improve the style of your galaxies.

Try not to burn your computer.

## Go further

To go further, you can try to add more tweaks or test other galaxy shapes. We will learn how to animate all the particles in a cool spin animation in a future lesson.

Difficulty Hard

## Introduction

As the name suggests, a Raycaster can cast (or shoot) a ray in a specific direction and test what objects intersect with it.

You can use that technique to detect if there is a wall in front of the player, test if the laser gun hit something, test if something is currently under the mouse to simulate mouse events, and many other things.

## Setup

In our starter, we have 3 red spheres, and we are going to shoot a ray through and see if those spheres intersect.

## Create the Raycaster

Instantiate a Raycaster:

``````/**
* Raycaster
*/
const raycaster = new THREE.Raycaster()
``````

JavaScript

Copy

To change the position and direction where ray will be cast, we can use the `set(...)` method. The first parameter is the `position` and the second parameter is the `direction` .

Both are Vector3, but the `direction` has to be normalized. A normalized vector has a length of `1` . Don’t worry, you don’t have to do the mathematics by yourself, and you can call the `normalize()` method on the vector:

``````const rayOrigin = new THREE.Vector3(- 3, 0, 0)
const rayDirection = new THREE.Vector3(10, 0, 0)
rayDirection.normalize()

raycaster.set(rayOrigin, rayDirection)
``````

JavaScript

Copy

This example of a normalized vector isn’t very relevant because we could have set `1` instead of `10` , but if we change the values, we will still have the `normalize()` method making sure that the vector is `1` unit long.

Here, the ray position supposedly start a little on the left in our scene, and the direction seems to go to the right. Our ray should go through all the spheres.

## Cast a ray

To cast a ray and get the objects that intersect we can use two methods, `intersectObject(...)` (singular) and `intersectObjects(...)` (plural).

`intersectObject(...)` will test one object and `intersectObjects(...)` will test an array of objects:

``````const intersect = raycaster.intersectObject(object2)
console.log(intersect)

const intersects = raycaster.intersectObjects([object1, object2, object3])
console.log(intersects)
``````

JavaScript

Copy

If you look at the logs, you’ll see that `intersectObject(...)` returned an array of one item (probably the second sphere) and `intersectObjects(...)` , returned an array of three items (probably the 3 spheres).

## Result of an intersection

The result of an intersection is always an array, even if you are testing only one object. That is because a ray can go through the same object multiple times. Imagine a donut. The ray will go through the first part of the ring, then the middle’s hole, then again the second part of the ring.

Each item of that returned array contains much useful information:

• `distance` : the distance between the origin of the ray and the collision point.
• `face` : what face of the geometry was hit by the ray.
• `faceIndex` : the index of that face.
• `object` : what object is concerned by the collision.
• `point` : a Vector3 of the exact position in 3D space of the collision.
• `uv` : the UV coordinates in that geometry.

It’s up to you to use that data. If you want to test if there is a wall in front of the player, you can test the `distance` . If you’re going to change the object’s color, you can update the `object` 's material. If you want to show an explosion on the impact point, you can create this explosion at the `point` position.

## Test on each frame

Currently, we only cast one ray at the start. If we want to test things while they are moving, we have to do the test on each frame. Let’s animate the spheres and turn them blue when the ray intersects with them.

Remove the code we did previously and only keep the raycaster instantiation:

``````const raycaster = new THREE.Raycaster()
``````

JavaScript

Copy

Animate the spheres by using the elapsed time and classic `Math.sin(...)` in the `tick` function:

``````const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Animate objects
object1.position.y = Math.sin(elapsedTime * 0.3) * 1.5
object2.position.y = Math.sin(elapsedTime * 0.8) * 1.5
object3.position.y = Math.sin(elapsedTime * 1.4) * 1.5

// ...
}
``````

JavaScript

Copy

You should see the spheres waving up and down at different frequencies.

Now let’s update our raycaster like we did before but in the `tick` function:

``````const clock = new THREE.Clock()

const tick = () =>
{
// ...

// Cast a ray
const rayOrigin = new THREE.Vector3(- 3, 0, 0)
const rayDirection = new THREE.Vector3(1, 0, 0)
rayDirection.normalize()

raycaster.set(rayOrigin, rayDirection)

const objectsToTest = [object1, object2, object3]
const intersects = raycaster.intersectObjects(objectsToTest)
console.log(intersects)

// ...
}
``````

JavaScript

Copy

Yet again, we don’t really need to normalize the `rayDirection` because its length is already `1` . But it’s good practice to keep the `normalize()` in case we change the direction.

We also put the array of objects to test in a variable `objectsToTest` . That will get handy later.

If you look at the console, you should get an array with intersections in it, and those intersections keep changing depending on the spheres’ positions.

We can now update the material of the `object` property for each item of the `intersects` array:

``````    for(const intersect of intersects)
{
intersect.object.material.color.set('#0000ff')
}
``````

JavaScript

Copy

Unluckily, they all go blue but never go back red. There are many ways to turn the objects that didn’t intersect back to red. What we can do is turn all the spheres red and then turn the ones that intersect blue:

``````    for(const object of objectsToTest)
{
object.material.color.set('#ff0000')
}

for(const intersect of intersects)
{
intersect.object.material.color.set('#0000ff')
}
``````

JavaScript

Copy

## Use the raycaster with the mouse

As we said earlier, we can also use the raycaster to test if an object is behind the mouse. In other words, if you are hovering an object.

Mathematically speaking, it’s a little complex because we need to cast a ray from the camera in the mouse’s direction, but, fortunately, Three.js is doing all the heavy lifting.

For now, let’s comment the code related to the raycaster in the `tick` function.

### Hovering

First, let’s handle hovering.

To begin with, we need the coordinates of the mouse. We cannot use the basic native JavaScript coordinates, which are in pixels. We need a value that goes from `-1` to `+1` in both the horizontal and the vertical axis, with the vertical coordinate being positive when moving the mouse upward.

This is how WebGL works and it’s related to things like clip space but we don’t need to understand those complex concepts.

Examples:

• The mouse is on the top left of the page: `-1 / 1`
• The mouse is on the bottom left of the page: `-1 / - 1`
• The mouse is on the middle vertically and at right horizontally: `1 / 0`
• The mouse is in the center of the page: `0 / 0`

First, let’s create a `mouse` variable with a Vector2, and update that variable when the mouse is moving:

``````/**
* Mouse
*/
const mouse = new THREE.Vector2()

{
mouse.x = event.clientX / sizes.width * 2 - 1
mouse.y = - (event.clientY / sizes.height) * 2 + 1

console.log(mouse)
})
``````

JavaScript

Copy

Look at the logs and make sure that the values match the previous examples.

We could cast the ray in the `mousemove` event callback, but it’s not recommend because the `mousemove` event might be triggered more than the frame rate for some browsers. Instead, we will cast the ray in the `tick` function as we did before.

To orient the ray in the right direction, we can use the `setFromCamera()` method on the Raycaster. The rest of the code is the same as before. We just update the objects materials to red or blue if they intersect or not:

``````const tick = () =>
{
// ...

raycaster.setFromCamera(mouse, camera)

const objectsToTest = [object1, object2, object3]
const intersects = raycaster.intersectObjects(objectsToTest)

for(const intersect of intersects)
{
intersect.object.material.color.set('#0000ff')
}

for(const object of objectsToTest)
{
if(!intersects.find(intersect => intersect.object === object))
{
object.material.color.set('#ff0000')
}
}

// ...
}
``````

JavaScript

Copy

The spheres should become red if the cursor is above them.

### Mouse enter and mouse leave events

Mouse events like `'mouseenter'` , `'mouseleave'` , etc. aren’t supported either. If you want to be inform when the mouse “enters” an object or “leaves” that object, you’ll have to do it by yourself.

What we can do to reproduce the `mouseenter` and `mouseleave` events, is to have a variable containing the currently hovered object.

If there is one object intersecting, but there wasn’t one before, it means a `mouseenter` has happened on that object.

If no object intersects, but there was one before, it means a `mouseleave` has happened.

We just need to save the currently intersecting object:

``````let currentIntersect = null
``````

JavaScript

Copy

And then, test and update the `currentIntersect` variable:

``````const tick = () =>
{
// ...
raycaster.setFromCamera(mouse, camera)
const objectsToTest = [object1, object2, object3]
const intersects = raycaster.intersectObjects(objectsToTest)

if(intersects.length)
{
if(!currentIntersect)
{
console.log('mouse enter')
}

currentIntersect = intersects[0]
}
else
{
if(currentIntersect)
{
console.log('mouse leave')
}

currentIntersect = null
}

// ...
}
``````

JavaScript

Copy

### Mouse click event

Now that we have a variable containing the currently hovered object, we can easily implement a `click` event.

First, we need to listen to the `click` event regardless of where it happens:

``````window.addEventListener('click', () =>
{

})
``````

JavaScript

Copy

Then, we can test if the there is something in the `currentIntersect` variable:

``````window.addEventListener('click', () =>
{
if(currentIntersect)
{
console.log('click')
}
})
``````

JavaScript

Copy

We can also test what object was concerned by the click:

``````window.addEventListener('click', () =>
{
if(currentIntersect)
{
switch(currentIntersect.object)
{
case object1:
console.log('click on object 1')
break

case object2:
console.log('click on object 2')
break

case object3:
console.log('click on object 3')
break
}
}
})
``````

JavaScript

Copy

Reproducing native events takes time, but once you understand it, it’s pretty straightforward.

1 Like