Learn the basics of Three.js - a tool for building amazing 3D graphics with JavaScript. In this tutorial, we create an animated 3D scrolling animation for a portfolio website https://github.com/fireship-io/threejs-scroll-animation-demo

#3D #webdev #js

🔗 Resources

Three.js Docs https://threejs.org/
WebGL Overview https://youtu.be/f-9LEoYYvE4
Inspiration https://atelier.net/virtual-economy/
Scrolling Animation with Three.js

📚 Chapters

00:00 Mindblowing 3D Websites
00:42 What we’re building
01:19 What is Three.js
02:12 Project Setup
03:35 Scene
03:52 Camera
04:28 Renderer
05:07 Geometry
05:28 Material
06:02 Mesh
06:16 Animation Loop
07:13 Lighting
08:45 Three.js Helpers
09:17 Orbit Controls
09:56 Random Generation
11:05 Scene Background
11:37 Texture Mapping
12:57 Scroll Animation
14:36 CSS Grid 

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:06:58.908Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
7d6c82c3-056e-4745-90b3-cfec5e85fd20
f60165c63c8c3e5a031825c87403c22d5f4c7e0ccba42603fb98f493a0607bdb
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
The most visually mind blowing websites in the world all seem to follow a similar pattern.
They use 3 d animations that bring the content to life when the page is scrolled.
A website like mav.farm doesn't have a scroll bar, but instead animates a whole 3 d world as as you scroll through the page.
This may look impossibly difficult, but in today's video, you'll learn how to create your own 3 d animations with JavaScript using 3.
Js.
The by the end of this video, you will have built a personal portfolio website that's so impressive, it's guaranteed to get you a job or your money back.
And you might be shocked at how easy it really is when you understand a few concepts related to cameras, lighting, and geometry.
This tutorial is beginner friendly, and I'll assume you're brand new to 3 JS and 3 d graphics in general.
What we'll build today is a website that uses CSS Grid for its main content and has a 3 d animated background that changes the camera perspective it as the user scrolls down.
Looking closer, we have an avatar image that is actually a 3 d cube that rotates as we scroll down.
Then we have a big 3 d ring that rotates continuously.
You'll also notice a bunch of 3 d stars in the background that change their position as the camera moves.
And at the bottom, we have a rotating moon animation.
It doesn't look perfect, but it's about as realistic as the official moon landings.
The inspiration for this video came from atlietotnet, which is great example of an amazing website that uses both CSS Grid and 3 JS.
But what is 3 JS exactly?
Well, basically, it's just a library for drawing 3 d graphics in the browser with JavaScript and WebGL.
In any 3 d scene, whether it's on the web, a movie, or video game, you have a bunch of geometries or shapes the that get styled with textures, which might be done with math or just a regular raster image.
A scene will also have 1 or more lights to make the shapes visible.
And finally, there needs to be a camera to give the end user perspective on the screen.
Now when animation comes into play, we can set up an infinite loop or some other trigger like the role bar to change the properties on these objects to animate them.
3 JS makes this process very developer friendly as you'll see throughout the video, but I would like to point out that it's not really a tool more modeling or drawing complex 3 d shapes.
For that, we have tools like Blender, and you can actually import your Blender models directly into 3 JS to use them on the web.
Now now, before we jump into the code, make sure to like and subscribe, then open up Versus Code to an empty directory, and open up a terminal session.
We'll build this project with plain old vanilla JS, and you can find the source code on GitHub or Fireship IO.
First, we need to initialize a project that can handle dependencies, them, and to do that, we'll use a tool called Vite.
Create a new project by running npm init vitejs/app.
Running this command will give us the option to select vanilla JS, which will initialize a new project with a main dot JS file and a package JSON where we can install dependencies.
From there, install 3 JS by by running npm install 3.
And after that's done, we'll run the npm run dev command to serve our app locally.
That should serve the app on localhost 3,000, but then let's go into the style.
Css and main dot JS file and delete all of the boilerplate code.
If you look at my project files, you'll notice that I have a few images here.
You can grab these images from the GitHub repo.
However, I would encourage you to use your own images for this project.
I'll be explaining the concepts in detail, so you can take these ideas and build your own awesome portfolio.
The first thing we'll do is go into the index HTML file and add a canvas to the body, which which will be the element that shows the actual 3 JS scene.
Notice how it comes before the main dot JS script and has an ID of background.
From there, we'll go into our style sheet and give the canvas fixed positioning and pin it to the top left corner of the screen, which will allow it to serve as a background, and, eventually, we will overlay other HTML elements on top of it.
From there, we'll go into our main JS file, and the first thing we'll do is import the 3 JS JS library.
To start things off, you'll always need 3 objects, a scene, a camera, and a renderer.
The scene is like a container that holds all of your objects, cameras, and lights.
Now in order to look at things inside the scene, we need a camera.
There are multiple different camera types in 3 JS, but the most common one you'll come across is the perspective camera, which is designed to mimic what human eyeballs would see.
The first argument is field of view, which is the amount of the world that's visible based on a full bowl 360 degrees.
The second argument is the aspect ratio, which is based off of the user's browser window, and we can calculated by dividing the window's inner width by the inner height.
Then the last two arguments are for the view frustum to control which objects are visible relative to the camera itself.
Off.
Since we have point 01a1000 here, we can see pretty much everything from the camera lens.
Now that we have a camera, we need a renderer them to render out the actual graphics to the scene.
The renderer needs to know which DOM element to use, which will be the canvas with an ID of background.
Once instantiated, we can use the renderer to set the pixel ratio to the window device pixel ratio and also make it a full screen canvas by setting the renderer size to the window size.
Now currently, our camera the camera as positioned in the middle of the scene.
So what I'll do next is move it along the z axis, and that'll give us a better perspective when we start adding shapes.
Now, the final thing we'll do is called the renderer's render method, passing at the scene and the camera as arguments.
And if we open it up in the browser, we should just have a blank screen at this point, so the next Thing will do is add an object to it.
There are 3 basic steps when creating an object.
First, you need a geometry or a set of vectors that define the object itself.
3.
Js has a bunch of built in geometries like box, sphere, cone, cylinder, and so on.
I'll go ahead and create a new them a tree, which is like a big 3 d ring.
Now that we have a geometry, we need to define a material to give it color or some kind of texture.
Trigger.
Think of a material as wrapping paper for a geometry.
There are many different kind of materials built into 3 JS for different uses that will give to different results, and you can even write your own custom shaders with WebGL to use as a material, but that's beyond the scope of this video.
The now most materials rely on a light source to bounce off of them.
But in this case, we'll use a basic material which requires no light source.
It has a bunch of parameters for customization like a color and will also set wireframe to true to get a better look at its actual geometry.
The the third step is to create a mesh by combining the geometry with the material.
And that's the actual thing that we want to add to the scene, which we do by calling scene dot add.
Now to actually see it, we need to re render the screen by calling the same render method again.
You don't wanna have to call the render method over and over again in your code, so a better approach here is is to set up a recursive function that gives us an infinite loop that calls the render method automatically.
We have a function named animate that calls request animation frame in the browser, which is a mechanism that tells the browser that you want to perform an animation.
Now whenever the browser repaints the screen, it will call your render method to update the UI.
Life.
You can think of this as a game loop if you've ever done game development.
Go ahead and call the animate function, then open up the browser, and you should see the torus shape.
Them.
Currently, the Taurus is not doing anything, so let's go back into our animation loop and change that.
Every shape that we create has different properties like rotation, position, and scale.
And and if we change its properties inside the loop, the shape will animate.
In this case, we'll update the rotation along the x axis by point their one for every animation frame and will do the same thing for the y and z axis as well.
Back in the browser, you should now see the torus animated in an infinite that loop.
So that's pretty cool, but now I want to introduce the concept of lighting because that's what makes your 3 d objects really come to life.
Going back to our the object will change it from mesh basic material to mesh standard material, which is a material that will react to light bouncing off of it.
Let's also remove the wireframe property, them, then go back to the browser, and you'll notice that we have a black screen again.
That's because there's nothing lighting this object up.
There are many different types of lighting to choose from in 3 JS, but an easy one to get started with is a point light, which emits light in all directions as if you added a light bulb to the scene.
We'll go ahead and instantiate a new point light with a color of white, and by the away.
If you're wondering what this 0 x is, that is a hexadecimal literal.
Whenever you write 0 x in JavaScript and most other programming languages, it means you're working with a hexadecimal value instead of a regular number type.
That's just a random good thing to know, but now back to our light, we'll go ahead and position it to move it away from the center, setting its x, y, and z values to 5.
Make sure to add it to the scene like any other object, then let's check it out in the browser.
The the light is actually positioned inside of the torus, so it lights up the inside part of the ring.
If we go back to our code and update the values to 20, it moves the light farther away and lights up a larger area of the ring.
That's cool when you want to focus on a specific point, but in some cases, you might want lighting across the entire scene, in which case you can instantiate an ambient light.
An ambient light is more like a floodlight in the room and will light up everything in the scene equally.
Notice how we can see the entire shape of the ring at this point.
Now working with lights and shapes can be very confusing, but luckily, 3 JS has a couple of helpers that can make our life much easier.
The first one is the light helper, which will show us the position of a point light, instantiate the helper, then pass the point light as an argument and add it to the scene.
The then notice how that added a little wireframe that shows the position and direction of the light source.
Another thing that's very helpful is the grid helper, them, which draws a 2 dimensional grid along the scene.
When we add a grid helper to the scene and then try to view it in the browser, you'll notice that we the skit a little gray line here.
That's because our current perspective is perfectly level with the grid.
We can easily make the scene more interactive by adding orbit controls to it, which will allow us to move around the scene using our mouse.
To do that, we'll first need to import the orbit controls class from the 3.
Js examples namespace.
Once that's this done.
We can then instantiate the orbit controls class and pass it the camera and the renderer DOM element as arguments.
The what this will do is listen to DOM events on the mouse and update the camera position accordingly.
We then need to call controls dot update in the animation loop to make sure that the changes are reflected in the UI.
At this point, you should be able to go into the browser and pan around with your mouse to see the full nature of the grid.
Now that we have some helpers in place, I want to show you how you can use 3 JS Math Helpers to randomly generate a large number of objects in the scene.
In this case, we'll populate outer space with a bunch of randomly generated stars.
To handle that, we'll create a function called add star.
In inside the function.
We'll start by instantiating a sphere geometry, where each sphere has a radius of 0.25.
We'll then create a standard material them and join them together as a mesh.
That's easy enough, but the tricky part here is how do we randomly position these stars throughout the scene.
What we need to do is randomly generate an x, y and z position value for each star.
We can do that by filling an array with 3 values, then Dimple map each value to the 3 JS random float spread function, which is just a helper function that randomly generates a number between negative and positive 100.
We can then take those random numbers and set the position of the star, and finally add it to the scene.
Now, it's us just a matter of deciding how many stars we want to add to the scene.
For that, I'll create an array of 200 values, then for each value, call the add star function.
Them back in the browser, our scene should be populated with 200 randomly positioned stars.
And that looks pretty cool, but we could make this even better by adding a background to outer space.
In many cases, you'll need to load images and textures into your scene.
In this example, we'll load a simple JPEG image using the 3 JS the AS texture loader.
It's worth noting that you can also pass a callback function here to be notified when the image is done loading.
That's useful if you wanna show a the green bar if your scene relies on a lot of static assets.
In any case, we can set the image as the scene background by simply updating that property.
And now the the escape for our scene is starting to look much more interesting.
We can also add textures to individual materials, which is a big complex topic known as texture mapping.
Basically, texture mapping is the process of taking 2 dimensional pixels and mapping them to a three-dimensional geometry.
To demonstrate a texture map, I'll go ahead and use use the texture loader to load another image, then create a mesh that contains a box geometry and a basic material.
The only interesting thing here is that we'll define the map property on the material as the texture.
Let's go ahead and add that object to the scene, and now when we open the browser, we have a 3 d cube with the image map to all six sides of it.
That's pretty simple, but we can also combine multiple maps to create more interesting objects like we'll do for our Moon.
Let's create a new mesh name to Moon that has a sphere with a radius of 3 and a mesh standard material.
Now just like the previous example, we'll load a texture of the moon JPEG and add that as the map property.
That'll take the image and wrap it around the sphere.
But another cool thing we can do here is give it the appearance of having some depth by adding a normal map to it.
As you can see here, I have this purple image, which will create the appearance of dents and bumps and allow light to bounce off of them to create an appearance of an object that's not perfectly uniform.
A normal map can make an object feel much more ballistic with very little effort.
Notice how the surface of the moon is no longer smooth, creating the illusion of craters and mountains.
At this point, we have an animated scene, but I want to also show you how to animate it when the user scrolls.
But before we can do that, we first need to add some markup to the page.
In the index HTML file, them.
I'm adding a bunch of markup for the header and main content of the web page.
The important point here is that the content takes up a lot of critical space, allowing the main body of the website to be scrolled.
You'll also wanna make sure that the root parent element has a position of absolute.
In my case, that's the main element, so make sure that's updated in your CSS.
Now, back in the JavaScript, I'm going to first reposition the moon to be further down the z axis because that's the direction that we'll the scrolling in.
And it's worth noting that when working with many properties in 3 JS, you can either assign them using the equal sign, or you can use a setter function like setX x in this case.
They both do the same thing, so it's just a matter of preference.
From there, let's define a function called MoveCamera, and then and assign that function as the event handler for the document body on scroll event that will fire this function every time the user scrolls.
Now inside the function the body.
The first thing we need to do is calculate where the user is currently scrolled to.
One way to do that is to call the that body GetBoundingClientRect function.
That will give us the dimensions of the viewport and the top property will show us exactly how far we are from the top of the web page.
The from there, we can start changing properties on our 3 d objects whenever this function is called.
We'll go ahead and rotate the Moon and also the avatar, but the most important thing here is changing the position of the actual camera itself.
The top value will always be negative, so I'm going to multiply client by a negative number.
You'll likely want to play around with these numbers to get the animation you're going for.
Now, the final thing I wanna show you is how I use CSS Grid to make this lay out really easy to build.
I'm not going to go through every line of CSS, but I'll just show you the important things here.
If we go to the main element, which is the main parent in the HTML, you'll notice that I have it set as display grid, then I have grid template columns to repeat 12 columns at one fractional unit.
Basically, that gives us 12 equally sized columns on which we can position all of the children.
Now if we go down to a child element like a section, the we can add the grid column property and set it to start at the 2nd column and end at the 8th column.
Or in the header, we can start at the 2nd column and then have it fan across 5 columns.
The bottom line here is that it's very easy to position DOM elements to align with the 3 d stuff going on in the background.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like, subscribe, and share, and consider becoming a pro member at FireShip bio to support the channel and get even more content.
Thanks for watching and I will see you in the next one.

Speaker 0: The most visually mind blowing websites in the world all seem to follow a similar pattern. They use 3 d animations that bring the content to life when the page is scrolled. A website like mav.farm doesn't have a scroll bar, but instead animates a whole 3 d world as as you scroll through the page. This may look impossibly difficult, but in today's video, you'll learn how to create your own 3 d animations with JavaScript using 3. Js.

The by the end of this video, you will have built a personal portfolio website that's so impressive, it's guaranteed to get you a job or your money back. And you might be shocked at how easy it really is when you understand a few concepts related to cameras, lighting, and geometry. This tutorial is beginner friendly, and I'll assume you're brand new to 3 JS and 3 d graphics in general. What we'll build today is a website that uses CSS Grid for its main content and has a 3 d animated background that changes the camera perspective it as the user scrolls down. Looking closer, we have an avatar image that is actually a 3 d cube that rotates as we scroll down.

Then we have a big 3 d ring that rotates continuously. You'll also notice a bunch of 3 d stars in the background that change their position as the camera moves. And at the bottom, we have a rotating moon animation. It doesn't look perfect, but it's about as realistic as the official moon landings. The inspiration for this video came from atlietotnet, which is great example of an amazing website that uses both CSS Grid and 3 JS.

But what is 3 JS exactly? Well, basically, it's just a library for drawing 3 d graphics in the browser with JavaScript and WebGL. In any 3 d scene, whether it's on the web, a movie, or video game, you have a bunch of geometries or shapes the that get styled with textures, which might be done with math or just a regular raster image. A scene will also have 1 or more lights to make the shapes visible. And finally, there needs to be a camera to give the end user perspective on the screen.

Now when animation comes into play, we can set up an infinite loop or some other trigger like the role bar to change the properties on these objects to animate them. 3 JS makes this process very developer friendly as you'll see throughout the video, but I would like to point out that it's not really a tool more modeling or drawing complex 3 d shapes. For that, we have tools like Blender, and you can actually import your Blender models directly into 3 JS to use them on the web. Now now, before we jump into the code, make sure to like and subscribe, then open up Versus Code to an empty directory, and open up a terminal session. We'll build this project with plain old vanilla JS, and you can find the source code on GitHub or Fireship IO.

First, we need to initialize a project that can handle dependencies, them, and to do that, we'll use a tool called Vite. Create a new project by running npm init vitejs/app. Running this command will give us the option to select vanilla JS, which will initialize a new project with a main dot JS file and a package JSON where we can install dependencies. From there, install 3 JS by by running npm install 3. And after that's done, we'll run the npm run dev command to serve our app locally.

That should serve the app on localhost 3,000, but then let's go into the style. Css and main dot JS file and delete all of the boilerplate code. If you look at my project files, you'll notice that I have a few images here. You can grab these images from the GitHub repo. However, I would encourage you to use your own images for this project.

I'll be explaining the concepts in detail, so you can take these ideas and build your own awesome portfolio. The first thing we'll do is go into the index HTML file and add a canvas to the body, which which will be the element that shows the actual 3 JS scene. Notice how it comes before the main dot JS script and has an ID of background. From there, we'll go into our style sheet and give the canvas fixed positioning and pin it to the top left corner of the screen, which will allow it to serve as a background, and, eventually, we will overlay other HTML elements on top of it. From there, we'll go into our main JS file, and the first thing we'll do is import the 3 JS JS library.

To start things off, you'll always need 3 objects, a scene, a camera, and a renderer. The scene is like a container that holds all of your objects, cameras, and lights. Now in order to look at things inside the scene, we need a camera. There are multiple different camera types in 3 JS, but the most common one you'll come across is the perspective camera, which is designed to mimic what human eyeballs would see. The first argument is field of view, which is the amount of the world that's visible based on a full bowl 360 degrees.

The second argument is the aspect ratio, which is based off of the user's browser window, and we can calculated by dividing the window's inner width by the inner height. Then the last two arguments are for the view frustum to control which objects are visible relative to the camera itself. Off. Since we have point 01a1000 here, we can see pretty much everything from the camera lens. Now that we have a camera, we need a renderer them to render out the actual graphics to the scene.

The renderer needs to know which DOM element to use, which will be the canvas with an ID of background. Once instantiated, we can use the renderer to set the pixel ratio to the window device pixel ratio and also make it a full screen canvas by setting the renderer size to the window size. Now currently, our camera the camera as positioned in the middle of the scene. So what I'll do next is move it along the z axis, and that'll give us a better perspective when we start adding shapes. Now, the final thing we'll do is called the renderer's render method, passing at the scene and the camera as arguments.

And if we open it up in the browser, we should just have a blank screen at this point, so the next Thing will do is add an object to it. There are 3 basic steps when creating an object. First, you need a geometry or a set of vectors that define the object itself. 3. Js has a bunch of built in geometries like box, sphere, cone, cylinder, and so on.

I'll go ahead and create a new them a tree, which is like a big 3 d ring. Now that we have a geometry, we need to define a material to give it color or some kind of texture. Trigger. Think of a material as wrapping paper for a geometry. There are many different kind of materials built into 3 JS for different uses that will give to different results, and you can even write your own custom shaders with WebGL to use as a material, but that's beyond the scope of this video.

The now most materials rely on a light source to bounce off of them. But in this case, we'll use a basic material which requires no light source. It has a bunch of parameters for customization like a color and will also set wireframe to true to get a better look at its actual geometry. The the third step is to create a mesh by combining the geometry with the material. And that's the actual thing that we want to add to the scene, which we do by calling scene dot add.

Now to actually see it, we need to re render the screen by calling the same render method again. You don't wanna have to call the render method over and over again in your code, so a better approach here is is to set up a recursive function that gives us an infinite loop that calls the render method automatically. We have a function named animate that calls request animation frame in the browser, which is a mechanism that tells the browser that you want to perform an animation. Now whenever the browser repaints the screen, it will call your render method to update the UI. Life.

You can think of this as a game loop if you've ever done game development. Go ahead and call the animate function, then open up the browser, and you should see the torus shape. Them. Currently, the Taurus is not doing anything, so let's go back into our animation loop and change that. Every shape that we create has different properties like rotation, position, and scale.

And and if we change its properties inside the loop, the shape will animate. In this case, we'll update the rotation along the x axis by point their one for every animation frame and will do the same thing for the y and z axis as well. Back in the browser, you should now see the torus animated in an infinite that loop. So that's pretty cool, but now I want to introduce the concept of lighting because that's what makes your 3 d objects really come to life. Going back to our the object will change it from mesh basic material to mesh standard material, which is a material that will react to light bouncing off of it.

Let's also remove the wireframe property, them, then go back to the browser, and you'll notice that we have a black screen again. That's because there's nothing lighting this object up. There are many different types of lighting to choose from in 3 JS, but an easy one to get started with is a point light, which emits light in all directions as if you added a light bulb to the scene. We'll go ahead and instantiate a new point light with a color of white, and by the away. If you're wondering what this 0 x is, that is a hexadecimal literal.

Whenever you write 0 x in JavaScript and most other programming languages, it means you're working with a hexadecimal value instead of a regular number type. That's just a random good thing to know, but now back to our light, we'll go ahead and position it to move it away from the center, setting its x, y, and z values to 5. Make sure to add it to the scene like any other object, then let's check it out in the browser. The the light is actually positioned inside of the torus, so it lights up the inside part of the ring. If we go back to our code and update the values to 20, it moves the light farther away and lights up a larger area of the ring.

That's cool when you want to focus on a specific point, but in some cases, you might want lighting across the entire scene, in which case you can instantiate an ambient light. An ambient light is more like a floodlight in the room and will light up everything in the scene equally. Notice how we can see the entire shape of the ring at this point. Now working with lights and shapes can be very confusing, but luckily, 3 JS has a couple of helpers that can make our life much easier. The first one is the light helper, which will show us the position of a point light, instantiate the helper, then pass the point light as an argument and add it to the scene.

The then notice how that added a little wireframe that shows the position and direction of the light source. Another thing that's very helpful is the grid helper, them, which draws a 2 dimensional grid along the scene. When we add a grid helper to the scene and then try to view it in the browser, you'll notice that we the skit a little gray line here. That's because our current perspective is perfectly level with the grid. We can easily make the scene more interactive by adding orbit controls to it, which will allow us to move around the scene using our mouse.

To do that, we'll first need to import the orbit controls class from the 3. Js examples namespace. Once that's this done. We can then instantiate the orbit controls class and pass it the camera and the renderer DOM element as arguments. The what this will do is listen to DOM events on the mouse and update the camera position accordingly.

We then need to call controls dot update in the animation loop to make sure that the changes are reflected in the UI. At this point, you should be able to go into the browser and pan around with your mouse to see the full nature of the grid. Now that we have some helpers in place, I want to show you how you can use 3 JS Math Helpers to randomly generate a large number of objects in the scene. In this case, we'll populate outer space with a bunch of randomly generated stars. To handle that, we'll create a function called add star.

In inside the function. We'll start by instantiating a sphere geometry, where each sphere has a radius of 0.25. We'll then create a standard material them and join them together as a mesh. That's easy enough, but the tricky part here is how do we randomly position these stars throughout the scene. What we need to do is randomly generate an x, y and z position value for each star.

We can do that by filling an array with 3 values, then Dimple map each value to the 3 JS random float spread function, which is just a helper function that randomly generates a number between negative and positive 100. We can then take those random numbers and set the position of the star, and finally add it to the scene. Now, it's us just a matter of deciding how many stars we want to add to the scene. For that, I'll create an array of 200 values, then for each value, call the add star function. Them back in the browser, our scene should be populated with 200 randomly positioned stars.

And that looks pretty cool, but we could make this even better by adding a background to outer space. In many cases, you'll need to load images and textures into your scene. In this example, we'll load a simple JPEG image using the 3 JS the AS texture loader. It's worth noting that you can also pass a callback function here to be notified when the image is done loading. That's useful if you wanna show a the green bar if your scene relies on a lot of static assets.

In any case, we can set the image as the scene background by simply updating that property. And now the the escape for our scene is starting to look much more interesting. We can also add textures to individual materials, which is a big complex topic known as texture mapping. Basically, texture mapping is the process of taking 2 dimensional pixels and mapping them to a three-dimensional geometry. To demonstrate a texture map, I'll go ahead and use use the texture loader to load another image, then create a mesh that contains a box geometry and a basic material.

The only interesting thing here is that we'll define the map property on the material as the texture. Let's go ahead and add that object to the scene, and now when we open the browser, we have a 3 d cube with the image map to all six sides of it. That's pretty simple, but we can also combine multiple maps to create more interesting objects like we'll do for our Moon. Let's create a new mesh name to Moon that has a sphere with a radius of 3 and a mesh standard material. Now just like the previous example, we'll load a texture of the moon JPEG and add that as the map property.

That'll take the image and wrap it around the sphere. But another cool thing we can do here is give it the appearance of having some depth by adding a normal map to it. As you can see here, I have this purple image, which will create the appearance of dents and bumps and allow light to bounce off of them to create an appearance of an object that's not perfectly uniform. A normal map can make an object feel much more ballistic with very little effort. Notice how the surface of the moon is no longer smooth, creating the illusion of craters and mountains.

At this point, we have an animated scene, but I want to also show you how to animate it when the user scrolls. But before we can do that, we first need to add some markup to the page. In the index HTML file, them. I'm adding a bunch of markup for the header and main content of the web page. The important point here is that the content takes up a lot of critical space, allowing the main body of the website to be scrolled.

You'll also wanna make sure that the root parent element has a position of absolute. In my case, that's the main element, so make sure that's updated in your CSS. Now, back in the JavaScript, I'm going to first reposition the moon to be further down the z axis because that's the direction that we'll the scrolling in. And it's worth noting that when working with many properties in 3 JS, you can either assign them using the equal sign, or you can use a setter function like setX x in this case. They both do the same thing, so it's just a matter of preference.

From there, let's define a function called MoveCamera, and then and assign that function as the event handler for the document body on scroll event that will fire this function every time the user scrolls. Now inside the function the body. The first thing we need to do is calculate where the user is currently scrolled to. One way to do that is to call the that body GetBoundingClientRect function. That will give us the dimensions of the viewport and the top property will show us exactly how far we are from the top of the web page.

The from there, we can start changing properties on our 3 d objects whenever this function is called. We'll go ahead and rotate the Moon and also the avatar, but the most important thing here is changing the position of the actual camera itself. The top value will always be negative, so I'm going to multiply client by a negative number. You'll likely want to play around with these numbers to get the animation you're going for. Now, the final thing I wanna show you is how I use CSS Grid to make this lay out really easy to build.

I'm not going to go through every line of CSS, but I'll just show you the important things here. If we go to the main element, which is the main parent in the HTML, you'll notice that I have it set as display grid, then I have grid template columns to repeat 12 columns at one fractional unit. Basically, that gives us 12 equally sized columns on which we can position all of the children. Now if we go down to a child element like a section, the we can add the grid column property and set it to start at the 2nd column and end at the 8th column. Or in the header, we can start at the 2nd column and then have it fan across 5 columns.

The bottom line here is that it's very easy to position DOM elements to align with the 3 d stuff going on in the background. I'm gonna go ahead and wrap things up there. If this video helped you, please like, subscribe, and share, and consider becoming a pro member at FireShip bio to support the channel and get even more content. Thanks for watching and I will see you in the next one.
The most visually mind blowing websites in the world all seem to follow a similar pattern. They use 3 d animations that bring the content to life when the page is scrolled. A website like mav.farm doesn't have a scroll bar, but instead animates a whole 3 d world as as you scroll through the page. This may look impossibly difficult, but in today's video, you'll learn how to create your own 3 d animations with JavaScript using 3. Js. The by the end of this video, you will have built a personal portfolio website that's so impressive, it's guaranteed to get you a job or your money back. And you might be shocked at how easy it really is when you understand a few concepts related to cameras, lighting, and geometry. This tutorial is beginner friendly, and I'll assume you're brand new to 3 JS and 3 d graphics in general. What we'll build today is a website that uses CSS Grid for its main content and has a 3 d animated background that changes the camera perspective it as the user scrolls down. Looking closer, we have an avatar image that is actually a 3 d cube that rotates as we scroll down. Then we have a big 3 d ring that rotates continuously. You'll also notice a bunch of 3 d stars in the background that change their position as the camera moves. And at the bottom, we have a rotating moon animation. It doesn't look perfect, but it's about as realistic as the official moon landings. The inspiration for this video came from atlietotnet, which is great example of an amazing website that uses both CSS Grid and 3 JS. But what is 3 JS exactly? Well, basically, it's just a library for drawing 3 d graphics in the browser with JavaScript and WebGL. In any 3 d scene, whether it's on the web, a movie, or video game, you have a bunch of geometries or shapes the that get styled with textures, which might be done with math or just a regular raster image. A scene will also have 1 or more lights to make the shapes visible. And finally, there needs to be a camera to give the end user perspective on the screen. Now when animation comes into play, we can set up an infinite loop or some other trigger like the role bar to change the properties on these objects to animate them. 3 JS makes this process very developer friendly as you'll see throughout the video, but I would like to point out that it's not really a tool more modeling or drawing complex 3 d shapes. For that, we have tools like Blender, and you can actually import your Blender models directly into 3 JS to use them on the web.
animation
visualization
graphic design
websites
video gaming
acting
robotics
photography
investing
geometry
astronomy
modeling
Now now, before we jump into the code, make sure to like and subscribe, then open up Versus Code to an empty directory, and open up a terminal session.
We'll build this project with plain old vanilla JS, and you can find the source code on GitHub or Fireship IO. First, we need to initialize a project that can handle dependencies, them, and to do that, we'll use a tool called Vite. Create a new project by running npm init vitejs/app.
software development
Running this command will give us the option to select vanilla JS, which will initialize a new project with a main dot JS file and a package JSON where we can install dependencies. From there, install 3 JS by by running npm install 3. And after that's done, we'll run the npm run dev command to serve our app locally. That should serve the app on localhost 3,000, but then let's go into the style. Css and main dot JS file and delete all of the boilerplate code.
If you look at my project files, you'll notice that I have a few images here. You can grab these images from the GitHub repo. However, I would encourage you to use your own images for this project. I'll be explaining the concepts in detail, so you can take these ideas and build your own awesome portfolio. The first thing we'll do is go into the index HTML file and add a canvas to the body, which which will be the element that shows the actual 3 JS scene.
visualization
graphic design
modeling
art
photography
Notice how it comes before the main dot JS script and has an ID of background. From there, we'll go into our style sheet and give the canvas fixed positioning and pin it to the top left corner of the screen, which will allow it to serve as a background, and, eventually, we will overlay other HTML elements on top of it. From there, we'll go into our main JS file, and the first thing we'll do is import the 3 JS JS library. To start things off, you'll always need 3 objects, a scene, a camera, and a renderer.
The scene is like a container that holds all of your objects, cameras, and lights. Now in order to look at things inside the scene, we need a camera. There are multiple different camera types in 3 JS, but the most common one you'll come across is the perspective camera, which is designed to mimic what human eyeballs would see. The first argument is field of view, which is the amount of the world that's visible based on a full bowl 360 degrees.
photography
visualization
film
multimedia
climatology
animation
The second argument is the aspect ratio, which is based off of the user's browser window, and we can calculated by dividing the window's inner width by the inner height.
Then the last two arguments are for the view frustum to control which objects are visible relative to the camera itself. Off. Since we have point 01a1000 here, we can see pretty much everything from the camera lens. Now that we have a camera, we need a renderer them to render out the actual graphics to the scene. The renderer needs to know which DOM element to use, which will be the canvas with an ID of background. Once instantiated, we can use the renderer to set the pixel ratio to the window device pixel ratio and also make it a full screen canvas by setting the renderer size to the window size. Now currently, our camera the camera as positioned in the middle of the scene. So what I'll do next is move it along the z axis, and that'll give us a better perspective when we start adding shapes. Now, the final thing we'll do is called the renderer's render method, passing at the scene and the camera as arguments. And if we open it up in the browser, we should just have a blank screen at this point, so the next Thing will do is add an object to it. There are 3 basic steps when creating an object. First, you need a geometry or a set of vectors that define the object itself. 3. Js has a bunch of built in geometries like box, sphere, cone, cylinder, and so on. I'll go ahead and create a new them a tree, which is like a big 3 d ring. Now that we have a geometry, we need to define a material to give it color or some kind of texture. Trigger. Think of a material as wrapping paper for a geometry. There are many different kind of materials built into 3 JS for different uses that will give to different results, and you can even write your own custom shaders with WebGL to use as a material, but that's beyond the scope of this video. The now most materials rely on a light source to bounce off of them. But in this case, we'll use a basic material which requires no light source. It has a bunch of parameters for customization like a color and will also set wireframe to true to get a better look at its actual geometry. The the third step is to create a mesh by combining the geometry with the material. And that's the actual thing that we want to add to the scene, which we do by calling scene dot add. Now to actually see it, we need to re render the screen by calling the same render method again. You don't wanna have to call the render method over and over again in your code, so a better approach here is is to set up a recursive function that gives us an infinite loop that calls the render method automatically. We have a function named animate that calls request animation frame in the browser, which is a mechanism that tells the browser that you want to perform an animation. Now whenever the browser repaints the screen, it will call your render method to update the UI. Life. You can think of this as a game loop if you've ever done game development. Go ahead and call the animate function, then open up the browser, and you should see the torus shape. Them. Currently, the Taurus is not doing anything, so let's go back into our animation loop and change that. Every shape that we create has different properties like rotation, position, and scale. And and if we change its properties inside the loop, the shape will animate. In this case, we'll update the rotation along the x axis by point their one for every animation frame and will do the same thing for the y and z axis as well. Back in the browser, you should now see the torus animated in an infinite that loop. So that's pretty cool, but now I want to introduce the concept of lighting because that's what makes your 3 d objects really come to life. Going back to our the object will change it from mesh basic material to mesh standard material, which is a material that will react to light bouncing off of it. Let's also remove the wireframe property, them, then go back to the browser, and you'll notice that we have a black screen again.
photography
materials
geometry
animation
graphic design
visualization
science
That's because there's nothing lighting this object up. There are many different types of lighting to choose from in 3 JS, but an easy one to get started with is a point light, which emits light in all directions as if you added a light bulb to the scene. We'll go ahead and instantiate a new point light with a color of white, and by the away. If you're wondering what this 0 x is, that is a hexadecimal literal. Whenever you write 0 x in JavaScript and most other programming languages, it means you're working with a hexadecimal value instead of a regular number type. That's just a random good thing to know, but now back to our light, we'll go ahead and position it to move it away from the center, setting its x, y, and z values to 5. Make sure to add it to the scene like any other object, then let's check it out in the browser. The the light is actually positioned inside of the torus, so it lights up the inside part of the ring. If we go back to our code and update the values to 20, it moves the light farther away and lights up a larger area of the ring. That's cool when you want to focus on a specific point, but in some cases, you might want lighting across the entire scene, in which case you can instantiate an ambient light.
An ambient light is more like a floodlight in the room and will light up everything in the scene equally. Notice how we can see the entire shape of the ring at this point. Now working with lights and shapes can be very confusing, but luckily, 3 JS has a couple of helpers that can make our life much easier.
senses
The first one is the light helper, which will show us the position of a point light, instantiate the helper, then pass the point light as an argument and add it to the scene. The then notice how that added a little wireframe that shows the position and direction of the light source.
visualization
Another thing that's very helpful is the grid helper, them, which draws a 2 dimensional grid along the scene. When we add a grid helper to the scene and then try to view it in the browser, you'll notice that we the skit a little gray line here.
That's because our current perspective is perfectly level with the grid. We can easily make the scene more interactive by adding orbit controls to it, which will allow us to move around the scene using our mouse. To do that, we'll first need to import the orbit controls class from the 3.
space exploration
animation
geometry
Js examples namespace. Once that's this done. We can then instantiate the orbit controls class and pass it the camera and the renderer DOM element as arguments.
The what this will do is listen to DOM events on the mouse and update the camera position accordingly. We then need to call controls dot update in the animation loop to make sure that the changes are reflected in the UI. At this point, you should be able to go into the browser and pan around with your mouse to see the full nature of the grid.
animation
Now that we have some helpers in place, I want to show you how you can use 3 JS Math Helpers to randomly generate a large number of objects in the scene.
In this case, we'll populate outer space with a bunch of randomly generated stars. To handle that, we'll create a function called add star. In inside the function. We'll start by instantiating a sphere geometry, where each sphere has a radius of 0.25. We'll then create a standard material them and join them together as a mesh. That's easy enough, but the tricky part here is how do we randomly position these stars throughout the scene. What we need to do is randomly generate an x, y and z position value for each star.
geometry
We can do that by filling an array with 3 values, then Dimple map each value to the 3 JS random float spread function, which is just a helper function that randomly generates a number between negative and positive 100. We can then take those random numbers and set the position of the star, and finally add it to the scene. Now, it's us just a matter of deciding how many stars we want to add to the scene. For that, I'll create an array of 200 values, then for each value, call the add star function. Them back in the browser, our scene should be populated with 200 randomly positioned stars.
And that looks pretty cool, but we could make this even better by adding a background to outer space. In many cases, you'll need to load images and textures into your scene. In this example, we'll load a simple JPEG image using the 3 JS the AS texture loader. It's worth noting that you can also pass a callback function here to be notified when the image is done loading. That's useful if you wanna show a the green bar if your scene relies on a lot of static assets.
animation
photography
visualization
In any case, we can set the image as the scene background by simply updating that property.
And now the the escape for our scene is starting to look much more interesting. We can also add textures to individual materials, which is a big complex topic known as texture mapping. Basically, texture mapping is the process of taking 2 dimensional pixels and mapping them to a three-dimensional geometry. To demonstrate a texture map, I'll go ahead and use use the texture loader to load another image, then create a mesh that contains a box geometry and a basic material. The only interesting thing here is that we'll define the map property on the material as the texture. Let's go ahead and add that object to the scene, and now when we open the browser, we have a 3 d cube with the image map to all six sides of it. That's pretty simple, but we can also combine multiple maps to create more interesting objects like we'll do for our Moon. Let's create a new mesh name to Moon that has a sphere with a radius of 3 and a mesh standard material. Now just like the previous example, we'll load a texture of the moon JPEG and add that as the map property. That'll take the image and wrap it around the sphere. But another cool thing we can do here is give it the appearance of having some depth by adding a normal map to it. As you can see here, I have this purple image, which will create the appearance of dents and bumps and allow light to bounce off of them to create an appearance of an object that's not perfectly uniform. A normal map can make an object feel much more ballistic with very little effort. Notice how the surface of the moon is no longer smooth, creating the illusion of craters and mountains. At this point, we have an animated scene, but I want to also show you how to animate it when the user scrolls. But before we can do that, we first need to add some markup to the page. In the index HTML file, them. I'm adding a bunch of markup for the header and main content of the web page.
geometry
animation
visualization
geography
The important point here is that the content takes up a lot of critical space, allowing the main body of the website to be scrolled. You'll also wanna make sure that the root parent element has a position of absolute. In my case, that's the main element, so make sure that's updated in your CSS. Now, back in the JavaScript, I'm going to first reposition the moon to be further down the z axis because that's the direction that we'll the scrolling in. And it's worth noting that when working with many properties in 3 JS, you can either assign them using the equal sign, or you can use a setter function like setX x in this case. They both do the same thing, so it's just a matter of preference. From there, let's define a function called MoveCamera, and then and assign that function as the event handler for the document body on scroll event that will fire this function every time the user scrolls. Now inside the function the body. The first thing we need to do is calculate where the user is currently scrolled to. One way to do that is to call the that body GetBoundingClientRect function. That will give us the dimensions of the viewport and the top property will show us exactly how far we are from the top of the web page. The from there, we can start changing properties on our 3 d objects whenever this function is called. We'll go ahead and rotate the Moon and also the avatar, but the most important thing here is changing the position of the actual camera itself. The top value will always be negative, so I'm going to multiply client by a negative number. You'll likely want to play around with these numbers to get the animation you're going for. Now, the final thing I wanna show you is how I use CSS Grid to make this lay out really easy to build. I'm not going to go through every line of CSS, but I'll just show you the important things here. If we go to the main element, which is the main parent in the HTML, you'll notice that I have it set as display grid, then I have grid template columns to repeat 12 columns at one fractional unit.
Basically, that gives us 12 equally sized columns on which we can position all of the children. Now if we go down to a child element like a section, the we can add the grid column property and set it to start at the 2nd column and end at the 8th column.
children
Or in the header, we can start at the 2nd column and then have it fan across 5 columns. The bottom line here is that it's very easy to position DOM elements to align with the 3 d stuff going on in the background.
I'm gonna go ahead and wrap things up there. If this video helped you, please like, subscribe, and share, and consider becoming a pro member at FireShip bio to support the channel and get even more content. Thanks for watching and I will see you in the next one.
streaming
youtube
media
social media
television
The most visually mind blowing websites in the world all seem to follow a similar pattern. They use 3 d animations that bring the content to life when the page is scrolled. A website like mav.farm doesn't have a scroll bar, but instead animates a whole 3 d world as as you scroll through the page. This may look impossibly difficult, but in today's video, you'll learn how to create your own 3 d animations with JavaScript using 3. Js. The by the end of this video, you will have built a personal portfolio website that's so impressive, it's guaranteed to get you a job or your money back. And you might be shocked at how easy it really is when you understand a few concepts related to cameras, lighting, and geometry. This tutorial is beginner friendly, and I'll assume you're brand new to 3 JS and 3 d graphics in general. What we'll build today is a website that uses CSS Grid for its main content and has a 3 d animated background that changes the camera perspective it as the user scrolls down. Looking closer, we have an avatar image that is actually a 3 d cube that rotates as we scroll down. Then we have a big 3 d ring that rotates continuously. You'll also notice a bunch of 3 d stars in the background that change their position as the camera moves. And at the bottom, we have a rotating moon animation. It doesn't look perfect, but it's about as realistic as the official moon landings. The inspiration for this video came from atlietotnet, which is great example of an amazing website that uses both CSS Grid and 3 JS. But what is 3 JS exactly? Well, basically, it's just a library for drawing 3 d graphics in the browser with JavaScript and WebGL. In any 3 d scene, whether it's on the web, a movie, or video game, you have a bunch of geometries or shapes the that get styled with textures, which might be done with math or just a regular raster image. A scene will also have 1 or more lights to make the shapes visible. And finally, there needs to be a camera to give the end user perspective on the screen. Now when animation comes into play, we can set up an infinite loop or some other trigger like the role bar to change the properties on these objects to animate them. 3 JS makes this process very developer friendly as you'll see throughout the video, but I would like to point out that it's not really a tool more modeling or drawing complex 3 d shapes. For that, we have tools like Blender, and you can actually import your Blender models directly into 3 JS to use them on the web. Now now, before we jump into the code, make sure to like and subscribe, then open up Versus Code to an empty directory, and open up a terminal session. We'll build this project with plain old vanilla JS, and you can find the source code on GitHub or Fireship IO. First, we need to initialize a project that can handle dependencies, them, and to do that, we'll use a tool called Vite. Create a new project by running npm init vitejs/app. Running this command will give us the option to select vanilla JS, which will initialize a new project with a main dot JS file and a package JSON where we can install dependencies. From there, install 3 JS by by running npm install 3. And after that's done, we'll run the npm run dev command to serve our app locally. That should serve the app on localhost 3,000, but then let's go into the style. Css and main dot JS file and delete all of the boilerplate code. If you look at my project files, you'll notice that I have a few images here. You can grab these images from the GitHub repo. However, I would encourage you to use your own images for this project. I'll be explaining the concepts in detail, so you can take these ideas and build your own awesome portfolio. The first thing we'll do is go into the index HTML file and add a canvas to the body, which which will be the element that shows the actual 3 JS scene. Notice how it comes before the main dot JS script and has an ID of background. From there, we'll go into our style sheet and give the canvas fixed positioning and pin it to the top left corner of the screen, which will allow it to serve as a background, and, eventually, we will overlay other HTML elements on top of it. From there, we'll go into our main JS file, and the first thing we'll do is import the 3 JS JS library. To start things off, you'll always need 3 objects, a scene, a camera, and a renderer. The scene is like a container that holds all of your objects, cameras, and lights. Now in order to look at things inside the scene, we need a camera. There are multiple different camera types in 3 JS, but the most common one you'll come across is the perspective camera, which is designed to mimic what human eyeballs would see. The first argument is field of view, which is the amount of the world that's visible based on a full bowl 360 degrees. The second argument is the aspect ratio, which is based off of the user's browser window, and we can calculated by dividing the window's inner width by the inner height. Then the last two arguments are for the view frustum to control which objects are visible relative to the camera itself. Off. Since we have point 01a1000 here, we can see pretty much everything from the camera lens. Now that we have a camera, we need a renderer them to render out the actual graphics to the scene. The renderer needs to know which DOM element to use, which will be the canvas with an ID of background. Once instantiated, we can use the renderer to set the pixel ratio to the window device pixel ratio and also make it a full screen canvas by setting the renderer size to the window size. Now currently, our camera the camera as positioned in the middle of the scene. So what I'll do next is move it along the z axis, and that'll give us a better perspective when we start adding shapes. Now, the final thing we'll do is called the renderer's render method, passing at the scene and the camera as arguments. And if we open it up in the browser, we should just have a blank screen at this point, so the next Thing will do is add an object to it. There are 3 basic steps when creating an object. First, you need a geometry or a set of vectors that define the object itself. 3. Js has a bunch of built in geometries like box, sphere, cone, cylinder, and so on. I'll go ahead and create a new them a tree, which is like a big 3 d ring. Now that we have a geometry, we need to define a material to give it color or some kind of texture. Trigger. Think of a material as wrapping paper for a geometry. There are many different kind of materials built into 3 JS for different uses that will give to different results, and you can even write your own custom shaders with WebGL to use as a material, but that's beyond the scope of this video. The now most materials rely on a light source to bounce off of them. But in this case, we'll use a basic material which requires no light source. It has a bunch of parameters for customization like a color and will also set wireframe to true to get a better look at its actual geometry. The the third step is to create a mesh by combining the geometry with the material. And that's the actual thing that we want to add to the scene, which we do by calling scene dot add. Now to actually see it, we need to re render the screen by calling the same render method again. You don't wanna have to call the render method over and over again in your code, so a better approach here is is to set up a recursive function that gives us an infinite loop that calls the render method automatically. We have a function named animate that calls request animation frame in the browser, which is a mechanism that tells the browser that you want to perform an animation. Now whenever the browser repaints the screen, it will call your render method to update the UI. Life. You can think of this as a game loop if you've ever done game development. Go ahead and call the animate function, then open up the browser, and you should see the torus shape. Them. Currently, the Taurus is not doing anything, so let's go back into our animation loop and change that. Every shape that we create has different properties like rotation, position, and scale. And and if we change its properties inside the loop, the shape will animate. In this case, we'll update the rotation along the x axis by point their one for every animation frame and will do the same thing for the y and z axis as well. Back in the browser, you should now see the torus animated in an infinite that loop. So that's pretty cool, but now I want to introduce the concept of lighting because that's what makes your 3 d objects really come to life. Going back to our the object will change it from mesh basic material to mesh standard material, which is a material that will react to light bouncing off of it. Let's also remove the wireframe property, them, then go back to the browser, and you'll notice that we have a black screen again. That's because there's nothing lighting this object up. There are many different types of lighting to choose from in 3 JS, but an easy one to get started with is a point light, which emits light in all directions as if you added a light bulb to the scene. We'll go ahead and instantiate a new point light with a color of white, and by the away. If you're wondering what this 0 x is, that is a hexadecimal literal. Whenever you write 0 x in JavaScript and most other programming languages, it means you're working with a hexadecimal value instead of a regular number type. That's just a random good thing to know, but now back to our light, we'll go ahead and position it to move it away from the center, setting its x, y, and z values to 5. Make sure to add it to the scene like any other object, then let's check it out in the browser. The the light is actually positioned inside of the torus, so it lights up the inside part of the ring. If we go back to our code and update the values to 20, it moves the light farther away and lights up a larger area of the ring. That's cool when you want to focus on a specific point, but in some cases, you might want lighting across the entire scene, in which case you can instantiate an ambient light. An ambient light is more like a floodlight in the room and will light up everything in the scene equally. Notice how we can see the entire shape of the ring at this point. Now working with lights and shapes can be very confusing, but luckily, 3 JS has a couple of helpers that can make our life much easier. The first one is the light helper, which will show us the position of a point light, instantiate the helper, then pass the point light as an argument and add it to the scene. The then notice how that added a little wireframe that shows the position and direction of the light source. Another thing that's very helpful is the grid helper, them, which draws a 2 dimensional grid along the scene. When we add a grid helper to the scene and then try to view it in the browser, you'll notice that we the skit a little gray line here. That's because our current perspective is perfectly level with the grid. We can easily make the scene more interactive by adding orbit controls to it, which will allow us to move around the scene using our mouse. To do that, we'll first need to import the orbit controls class from the 3. Js examples namespace. Once that's this done. We can then instantiate the orbit controls class and pass it the camera and the renderer DOM element as arguments. The what this will do is listen to DOM events on the mouse and update the camera position accordingly. We then need to call controls dot update in the animation loop to make sure that the changes are reflected in the UI. At this point, you should be able to go into the browser and pan around with your mouse to see the full nature of the grid. Now that we have some helpers in place, I want to show you how you can use 3 JS Math Helpers to randomly generate a large number of objects in the scene. In this case, we'll populate outer space with a bunch of randomly generated stars. To handle that, we'll create a function called add star. In inside the function. We'll start by instantiating a sphere geometry, where each sphere has a radius of 0.25. We'll then create a standard material them and join them together as a mesh. That's easy enough, but the tricky part here is how do we randomly position these stars throughout the scene. What we need to do is randomly generate an x, y and z position value for each star. We can do that by filling an array with 3 values, then Dimple map each value to the 3 JS random float spread function, which is just a helper function that randomly generates a number between negative and positive 100. We can then take those random numbers and set the position of the star, and finally add it to the scene. Now, it's us just a matter of deciding how many stars we want to add to the scene. For that, I'll create an array of 200 values, then for each value, call the add star function. Them back in the browser, our scene should be populated with 200 randomly positioned stars. And that looks pretty cool, but we could make this even better by adding a background to outer space. In many cases, you'll need to load images and textures into your scene. In this example, we'll load a simple JPEG image using the 3 JS the AS texture loader. It's worth noting that you can also pass a callback function here to be notified when the image is done loading. That's useful if you wanna show a the green bar if your scene relies on a lot of static assets. In any case, we can set the image as the scene background by simply updating that property. And now the the escape for our scene is starting to look much more interesting. We can also add textures to individual materials, which is a big complex topic known as texture mapping. Basically, texture mapping is the process of taking 2 dimensional pixels and mapping them to a three-dimensional geometry. To demonstrate a texture map, I'll go ahead and use use the texture loader to load another image, then create a mesh that contains a box geometry and a basic material. The only interesting thing here is that we'll define the map property on the material as the texture. Let's go ahead and add that object to the scene, and now when we open the browser, we have a 3 d cube with the image map to all six sides of it. That's pretty simple, but we can also combine multiple maps to create more interesting objects like we'll do for our Moon. Let's create a new mesh name to Moon that has a sphere with a radius of 3 and a mesh standard material. Now just like the previous example, we'll load a texture of the moon JPEG and add that as the map property. That'll take the image and wrap it around the sphere. But another cool thing we can do here is give it the appearance of having some depth by adding a normal map to it. As you can see here, I have this purple image, which will create the appearance of dents and bumps and allow light to bounce off of them to create an appearance of an object that's not perfectly uniform. A normal map can make an object feel much more ballistic with very little effort. Notice how the surface of the moon is no longer smooth, creating the illusion of craters and mountains. At this point, we have an animated scene, but I want to also show you how to animate it when the user scrolls. But before we can do that, we first need to add some markup to the page. In the index HTML file, them. I'm adding a bunch of markup for the header and main content of the web page. The important point here is that the content takes up a lot of critical space, allowing the main body of the website to be scrolled. You'll also wanna make sure that the root parent element has a position of absolute. In my case, that's the main element, so make sure that's updated in your CSS. Now, back in the JavaScript, I'm going to first reposition the moon to be further down the z axis because that's the direction that we'll the scrolling in. And it's worth noting that when working with many properties in 3 JS, you can either assign them using the equal sign, or you can use a setter function like setX x in this case. They both do the same thing, so it's just a matter of preference. From there, let's define a function called MoveCamera, and then and assign that function as the event handler for the document body on scroll event that will fire this function every time the user scrolls. Now inside the function the body. The first thing we need to do is calculate where the user is currently scrolled to. One way to do that is to call the that body GetBoundingClientRect function. That will give us the dimensions of the viewport and the top property will show us exactly how far we are from the top of the web page. The from there, we can start changing properties on our 3 d objects whenever this function is called. We'll go ahead and rotate the Moon and also the avatar, but the most important thing here is changing the position of the actual camera itself. The top value will always be negative, so I'm going to multiply client by a negative number. You'll likely want to play around with these numbers to get the animation you're going for. Now, the final thing I wanna show you is how I use CSS Grid to make this lay out really easy to build. I'm not going to go through every line of CSS, but I'll just show you the important things here. If we go to the main element, which is the main parent in the HTML, you'll notice that I have it set as display grid, then I have grid template columns to repeat 12 columns at one fractional unit. Basically, that gives us 12 equally sized columns on which we can position all of the children. Now if we go down to a child element like a section, the we can add the grid column property and set it to start at the 2nd column and end at the 8th column. Or in the header, we can start at the 2nd column and then have it fan across 5 columns. The bottom line here is that it's very easy to position DOM elements to align with the 3 d stuff going on in the background. I'm gonna go ahead and wrap things up there. If this video helped you, please like, subscribe, and share, and consider becoming a pro member at FireShip bio to support the channel and get even more content. Thanks for watching and I will see you in the next one.
The
the
most
most
visually
visually
mind
mind
blowing
blowing
websites
websites
in
in
the
the
world
world
all
all
seem
seem
to
to
follow
follow
a
a
similar
similar
pattern.
pattern
They
they
use
use
3
3
d
d
animations
animations
that
that
bring
bring
the
the
content
content
to
to
life
life
when
when
the
the
page
page
is
is
scrolled.
scrolled
A
a
website
website
like
like
mav.farm
mav.farm
doesn't
doesn't
have
have
a
a
scroll
scroll
bar,
bar
but
but
instead
instead
animates
animates
a
a
whole
whole
3
3
d
d
world
world
as
as
as
as
you
you
scroll
scroll
through
through
the
the
page.
page
This
this
may
may
look
look
impossibly
impossibly
difficult,
difficult
but
but
in
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
create
create
your
your
own
own
3
3
d
d
animations
animations
with
with
JavaScript
javascript
using
using
3.
3
Js.
js
The
the
by
by
the
the
end
end
of
of
this
this
video,
video
you
you
will
will
have
have
built
built
a
a
personal
personal
portfolio
portfolio
website
website
that's
that's
so
so
impressive,
impressive
it's
it's
guaranteed
guaranteed
to
to
get
get
you
you
a
a
job
job
or
or
your
your
money
money
back.
back
And
and
you
you
might
might
be
be
shocked
shocked
at
at
how
how
easy
easy
it
it
really
really
is
is
when
when
you
you
understand
understand
a
a
few
few
concepts
concepts
related
related
to
to
cameras,
cameras
lighting,
lighting
and
and
geometry.
geometry
This
this
tutorial
tutorial
is
is
beginner
beginner
friendly,
friendly
and
and
I'll
i'll
assume
assume
you're
you're
brand
brand
new
new
to
to
3
3
JS
js
and
and
3
3
d
d
graphics
graphics
in
in
general.
general
What
what
we'll
we'll
build
build
today
today
is
is
a
a
website
website
that
that
uses
uses
CSS
css
Grid
grid
for
for
its
its
main
main
content
content
and
and
has
has
a
a
3
3
d
d
animated
animated
background
background
that
that
changes
changes
the
the
camera
camera
perspective
perspective
it
it
as
as
the
the
user
user
scrolls
scrolls
down.
down
Looking
looking
closer,
closer
we
we
have
have
an
an
avatar
avatar
image
image
that
that
is
is
actually
actually
a
a
3
3
d
d
cube
cube
that
that
rotates
rotates
as
as
we
we
scroll
scroll
down.
down
Then
then
we
we
have
have
a
a
big
big
3
3
d
d
ring
ring
that
that
rotates
rotates
continuously.
continuously
You'll
you'll
also
also
notice
notice
a
a
bunch
bunch
of
of
3
3
d
d
stars
stars
in
in
the
the
background
background
that
that
change
change
their
their
position
position
as
as
the
the
camera
camera
moves.
moves
And
and
at
at
the
the
bottom,
bottom
we
we
have
have
a
a
rotating
rotating
moon
moon
animation.
animation
It
it
doesn't
doesn't
look
look
perfect,
perfect
but
but
it's
it's
about
about
as
as
realistic
realistic
as
as
the
the
official
official
moon
moon
landings.
landings
The
the
inspiration
inspiration
for
for
this
this
video
video
came
came
from
from
atlietotnet,
atlietotnet
which
which
is
is
great
great
example
example
of
of
an
an
amazing
amazing
website
website
that
that
uses
uses
both
both
CSS
css
Grid
grid
and
and
3
3
JS.
js
But
but
what
what
is
is
3
3
JS
js
exactly?
exactly
Well,
well
basically,
basically
it's
it's
just
just
a
a
library
library
for
for
drawing
drawing
3
3
d
d
graphics
graphics
in
in
the
the
browser
browser
with
with
JavaScript
javascript
and
and
WebGL.
webgl
In
in
any
any
3
3
d
d
scene,
scene
whether
whether
it's
it's
on
on
the
the
web,
web
a
a
movie,
movie
or
or
video
video
game,
game
you
you
have
have
a
a
bunch
bunch
of
of
geometries
geometries
or
or
shapes
shapes
the
the
that
that
get
get
styled
styled
with
with
textures,
textures
which
which
might
might
be
be
done
done
with
with
math
math
or
or
just
just
a
a
regular
regular
raster
raster
image.
image
A
a
scene
scene
will
will
also
also
have
have
1
1
or
or
more
more
lights
lights
to
to
make
make
the
the
shapes
shapes
visible.
visible
And
and
finally,
finally
there
there
needs
needs
to
to
be
be
a
a
camera
camera
to
to
give
give
the
the
end
end
user
user
perspective
perspective
on
on
the
the
screen.
screen
Now
now
when
when
animation
animation
comes
comes
into
into
play,
play
we
we
can
can
set
set
up
up
an
an
infinite
infinite
loop
loop
or
or
some
some
other
other
trigger
trigger
like
like
the
the
role
role
bar
bar
to
to
change
change
the
the
properties
properties
on
on
these
these
objects
objects
to
to
animate
animate
them.
them
3
3
JS
js
makes
makes
this
this
process
process
very
very
developer
developer
friendly
friendly
as
as
you'll
you'll
see
see
throughout
throughout
the
the
video,
video
but
but
I
i
would
would
like
like
to
to
point
point
out
out
that
that
it's
it's
not
not
really
really
a
a
tool
tool
more
more
modeling
modeling
or
or
drawing
drawing
complex
complex
3
3
d
d
shapes.
shapes
For
for
that,
that
we
we
have
have
tools
tools
like
like
Blender,
blender
and
and
you
you
can
can
actually
actually
import
import
your
your
Blender
blender
models
models
directly
directly
into
into
3
3
JS
js
to
to
use
use
them
them
on
on
the
the
web.
web
Now
now
now,
now
before
before
we
we
jump
jump
into
into
the
the
code,
code
make
make
sure
sure
to
to
like
like
and
and
subscribe,
subscribe
then
then
open
open
up
up
Versus
versus
Code
code
to
to
an
an
empty
empty
directory,
directory
and
and
open
open
up
up
a
a
terminal
terminal
session.
session
We'll
we'll
build
build
this
this
project
project
with
with
plain
plain
old
old
vanilla
vanilla
JS,
js
and
and
you
you
can
can
find
find
the
the
source
source
code
code
on
on
GitHub
github
or
or
Fireship
fireship
IO.
io
First,
first
we
we
need
need
to
to
initialize
initialize
a
a
project
project
that
that
can
can
handle
handle
dependencies,
dependencies
them,
them
and
and
to
to
do
do
that,
that
we'll
we'll
use
use
a
a
tool
tool
called
called
Vite.
vite
Create
create
a
a
new
new
project
project
by
by
running
running
npm
npm
init
init
vitejs/app.
vitejs/app
Running
running
this
this
command
command
will
will
give
give
us
us
the
the
option
option
to
to
select
select
vanilla
vanilla
JS,
js
which
which
will
will
initialize
initialize
a
a
new
new
project
project
with
with
a
a
main
main
dot
dot
JS
js
file
file
and
and
a
a
package
package
JSON
json
where
where
we
we
can
can
install
install
dependencies.
dependencies
From
from
there,
there
install
install
3
3
JS
js
by
by
by
by
running
running
npm
npm
install
install
3.
3
And
and
after
after
that's
that's
done,
done
we'll
we'll
run
run
the
the
npm
npm
run
run
dev
dev
command
command
to
to
serve
serve
our
our
app
app
locally.
locally
That
that
should
should
serve
serve
the
the
app
app
on
on
localhost
localhost
3,000,
3,000
but
but
then
then
let's
let's
go
go
into
into
the
the
style.
style
Css
css
and
and
main
main
dot
dot
JS
js
file
file
and
and
delete
delete
all
all
of
of
the
the
boilerplate
boilerplate
code.
code
If
if
you
you
look
look
at
at
my
my
project
project
files,
files
you'll
you'll
notice
notice
that
that
I
i
have
have
a
a
few
few
images
images
here.
here
You
you
can
can
grab
grab
these
these
images
images
from
from
the
the
GitHub
github
repo.
repo
However,
however
I
i
would
would
encourage
encourage
you
you
to
to
use
use
your
your
own
own
images
images
for
for
this
this
project.
project
I'll
i'll
be
be
explaining
explaining
the
the
concepts
concepts
in
in
detail,
detail
so
so
you
you
can
can
take
take
these
these
ideas
ideas
and
and
build
build
your
your
own
own
awesome
awesome
portfolio.
portfolio
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
go
go
into
into
the
the
index
index
HTML
html
file
file
and
and
add
add
a
a
canvas
canvas
to
to
the
the
body,
body
which
which
which
which
will
will
be
be
the
the
element
element
that
that
shows
shows
the
the
actual
actual
3
3
JS
js
scene.
scene
Notice
notice
how
how
it
it
comes
comes
before
before
the
the
main
main
dot
dot
JS
js
script
script
and
and
has
has
an
an
ID
id
of
of
background.
background
From
from
there,
there
we'll
we'll
go
go
into
into
our
our
style
style
sheet
sheet
and
and
give
give
the
the
canvas
canvas
fixed
fixed
positioning
positioning
and
and
pin
pin
it
it
to
to
the
the
top
top
left
left
corner
corner
of
of
the
the
screen,
screen
which
which
will
will
allow
allow
it
it
to
to
serve
serve
as
as
a
a
background,
background
and,
and
eventually,
eventually
we
we
will
will
overlay
overlay
other
other
HTML
html
elements
elements
on
on
top
top
of
of
it.
it
From
from
there,
there
we'll
we'll
go
go
into
into
our
our
main
main
JS
js
file,
file
and
and
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
import
import
the
the
3
3
JS
js
JS
js
library.
library
To
to
start
start
things
things
off,
off
you'll
you'll
always
always
need
need
3
3
objects,
objects
a
a
scene,
scene
a
a
camera,
camera
and
and
a
a
renderer.
renderer
The
the
scene
scene
is
is
like
like
a
a
container
container
that
that
holds
holds
all
all
of
of
your
your
objects,
objects
cameras,
cameras
and
and
lights.
lights
Now
now
in
in
order
order
to
to
look
look
at
at
things
things
inside
inside
the
the
scene,
scene
we
we
need
need
a
a
camera.
camera
There
there
are
are
multiple
multiple
different
different
camera
camera
types
types
in
in
3
3
JS,
js
but
but
the
the
most
most
common
common
one
one
you'll
you'll
come
come
across
across
is
is
the
the
perspective
perspective
camera,
camera
which
which
is
is
designed
designed
to
to
mimic
mimic
what
what
human
human
eyeballs
eyeballs
would
would
see.
see
The
the
first
first
argument
argument
is
is
field
field
of
of
view,
view
which
which
is
is
the
the
amount
amount
of
of
the
the
world
world
that's
that's
visible
visible
based
based
on
on
a
a
full
full
bowl
bowl
360
360
degrees.
degrees
The
the
second
second
argument
argument
is
is
the
the
aspect
aspect
ratio,
ratio
which
which
is
is
based
based
off
off
of
of
the
the
user's
user's
browser
browser
window,
window
and
and
we
we
can
can
calculated
calculated
by
by
dividing
dividing
the
the
window's
window's
inner
inner
width
width
by
by
the
the
inner
inner
height.
height
Then
then
the
the
last
last
two
two
arguments
arguments
are
are
for
for
the
the
view
view
frustum
frustum
to
to
control
control
which
which
objects
objects
are
are
visible
visible
relative
relative
to
to
the
the
camera
camera
itself.
itself
Off.
off
Since
since
we
we
have
have
point
point
01a1000
01a1000
here,
here
we
we
can
can
see
see
pretty
pretty
much
much
everything
everything
from
from
the
the
camera
camera
lens.
lens
Now
now
that
that
we
we
have
have
a
a
camera,
camera
we
we
need
need
a
a
renderer
renderer
them
them
to
to
render
render
out
out
the
the
actual
actual
graphics
graphics
to
to
the
the
scene.
scene
The
the
renderer
renderer
needs
needs
to
to
know
know
which
which
DOM
dom
element
element
to
to
use,
use
which
which
will
will
be
be
the
the
canvas
canvas
with
with
an
an
ID
id
of
of
background.
background
Once
once
instantiated,
instantiated
we
we
can
can
use
use
the
the
renderer
renderer
to
to
set
set
the
the
pixel
pixel
ratio
ratio
to
to
the
the
window
window
device
device
pixel
pixel
ratio
ratio
and
and
also
also
make
make
it
it
a
a
full
full
screen
screen
canvas
canvas
by
by
setting
setting
the
the
renderer
renderer
size
size
to
to
the
the
window
window
size.
size
Now
now
currently,
currently
our
our
camera
camera
the
the
camera
camera
as
as
positioned
positioned
in
in
the
the
middle
middle
of
of
the
the
scene.
scene
So
so
what
what
I'll
i'll
do
do
next
next
is
is
move
move
it
it
along
along
the
the
z
z
axis,
axis
and
and
that'll
that'll
give
give
us
us
a
a
better
better
perspective
perspective
when
when
we
we
start
start
adding
adding
shapes.
shapes
Now,
now
the
the
final
final
thing
thing
we'll
we'll
do
do
is
is
called
called
the
the
renderer's
renderer's
render
render
method,
method
passing
passing
at
at
the
the
scene
scene
and
and
the
the
camera
camera
as
as
arguments.
arguments
And
and
if
if
we
we
open
open
it
it
up
up
in
in
the
the
browser,
browser
we
we
should
should
just
just
have
have
a
a
blank
blank
screen
screen
at
at
this
this
point,
point
so
so
the
the
next
next
Thing
thing
will
will
do
do
is
is
add
add
an
an
object
object
to
to
it.
it
There
there
are
are
3
3
basic
basic
steps
steps
when
when
creating
creating
an
an
object.
object
First,
first
you
you
need
need
a
a
geometry
geometry
or
or
a
a
set
set
of
of
vectors
vectors
that
that
define
define
the
the
object
object
itself.
itself
3.
3
Js
js
has
has
a
a
bunch
bunch
of
of
built
built
in
in
geometries
geometries
like
like
box,
box
sphere,
sphere
cone,
cone
cylinder,
cylinder
and
and
so
so
on.
on
I'll
i'll
go
go
ahead
ahead
and
and
create
create
a
a
new
new
them
them
a
a
tree,
tree
which
which
is
is
like
like
a
a
big
big
3
3
d
d
ring.
ring
Now
now
that
that
we
we
have
have
a
a
geometry,
geometry
we
we
need
need
to
to
define
define
a
a
material
material
to
to
give
give
it
it
color
color
or
or
some
some
kind
kind
of
of
texture.
texture
Trigger.
trigger
Think
think
of
of
a
a
material
material
as
as
wrapping
wrapping
paper
paper
for
for
a
a
geometry.
geometry
There
there
are
are
many
many
different
different
kind
kind
of
of
materials
materials
built
built
into
into
3
3
JS
js
for
for
different
different
uses
uses
that
that
will
will
give
give
to
to
different
different
results,
results
and
and
you
you
can
can
even
even
write
write
your
your
own
own
custom
custom
shaders
shaders
with
with
WebGL
webgl
to
to
use
use
as
as
a
a
material,
material
but
but
that's
that's
beyond
beyond
the
the
scope
scope
of
of
this
this
video.
video
The
the
now
now
most
most
materials
materials
rely
rely
on
on
a
a
light
light
source
source
to
to
bounce
bounce
off
off
of
of
them.
them
But
but
in
in
this
this
case,
case
we'll
we'll
use
use
a
a
basic
basic
material
material
which
which
requires
requires
no
no
light
light
source.
source
It
it
has
has
a
a
bunch
bunch
of
of
parameters
parameters
for
for
customization
customization
like
like
a
a
color
color
and
and
will
will
also
also
set
set
wireframe
wireframe
to
to
true
true
to
to
get
get
a
a
better
better
look
look
at
at
its
its
actual
actual
geometry.
geometry
The
the
the
the
third
third
step
step
is
is
to
to
create
create
a
a
mesh
mesh
by
by
combining
combining
the
the
geometry
geometry
with
with
the
the
material.
material
And
and
that's
that's
the
the
actual
actual
thing
thing
that
that
we
we
want
want
to
to
add
add
to
to
the
the
scene,
scene
which
which
we
we
do
do
by
by
calling
calling
scene
scene
dot
dot
add.
add
Now
now
to
to
actually
actually
see
see
it,
it
we
we
need
need
to
to
re
re
render
render
the
the
screen
screen
by
by
calling
calling
the
the
same
same
render
render
method
method
again.
again
You
you
don't
don't
wanna
wanna
have
have
to
to
call
call
the
the
render
render
method
method
over
over
and
and
over
over
again
again
in
in
your
your
code,
code
so
so
a
a
better
better
approach
approach
here
here
is
is
is
is
to
to
set
set
up
up
a
a
recursive
recursive
function
function
that
that
gives
gives
us
us
an
an
infinite
infinite
loop
loop
that
that
calls
calls
the
the
render
render
method
method
automatically.
automatically
We
we
have
have
a
a
function
function
named
named
animate
animate
that
that
calls
calls
request
request
animation
animation
frame
frame
in
in
the
the
browser,
browser
which
which
is
is
a
a
mechanism
mechanism
that
that
tells
tells
the
the
browser
browser
that
that
you
you
want
want
to
to
perform
perform
an
an
animation.
animation
Now
now
whenever
whenever
the
the
browser
browser
repaints
repaints
the
the
screen,
screen
it
it
will
will
call
call
your
your
render
render
method
method
to
to
update
update
the
the
UI.
ui
Life.
life
You
you
can
can
think
think
of
of
this
this
as
as
a
a
game
game
loop
loop
if
if
you've
you've
ever
ever
done
done
game
game
development.
development
Go
go
ahead
ahead
and
and
call
call
the
the
animate
animate
function,
function
then
then
open
open
up
up
the
the
browser,
browser
and
and
you
you
should
should
see
see
the
the
torus
torus
shape.
shape
Them.
them
Currently,
currently
the
the
Taurus
taurus
is
is
not
not
doing
doing
anything,
anything
so
so
let's
let's
go
go
back
back
into
into
our
our
animation
animation
loop
loop
and
and
change
change
that.
that
Every
every
shape
shape
that
that
we
we
create
create
has
has
different
different
properties
properties
like
like
rotation,
rotation
position,
position
and
and
scale.
scale
And
and
and
and
if
if
we
we
change
change
its
its
properties
properties
inside
inside
the
the
loop,
loop
the
the
shape
shape
will
will
animate.
animate
In
in
this
this
case,
case
we'll
we'll
update
update
the
the
rotation
rotation
along
along
the
the
x
x
axis
axis
by
by
point
point
their
their
one
one
for
for
every
every
animation
animation
frame
frame
and
and
will
will
do
do
the
the
same
same
thing
thing
for
for
the
the
y
y
and
and
z
z
axis
axis
as
as
well.
well
Back
back
in
in
the
the
browser,
browser
you
you
should
should
now
now
see
see
the
the
torus
torus
animated
animated
in
in
an
an
infinite
infinite
that
that
loop.
loop
So
so
that's
that's
pretty
pretty
cool,
cool
but
but
now
now
I
i
want
want
to
to
introduce
introduce
the
the
concept
concept
of
of
lighting
lighting
because
because
that's
that's
what
what
makes
makes
your
your
3
3
d
d
objects
objects
really
really
come
come
to
to
life.
life
Going
going
back
back
to
to
our
our
the
the
object
object
will
will
change
change
it
it
from
from
mesh
mesh
basic
basic
material
material
to
to
mesh
mesh
standard
standard
material,
material
which
which
is
is
a
a
material
material
that
that
will
will
react
react
to
to
light
light
bouncing
bouncing
off
off
of
of
it.
it
Let's
let's
also
also
remove
remove
the
the
wireframe
wireframe
property,
property
them,
them
then
then
go
go
back
back
to
to
the
the
browser,
browser
and
and
you'll
you'll
notice
notice
that
that
we
we
have
have
a
a
black
black
screen
screen
again.
again
That's
that's
because
because
there's
there's
nothing
nothing
lighting
lighting
this
this
object
object
up.
up
There
there
are
are
many
many
different
different
types
types
of
of
lighting
lighting
to
to
choose
choose
from
from
in
in
3
3
JS,
js
but
but
an
an
easy
easy
one
one
to
to
get
get
started
started
with
with
is
is
a
a
point
point
light,
light
which
which
emits
emits
light
light
in
in
all
all
directions
directions
as
as
if
if
you
you
added
added
a
a
light
light
bulb
bulb
to
to
the
the
scene.
scene
We'll
we'll
go
go
ahead
ahead
and
and
instantiate
instantiate
a
a
new
new
point
point
light
light
with
with
a
a
color
color
of
of
white,
white
and
and
by
by
the
the
away.
away
If
if
you're
you're
wondering
wondering
what
what
this
this
0
0
x
x
is,
is
that
that
is
is
a
a
hexadecimal
hexadecimal
literal.
literal
Whenever
whenever
you
you
write
write
0
0
x
x
in
in
JavaScript
javascript
and
and
most
most
other
other
programming
programming
languages,
languages
it
it
means
means
you're
you're
working
working
with
with
a
a
hexadecimal
hexadecimal
value
value
instead
instead
of
of
a
a
regular
regular
number
number
type.
type
That's
that's
just
just
a
a
random
random
good
good
thing
thing
to
to
know,
know
but
but
now
now
back
back
to
to
our
our
light,
light
we'll
we'll
go
go
ahead
ahead
and
and
position
position
it
it
to
to
move
move
it
it
away
away
from
from
the
the
center,
center
setting
setting
its
its
x,
x
y,
y
and
and
z
z
values
values
to
to
5.
5
Make
make
sure
sure
to
to
add
add
it
it
to
to
the
the
scene
scene
like
like
any
any
other
other
object,
object
then
then
let's
let's
check
check
it
it
out
out
in
in
the
the
browser.
browser
The
the
the
the
light
light
is
is
actually
actually
positioned
positioned
inside
inside
of
of
the
the
torus,
torus
so
so
it
it
lights
lights
up
up
the
the
inside
inside
part
part
of
of
the
the
ring.
ring
If
if
we
we
go
go
back
back
to
to
our
our
code
code
and
and
update
update
the
the
values
values
to
to
20,
20
it
it
moves
moves
the
the
light
light
farther
farther
away
away
and
and
lights
lights
up
up
a
a
larger
larger
area
area
of
of
the
the
ring.
ring
That's
that's
cool
cool
when
when
you
you
want
want
to
to
focus
focus
on
on
a
a
specific
specific
point,
point
but
but
in
in
some
some
cases,
cases
you
you
might
might
want
want
lighting
lighting
across
across
the
the
entire
entire
scene,
scene
in
in
which
which
case
case
you
you
can
can
instantiate
instantiate
an
an
ambient
ambient
light.
light
An
an
ambient
ambient
light
light
is
is
more
more
like
like
a
a
floodlight
floodlight
in
in
the
the
room
room
and
and
will
will
light
light
up
up
everything
everything
in
in
the
the
scene
scene
equally.
equally
Notice
notice
how
how
we
we
can
can
see
see
the
the
entire
entire
shape
shape
of
of
the
the
ring
ring
at
at
this
this
point.
point
Now
now
working
working
with
with
lights
lights
and
and
shapes
shapes
can
can
be
be
very
very
confusing,
confusing
but
but
luckily,
luckily
3
3
JS
js
has
has
a
a
couple
couple
of
of
helpers
helpers
that
that
can
can
make
make
our
our
life
life
much
much
easier.
easier
The
the
first
first
one
one
is
is
the
the
light
light
helper,
helper
which
which
will
will
show
show
us
us
the
the
position
position
of
of
a
a
point
point
light,
light
instantiate
instantiate
the
the
helper,
helper
then
then
pass
pass
the
the
point
point
light
light
as
as
an
an
argument
argument
and
and
add
add
it
it
to
to
the
the
scene.
scene
The
the
then
then
notice
notice
how
how
that
that
added
added
a
a
little
little
wireframe
wireframe
that
that
shows
shows
the
the
position
position
and
and
direction
direction
of
of
the
the
light
light
source.
source
Another
another
thing
thing
that's
that's
very
very
helpful
helpful
is
is
the
the
grid
grid
helper,
helper
them,
them
which
which
draws
draws
a
a
2
2
dimensional
dimensional
grid
grid
along
along
the
the
scene.
scene
When
when
we
we
add
add
a
a
grid
grid
helper
helper
to
to
the
the
scene
scene
and
and
then
then
try
try
to
to
view
view
it
it
in
in
the
the
browser,
browser
you'll
you'll
notice
notice
that
that
we
we
the
the
skit
skit
a
a
little
little
gray
gray
line
line
here.
here
That's
that's
because
because
our
our
current
current
perspective
perspective
is
is
perfectly
perfectly
level
level
with
with
the
the
grid.
grid
We
we
can
can
easily
easily
make
make
the
the
scene
scene
more
more
interactive
interactive
by
by
adding
adding
orbit
orbit
controls
controls
to
to
it,
it
which
which
will
will
allow
allow
us
us
to
to
move
move
around
around
the
the
scene
scene
using
using
our
our
mouse.
mouse
To
to
do
do
that,
that
we'll
we'll
first
first
need
need
to
to
import
import
the
the
orbit
orbit
controls
controls
class
class
from
from
the
the
3.
3
Js
js
examples
examples
namespace.
namespace
Once
once
that's
that's
this
this
done.
done
We
we
can
can
then
then
instantiate
instantiate
the
the
orbit
orbit
controls
controls
class
class
and
and
pass
pass
it
it
the
the
camera
camera
and
and
the
the
renderer
renderer
DOM
dom
element
element
as
as
arguments.
arguments
The
the
what
what
this
this
will
will
do
do
is
is
listen
listen
to
to
DOM
dom
events
events
on
on
the
the
mouse
mouse
and
and
update
update
the
the
camera
camera
position
position
accordingly.
accordingly
We
we
then
then
need
need
to
to
call
call
controls
controls
dot
dot
update
update
in
in
the
the
animation
animation
loop
loop
to
to
make
make
sure
sure
that
that
the
the
changes
changes
are
are
reflected
reflected
in
in
the
the
UI.
ui
At
at
this
this
point,
point
you
you
should
should
be
be
able
able
to
to
go
go
into
into
the
the
browser
browser
and
and
pan
pan
around
around
with
with
your
your
mouse
mouse
to
to
see
see
the
the
full
full
nature
nature
of
of
the
the
grid.
grid
Now
now
that
that
we
we
have
have
some
some
helpers
helpers
in
in
place,
place
I
i
want
want
to
to
show
show
you
you
how
how
you
you
can
can
use
use
3
3
JS
js
Math
math
Helpers
helpers
to
to
randomly
randomly
generate
generate
a
a
large
large
number
number
of
of
objects
objects
in
in
the
the
scene.
scene
In
in
this
this
case,
case
we'll
we'll
populate
populate
outer
outer
space
space
with
with
a
a
bunch
bunch
of
of
randomly
randomly
generated
generated
stars.
stars
To
to
handle
handle
that,
that
we'll
we'll
create
create
a
a
function
function
called
called
add
add
star.
star
In
in
inside
inside
the
the
function.
function
We'll
we'll
start
start
by
by
instantiating
instantiating
a
a
sphere
sphere
geometry,
geometry
where
where
each
each
sphere
sphere
has
has
a
a
radius
radius
of
of
0.25.
0.25
We'll
we'll
then
then
create
create
a
a
standard
standard
material
material
them
them
and
and
join
join
them
them
together
together
as
as
a
a
mesh.
mesh
That's
that's
easy
easy
enough,
enough
but
but
the
the
tricky
tricky
part
part
here
here
is
is
how
how
do
do
we
we
randomly
randomly
position
position
these
these
stars
stars
throughout
throughout
the
the
scene.
scene
What
what
we
we
need
need
to
to
do
do
is
is
randomly
randomly
generate
generate
an
an
x,
x
y
y
and
and
z
z
position
position
value
value
for
for
each
each
star.
star
We
we
can
can
do
do
that
that
by
by
filling
filling
an
an
array
array
with
with
3
3
values,
values
then
then
Dimple
dimple
map
map
each
each
value
value
to
to
the
the
3
3
JS
js
random
random
float
float
spread
spread
function,
function
which
which
is
is
just
just
a
a
helper
helper
function
function
that
that
randomly
randomly
generates
generates
a
a
number
number
between
between
negative
negative
and
and
positive
positive
100.
100
We
we
can
can
then
then
take
take
those
those
random
random
numbers
numbers
and
and
set
set
the
the
position
position
of
of
the
the
star,
star
and
and
finally
finally
add
add
it
it
to
to
the
the
scene.
scene
Now,
now
it's
it's
us
us
just
just
a
a
matter
matter
of
of
deciding
deciding
how
how
many
many
stars
stars
we
we
want
want
to
to
add
add
to
to
the
the
scene.
scene
For
for
that,
that
I'll
i'll
create
create
an
an
array
array
of
of
200
200
values,
values
then
then
for
for
each
each
value,
value
call
call
the
the
add
add
star
star
function.
function
Them
them
back
back
in
in
the
the
browser,
browser
our
our
scene
scene
should
should
be
be
populated
populated
with
with
200
200
randomly
randomly
positioned
positioned
stars.
stars
And
and
that
that
looks
looks
pretty
pretty
cool,
cool
but
but
we
we
could
could
make
make
this
this
even
even
better
better
by
by
adding
adding
a
a
background
background
to
to
outer
outer
space.
space
In
in
many
many
cases,
cases
you'll
you'll
need
need
to
to
load
load
images
images
and
and
textures
textures
into
into
your
your
scene.
scene
In
in
this
this
example,
example
we'll
we'll
load
load
a
a
simple
simple
JPEG
jpeg
image
image
using
using
the
the
3
3
JS
js
the
the
AS
as
texture
texture
loader.
loader
It's
it's
worth
worth
noting
noting
that
that
you
you
can
can
also
also
pass
pass
a
a
callback
callback
function
function
here
here
to
to
be
be
notified
notified
when
when
the
the
image
image
is
is
done
done
loading.
loading
That's
that's
useful
useful
if
if
you
you
wanna
wanna
show
show
a
a
the
the
green
green
bar
bar
if
if
your
your
scene
scene
relies
relies
on
on
a
a
lot
lot
of
of
static
static
assets.
assets
In
in
any
any
case,
case
we
we
can
can
set
set
the
the
image
image
as
as
the
the
scene
scene
background
background
by
by
simply
simply
updating
updating
that
that
property.
property
And
and
now
now
the
the
the
the
escape
escape
for
for
our
our
scene
scene
is
is
starting
starting
to
to
look
look
much
much
more
more
interesting.
interesting
We
we
can
can
also
also
add
add
textures
textures
to
to
individual
individual
materials,
materials
which
which
is
is
a
a
big
big
complex
complex
topic
topic
known
known
as
as
texture
texture
mapping.
mapping
Basically,
basically
texture
texture
mapping
mapping
is
is
the
the
process
process
of
of
taking
taking
2
2
dimensional
dimensional
pixels
pixels
and
and
mapping
mapping
them
them
to
to
a
a
three-dimensional
three-dimensional
geometry.
geometry
To
to
demonstrate
demonstrate
a
a
texture
texture
map,
map
I'll
i'll
go
go
ahead
ahead
and
and
use
use
use
use
the
the
texture
texture
loader
loader
to
to
load
load
another
another
image,
image
then
then
create
create
a
a
mesh
mesh
that
that
contains
contains
a
a
box
box
geometry
geometry
and
and
a
a
basic
basic
material.
material
The
the
only
only
interesting
interesting
thing
thing
here
here
is
is
that
that
we'll
we'll
define
define
the
the
map
map
property
property
on
on
the
the
material
material
as
as
the
the
texture.
texture
Let's
let's
go
go
ahead
ahead
and
and
add
add
that
that
object
object
to
to
the
the
scene,
scene
and
and
now
now
when
when
we
we
open
open
the
the
browser,
browser
we
we
have
have
a
a
3
3
d
d
cube
cube
with
with
the
the
image
image
map
map
to
to
all
all
six
six
sides
sides
of
of
it.
it
That's
that's
pretty
pretty
simple,
simple
but
but
we
we
can
can
also
also
combine
combine
multiple
multiple
maps
maps
to
to
create
create
more
more
interesting
interesting
objects
objects
like
like
we'll
we'll
do
do
for
for
our
our
Moon.
moon
Let's
let's
create
create
a
a
new
new
mesh
mesh
name
name
to
to
Moon
moon
that
that
has
has
a
a
sphere
sphere
with
with
a
a
radius
radius
of
of
3
3
and
and
a
a
mesh
mesh
standard
standard
material.
material
Now
now
just
just
like
like
the
the
previous
previous
example,
example
we'll
we'll
load
load
a
a
texture
texture
of
of
the
the
moon
moon
JPEG
jpeg
and
and
add
add
that
that
as
as
the
the
map
map
property.
property
That'll
that'll
take
take
the
the
image
image
and
and
wrap
wrap
it
it
around
around
the
the
sphere.
sphere
But
but
another
another
cool
cool
thing
thing
we
we
can
can
do
do
here
here
is
is
give
give
it
it
the
the
appearance
appearance
of
of
having
having
some
some
depth
depth
by
by
adding
adding
a
a
normal
normal
map
map
to
to
it.
it
As
as
you
you
can
can
see
see
here,
here
I
i
have
have
this
this
purple
purple
image,
image
which
which
will
will
create
create
the
the
appearance
appearance
of
of
dents
dents
and
and
bumps
bumps
and
and
allow
allow
light
light
to
to
bounce
bounce
off
off
of
of
them
them
to
to
create
create
an
an
appearance
appearance
of
of
an
an
object
object
that's
that's
not
not
perfectly
perfectly
uniform.
uniform
A
a
normal
normal
map
map
can
can
make
make
an
an
object
object
feel
feel
much
much
more
more
ballistic
ballistic
with
with
very
very
little
little
effort.
effort
Notice
notice
how
how
the
the
surface
surface
of
of
the
the
moon
moon
is
is
no
no
longer
longer
smooth,
smooth
creating
creating
the
the
illusion
illusion
of
of
craters
craters
and
and
mountains.
mountains
At
at
this
this
point,
point
we
we
have
have
an
an
animated
animated
scene,
scene
but
but
I
i
want
want
to
to
also
also
show
show
you
you
how
how
to
to
animate
animate
it
it
when
when
the
the
user
user
scrolls.
scrolls
But
but
before
before
we
we
can
can
do
do
that,
that
we
we
first
first
need
need
to
to
add
add
some
some
markup
markup
to
to
the
the
page.
page
In
in
the
the
index
index
HTML
html
file,
file
them.
them
I'm
i'm
adding
adding
a
a
bunch
bunch
of
of
markup
markup
for
for
the
the
header
header
and
and
main
main
content
content
of
of
the
the
web
web
page.
page
The
the
important
important
point
point
here
here
is
is
that
that
the
the
content
content
takes
takes
up
up
a
a
lot
lot
of
of
critical
critical
space,
space
allowing
allowing
the
the
main
main
body
body
of
of
the
the
website
website
to
to
be
be
scrolled.
scrolled
You'll
you'll
also
also
wanna
wanna
make
make
sure
sure
that
that
the
the
root
root
parent
parent
element
element
has
has
a
a
position
position
of
of
absolute.
absolute
In
in
my
my
case,
case
that's
that's
the
the
main
main
element,
element
so
so
make
make
sure
sure
that's
that's
updated
updated
in
in
your
your
CSS.
css
Now,
now
back
back
in
in
the
the
JavaScript,
javascript
I'm
i'm
going
going
to
to
first
first
reposition
reposition
the
the
moon
moon
to
to
be
be
further
further
down
down
the
the
z
z
axis
axis
because
because
that's
that's
the
the
direction
direction
that
that
we'll
we'll
the
the
scrolling
scrolling
in.
in
And
and
it's
it's
worth
worth
noting
noting
that
that
when
when
working
working
with
with
many
many
properties
properties
in
in
3
3
JS,
js
you
you
can
can
either
either
assign
assign
them
them
using
using
the
the
equal
equal
sign,
sign
or
or
you
you
can
can
use
use
a
a
setter
setter
function
function
like
like
setX
setx
x
x
in
in
this
this
case.
case
They
they
both
both
do
do
the
the
same
same
thing,
thing
so
so
it's
it's
just
just
a
a
matter
matter
of
of
preference.
preference
From
from
there,
there
let's
let's
define
define
a
a
function
function
called
called
MoveCamera,
movecamera
and
and
then
then
and
and
assign
assign
that
that
function
function
as
as
the
the
event
event
handler
handler
for
for
the
the
document
document
body
body
on
on
scroll
scroll
event
event
that
that
will
will
fire
fire
this
this
function
function
every
every
time
time
the
the
user
user
scrolls.
scrolls
Now
now
inside
inside
the
the
function
function
the
the
body.
body
The
the
first
first
thing
thing
we
we
need
need
to
to
do
do
is
is
calculate
calculate
where
where
the
the
user
user
is
is
currently
currently
scrolled
scrolled
to.
to
One
one
way
way
to
to
do
do
that
that
is
is
to
to
call
call
the
the
that
that
body
body
GetBoundingClientRect
getboundingclientrect
function.
function
That
that
will
will
give
give
us
us
the
the
dimensions
dimensions
of
of
the
the
viewport
viewport
and
and
the
the
top
top
property
property
will
will
show
show
us
us
exactly
exactly
how
how
far
far
we
we
are
are
from
from
the
the
top
top
of
of
the
the
web
web
page.
page
The
the
from
from
there,
there
we
we
can
can
start
start
changing
changing
properties
properties
on
on
our
our
3
3
d
d
objects
objects
whenever
whenever
this
this
function
function
is
is
called.
called
We'll
we'll
go
go
ahead
ahead
and
and
rotate
rotate
the
the
Moon
moon
and
and
also
also
the
the
avatar,
avatar
but
but
the
the
most
most
important
important
thing
thing
here
here
is
is
changing
changing
the
the
position
position
of
of
the
the
actual
actual
camera
camera
itself.
itself
The
the
top
top
value
value
will
will
always
always
be
be
negative,
negative
so
so
I'm
i'm
going
going
to
to
multiply
multiply
client
client
by
by
a
a
negative
negative
number.
number
You'll
you'll
likely
likely
want
want
to
to
play
play
around
around
with
with
these
these
numbers
numbers
to
to
get
get
the
the
animation
animation
you're
you're
going
going
for.
for
Now,
now
the
the
final
final
thing
thing
I
i
wanna
wanna
show
show
you
you
is
is
how
how
I
i
use
use
CSS
css
Grid
grid
to
to
make
make
this
this
lay
lay
out
out
really
really
easy
easy
to
to
build.
build
I'm
i'm
not
not
going
going
to
to
go
go
through
through
every
every
line
line
of
of
CSS,
css
but
but
I'll
i'll
just
just
show
show
you
you
the
the
important
important
things
things
here.
here
If
if
we
we
go
go
to
to
the
the
main
main
element,
element
which
which
is
is
the
the
main
main
parent
parent
in
in
the
the
HTML,
html
you'll
you'll
notice
notice
that
that
I
i
have
have
it
it
set
set
as
as
display
display
grid,
grid
then
then
I
i
have
have
grid
grid
template
template
columns
columns
to
to
repeat
repeat
12
12
columns
columns
at
at
one
one
fractional
fractional
unit.
unit
Basically,
basically
that
that
gives
gives
us
us
12
12
equally
equally
sized
sized
columns
columns
on
on
which
which
we
we
can
can
position
position
all
all
of
of
the
the
children.
children
Now
now
if
if
we
we
go
go
down
down
to
to
a
a
child
child
element
element
like
like
a
a
section,
section
the
the
we
we
can
can
add
add
the
the
grid
grid
column
column
property
property
and
and
set
set
it
it
to
to
start
start
at
at
the
the
2nd
2nd
column
column
and
and
end
end
at
at
the
the
8th
8th
column.
column
Or
or
in
in
the
the
header,
header
we
we
can
can
start
start
at
at
the
the
2nd
2nd
column
column
and
and
then
then
have
have
it
it
fan
fan
across
across
5
5
columns.
columns
The
the
bottom
bottom
line
line
here
here
is
is
that
that
it's
it's
very
very
easy
easy
to
to
position
position
DOM
dom
elements
elements
to
to
align
align
with
with
the
the
3
3
d
d
stuff
stuff
going
going
on
on
in
in
the
the
background.
background
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like,
like
subscribe,
subscribe
and
and
share,
share
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
bio
bio
to
to
support
support
the
the
channel
channel
and
and
get
get
even
even
more
more
content.
content
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers explain how to create a 3-deal 3 job using CSS, 3 JS, and 4 JS, including a rotating star and rotating moon image. They also explain how to import image models and use them in the website. The process involves starting with a portfolio website, creating a canvas, rerecoding the file, and using the 3 JS Math Helpers to generate objects in the scene. They also explain how to use the tool to generate random objects and lay out using responsive layout in the header and body.
Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial
The most visually mind blowing websites in the world all seem to follow a similar pattern. They use 3 d animations that bring the content to life when the page is scrolled. A website like mav.farm doesn't have a scroll bar, but instead animates a whole 3 d world as as you scroll through the page. This may look impossibly difficult, but in today's video, you'll learn how to create your own 3 d animations with JavaScript using 3. Js. The by the end of this video, you will have built a personal portfolio website that's so impressive, it's guaranteed to get you a job or your money back. And you might be shocked at how easy it really is when you understand a few concepts related to cameras, lighting, and geometry. This tutorial is beginner friendly, and I'll assume you're brand new to 3 JS and 3 d graphics in general. What we'll build today is a website that uses CSS Grid for its main content and has a 3 d animated background that changes the camera perspective it as the user scrolls down. Looking closer, we have an avatar image that is actually a 3 d cube that rotates as we scroll down. Then we have a big 3 d ring that rotates continuously. You'll also notice a bunch of 3 d stars in the background that change their position as the camera moves. And at the bottom, we have a rotating moon animation. It doesn't look perfect, but it's about as realistic as the official moon landings. The inspiration for this video came from atlietotnet, which is great example of an amazing website that uses both CSS Grid and 3 JS. But what is 3 JS exactly? Well, basically, it's just a library for drawing 3 d graphics in the browser with JavaScript and WebGL. In any 3 d scene, whether it's on the web, a movie, or video game, you have a bunch of geometries or shapes the that get styled with textures, which might be done with math or just a regular raster image. A scene will also have 1 or more lights to make the shapes visible. And finally, there needs to be a camera to give the end user perspective on the screen. Now when animation comes into play, we can set up an infinite loop or some other trigger like the role bar to change the properties on these objects to animate them. 3 JS makes this process very developer friendly as you'll see throughout the video, but I would like to point out that it's not really a tool more modeling or drawing complex 3 d shapes. For that, we have tools like Blender, and you can actually import your Blender models directly into 3 JS to use them on the web. Now now, before we jump into the code, make sure to like and subscribe, then open up Versus Code to an empty directory, and open up a terminal session. We'll build this project with plain old vanilla JS, and you can find the source code on GitHub or Fireship IO. First, we need to initialize a project that can handle dependencies, them, and to do that, we'll use a tool called Vite. Create a new project by running npm init vitejs/app. Running this command will give us the option to select vanilla JS, which will initialize a new project with a main dot JS file and a package JSON where we can install dependencies. From there, install 3 JS by by running npm install 3. And after that's done, we'll run the npm run dev command to serve our app locally. That should serve the app on localhost 3,000, but then let's go into the style. Css and main dot JS file and delete all of the boilerplate code. If you look at my project files, you'll notice that I have a few images here. You can grab these images from the GitHub repo. However, I would encourage you to use your own images for this project. I'll be explaining the concepts in detail, so you can take these ideas and build your own awesome portfolio. The first thing we'll do is go into the index HTML file and add a canvas to the body, which which will be the element that shows the actual 3 JS scene. Notice how it comes before the main dot JS script and has an ID of background. From there, we'll go into our style sheet and give the canvas fixed positioning and pin it to the top left corner of the screen, which will allow it to serve as a background, and, eventually, we will overlay other HTML elements on top of it. From there, we'll go into our main JS file, and the first thing we'll do is import the 3 JS JS library. To start things off, you'll always need 3 objects, a scene, a camera, and a renderer. The scene is like a container that holds all of your objects, cameras, and lights. Now in order to look at things inside the scene, we need a camera. There are multiple different camera types in 3 JS, but the most common one you'll come across is the perspective camera, which is designed to mimic what human eyeballs would see. The first argument is field of view, which is the amount of the world that's visible based on a full bowl 360 degrees. The second argument is the aspect ratio, which is based off of the user's browser window, and we can calculated by dividing the window's inner width by the inner height. Then the last two arguments are for the view frustum to control which objects are visible relative to the camera itself. Off. Since we have point 01a1000 here, we can see pretty much everything from the camera lens. Now that we have a camera, we need a renderer them to render out the actual graphics to the scene. The renderer needs to know which DOM element to use, which will be the canvas with an ID of background. Once instantiated, we can use the renderer to set the pixel ratio to the window device pixel ratio and also make it a full screen canvas by setting the renderer size to the window size. Now currently, our camera the camera as positioned in the middle of the scene. So what I'll do next is move it along the z axis, and that'll give us a better perspective when we start adding shapes. Now, the final thing we'll do is called the renderer's render method, passing at the scene and the camera as arguments. And if we open it up in the browser, we should just have a blank screen at this point, so the next Thing will do is add an object to it. There are 3 basic steps when creating an object. First, you need a geometry or a set of vectors that define the object itself. 3. Js has a bunch of built in geometries like box, sphere, cone, cylinder, and so on. I'll go ahead and create a new them a tree, which is like a big 3 d ring. Now that we have a geometry, we need to define a material to give it color or some kind of texture. Trigger. Think of a material as wrapping paper for a geometry. There are many different kind of materials built into 3 JS for different uses that will give to different results, and you can even write your own custom shaders with WebGL to use as a material, but that's beyond the scope of this video. The now most materials rely on a light source to bounce off of them. But in this case, we'll use a basic material which requires no light source. It has a bunch of parameters for customization like a color and will also set wireframe to true to get a better look at its actual geometry. The the third step is to create a mesh by combining the geometry with the material. And that's the actual thing that we want to add to the scene, which we do by calling scene dot add. Now to actually see it, we need to re render the screen by calling the same render method again. You don't wanna have to call the render method over and over again in your code, so a better approach here is is to set up a recursive function that gives us an infinite loop that calls the render method automatically. We have a function named animate that calls request animation frame in the browser, which is a mechanism that tells the browser that you want to perform an animation. Now whenever the browser repaints the screen, it will call your render method to update the UI. Life. You can think of this as a game loop if you've ever done game development. Go ahead and call the animate function, then open up the browser, and you should see the torus shape. Them. Currently, the Taurus is not doing anything, so let's go back into our animation loop and change that. Every shape that we create has different properties like rotation, position, and scale. And and if we change its properties inside the loop, the shape will animate. In this case, we'll update the rotation along the x axis by point their one for every animation frame and will do the same thing for the y and z axis as well. Back in the browser, you should now see the torus animated in an infinite that loop. So that's pretty cool, but now I want to introduce the concept of lighting because that's what makes your 3 d objects really come to life. Going back to our the object will change it from mesh basic material to mesh standard material, which is a material that will react to light bouncing off of it. Let's also remove the wireframe property, them, then go back to the browser, and you'll notice that we have a black screen again. That's because there's nothing lighting this object up. There are many different types of lighting to choose from in 3 JS, but an easy one to get started with is a point light, which emits light in all directions as if you added a light bulb to the scene. We'll go ahead and instantiate a new point light with a color of white, and by the away. If you're wondering what this 0 x is, that is a hexadecimal literal. Whenever you write 0 x in JavaScript and most other programming languages, it means you're working with a hexadecimal value instead of a regular number type. That's just a random good thing to know, but now back to our light, we'll go ahead and position it to move it away from the center, setting its x, y, and z values to 5. Make sure to add it to the scene like any other object, then let's check it out in the browser. The the light is actually positioned inside of the torus, so it lights up the inside part of the ring. If we go back to our code and update the values to 20, it moves the light farther away and lights up a larger area of the ring. That's cool when you want to focus on a specific point, but in some cases, you might want lighting across the entire scene, in which case you can instantiate an ambient light. An ambient light is more like a floodlight in the room and will light up everything in the scene equally. Notice how we can see the entire shape of the ring at this point. Now working with lights and shapes can be very confusing, but luckily, 3 JS has a couple of helpers that can make our life much easier. The first one is the light helper, which will show us the position of a point light, instantiate the helper, then pass the point light as an argument and add it to the scene. The then notice how that added a little wireframe that shows the position and direction of the light source. Another thing that's very helpful is the grid helper, them, which draws a 2 dimensional grid along the scene. When we add a grid helper to the scene and then try to view it in the browser, you'll notice that we the skit a little gray line here. That's because our current perspective is perfectly level with the grid. We can easily make the scene more interactive by adding orbit controls to it, which will allow us to move around the scene using our mouse. To do that, we'll first need to import the orbit controls class from the 3. Js examples namespace. Once that's this done. We can then instantiate the orbit controls class and pass it the camera and the renderer DOM element as arguments. The what this will do is listen to DOM events on the mouse and update the camera position accordingly. We then need to call controls dot update in the animation loop to make sure that the changes are reflected in the UI. At this point, you should be able to go into the browser and pan around with your mouse to see the full nature of the grid. Now that we have some helpers in place, I want to show you how you can use 3 JS Math Helpers to randomly generate a large number of objects in the scene. In this case, we'll populate outer space with a bunch of randomly generated stars. To handle that, we'll create a function called add star. In inside the function. We'll start by instantiating a sphere geometry, where each sphere has a radius of 0.25. We'll then create a standard material them and join them together as a mesh. That's easy enough, but the tricky part here is how do we randomly position these stars throughout the scene. What we need to do is randomly generate an x, y and z position value for each star. We can do that by filling an array with 3 values, then Dimple map each value to the 3 JS random float spread function, which is just a helper function that randomly generates a number between negative and positive 100. We can then take those random numbers and set the position of the star, and finally add it to the scene. Now, it's us just a matter of deciding how many stars we want to add to the scene. For that, I'll create an array of 200 values, then for each value, call the add star function. Them back in the browser, our scene should be populated with 200 randomly positioned stars. And that looks pretty cool, but we could make this even better by adding a background to outer space. In many cases, you'll need to load images and textures into your scene. In this example, we'll load a simple JPEG image using the 3 JS the AS texture loader. It's worth noting that you can also pass a callback function here to be notified when the image is done loading. That's useful if you wanna show a the green bar if your scene relies on a lot of static assets. In any case, we can set the image as the scene background by simply updating that property. And now the the escape for our scene is starting to look much more interesting. We can also add textures to individual materials, which is a big complex topic known as texture mapping. Basically, texture mapping is the process of taking 2 dimensional pixels and mapping them to a three-dimensional geometry. To demonstrate a texture map, I'll go ahead and use use the texture loader to load another image, then create a mesh that contains a box geometry and a basic material. The only interesting thing here is that we'll define the map property on the material as the texture. Let's go ahead and add that object to the scene, and now when we open the browser, we have a 3 d cube with the image map to all six sides of it. That's pretty simple, but we can also combine multiple maps to create more interesting objects like we'll do for our Moon. Let's create a new mesh name to Moon that has a sphere with a radius of 3 and a mesh standard material. Now just like the previous example, we'll load a texture of the moon JPEG and add that as the map property. That'll take the image and wrap it around the sphere. But another cool thing we can do here is give it the appearance of having some depth by adding a normal map to it. As you can see here, I have this purple image, which will create the appearance of dents and bumps and allow light to bounce off of them to create an appearance of an object that's not perfectly uniform. A normal map can make an object feel much more ballistic with very little effort. Notice how the surface of the moon is no longer smooth, creating the illusion of craters and mountains. At this point, we have an animated scene, but I want to also show you how to animate it when the user scrolls. But before we can do that, we first need to add some markup to the page. In the index HTML file, them. I'm adding a bunch of markup for the header and main content of the web page. The important point here is that the content takes up a lot of critical space, allowing the main body of the website to be scrolled. You'll also wanna make sure that the root parent element has a position of absolute. In my case, that's the main element, so make sure that's updated in your CSS. Now, back in the JavaScript, I'm going to first reposition the moon to be further down the z axis because that's the direction that we'll the scrolling in. And it's worth noting that when working with many properties in 3 JS, you can either assign them using the equal sign, or you can use a setter function like setX x in this case. They both do the same thing, so it's just a matter of preference. From there, let's define a function called MoveCamera, and then and assign that function as the event handler for the document body on scroll event that will fire this function every time the user scrolls. Now inside the function the body. The first thing we need to do is calculate where the user is currently scrolled to. One way to do that is to call the that body GetBoundingClientRect function. That will give us the dimensions of the viewport and the top property will show us exactly how far we are from the top of the web page. The from there, we can start changing properties on our 3 d objects whenever this function is called. We'll go ahead and rotate the Moon and also the avatar, but the most important thing here is changing the position of the actual camera itself. The top value will always be negative, so I'm going to multiply client by a negative number. You'll likely want to play around with these numbers to get the animation you're going for. Now, the final thing I wanna show you is how I use CSS Grid to make this lay out really easy to build. I'm not going to go through every line of CSS, but I'll just show you the important things here. If we go to the main element, which is the main parent in the HTML, you'll notice that I have it set as display grid, then I have grid template columns to repeat 12 columns at one fractional unit. Basically, that gives us 12 equally sized columns on which we can position all of the children. Now if we go down to a child element like a section, the we can add the grid column property and set it to start at the 2nd column and end at the 8th column. Or in the header, we can start at the 2nd column and then have it fan across 5 columns. The bottom line here is that it's very easy to position DOM elements to align with the 3 d stuff going on in the background. I'm gonna go ahead and wrap things up there. If this video helped you, please like, subscribe, and share, and consider becoming a pro member at FireShip bio to support the channel and get even more content. Thanks for watching and I will see you in the next one.
The speakers explain how to create a 3-deal 3 job using CSS, 3 JS, and 4 JS, including a rotating star and rotating moon image. They also explain how to import image models and use them in the website. The process involves starting with a portfolio website, creating a canvas, rerecoding the file, and using the 3 JS Math Helpers to generate objects in the scene. They also explain how to use the tool to generate random objects and lay out using responsive layout in the header and body.