JavaScript Tutorial with Three.js – 5 Projects for Beginners

Key Takeaways

Welcome to this project-based course where you will master fundamental JavaScript and 3JS by building five impressive standalone projects. Developed by Bobby Row, this course provides a step-by-step road map to creating amazing 3D web experiences with 3JS. You'll begin by learning how to apply textures and then immediately dive into building your first major project, a 3D globe floating in a starry sky. Next, you'll create dynamic particle effects like fire and sparkles, implement smooth scroll triggered animations, and even build an interactive scene using the Rapier physics engine. By the end, you'll have a portfolio of projects, and the confidence to build your own. Ever wanted to make a 3D Earth, fire and smoke particles, smooth scrolling effects, and chaos with physics? I'm Bobby Row, your guide to turning JavaScript into generative playgrounds. For loads of projects, tutorials, effects, history, and more, visit my YouTube channel, Robot Bobby. This tutorial is laid out in five standalone projects. A basic understanding of JavaScript is recommended. Firstly, we'll lay out a road map to help you get started with 3JS. The first project is everything you need to know about applying textures to your 3D models. Then, we'll create a 3D globe floating among the stars with all the country outlines. Next, simple particle effects like fire, smoke, and sparkles. Scroll animation is next. Smooth animation triggered by scrolling. And lastly, interactive physics project with 3JS and Ravier physics. That'll blow your mind. Since each project is standalone, feel free to skip around. Let's go. Okay. Okay. I've been asked to create a 3JS road map by you guys and by YouTube Analytics. I also want to answer a question that I get a lot, and that's how do I get started with 3JS? It's actually a lot easier than you would think. But where do you start and what do you learn? Well, today I'm going to be making a cool 3D scene while I teach you guys how to get started creating stuff with 3JS. But we're not just going to make any old 3D scene. We're going to make a beautiful interactive animated scene. So, let's get started. [Music] Use the link in the description for 20% off Exponent to ace your next tech interview. Let's break down the exact steps to go from curious beginner to crafting amazing 3D scenes in 3JS. Think of 3.js as your personal 3D toolbox for the web. It's a handy JavaScript library that makes cool 3D stuff way easier than it sounds. Doesn't have to be 3D, could be 2D. If you're new to coding, try a playground like Code Pen or JS Fiddle. No setup, no stress. If you're comfy coding at home, whip out your favorite text editor and run things locally. We have three main things in 3JS. The scene, the camera, and the renderer. Picture a movie theater. The scene is the big screen where everything happens. The camera is you watching the show, and the renderer is the projector bringing the movie to life. So, let's talk about the fundamentals. Geometries, materials, and meshes. Geometries are the shapes like cubes and spheres or something funky that you dream up. The material is the look and feel, the style, whether it's shiny metal or red plastic or glowing neon or something else. The mesh combines the geometry and material. You have an object ready to animate. Okay, for our scene, let's define all the geometries and all the materials. And then we'll drop them into a couple of arrays, geometries and materials. We'll create our first mesh just to make sure it's working. The lighting is not working yet. So, I'll turn off metalness. Good. Good. That fixes it. Next, to render all the meshes, we'll use a get mesh function that takes an index and returns a mesh. Good. Now, we'll create a group that holds all the meshes. Use a good old for loop and boom. Lighting is a big deal. Trust me. Proper lights can turn a flat, lifeless scene into something that looks real and alive. You want a cozy vibe? Go soft. Feeling dramatic? Crank up that directional light and get some stark shadows. Animations. Making stuff move is easier than you think. With just a few lines of code, you can spin a cube like it's on a lazy Susan or bounce a sphere like it's late for the next scene. Okay, to get things animated, let's use an update function on each of the meshes and another on the group that will manage them and slap them. So, here's your road map. As a beginner, start small. Plop a cube in a scene and just look at it. Then add a camera so you can actually see what you've created. Throw in some simple controls like orbit controls to move around your scene and to get comfy. Intermediate. Learn how to load 3D models like gltfs so you're not stuck with just cubes and spheres. Next, we'll use the gltf loader add-on to load our duck.gb GB model. We'll call the traverse method on the loaded gltf to parse out the geometry and the material in this the duck. And where's our duck? It's way the too big. No problem. Inside the traverse method will fix the duck scale. Dive into textures and environment maps to give surfaces that wow factor. We're going to use the Ultra HDR loader to load a beautiful environment map. A bit of tweaking and debugging and beautiful HDR lighting. Let's refine the animation using the maths sign and math.coign methods. Mix in a bit of conditional logic and [Music] advanced. Learn performance hacks like frustring or instance geometry to keep your scene running buttery smooth. Embrace shaders. These are like secret potions that can add a whole new level of artistry to your work. Add a physics engine like Rapier or a library like React 3 fiber to build genuinely next level experiences. Where to find help and inspiration? The official 3JS documentation is pure gold. Seriously, check out the fundamentals section. Your future self will thank you. You've also got a friendly 3JS Discord community. GitHub for Code Peaks, Reddit, R/3JS, and of course, YouTube. Learn by watching others and then adding your personal twist. Remember, every 3D artist started out squinting at a cube on a screen, wondering what's next. Keep at it, experiment, and learn from it. Don't be afraid to break things. Sometimes that's how you discover the coolest ideas. Now, go forth, build something cool, and let your creativity run wild. Textures inside of 3JS. It's kind of a big topic. I'm using as a guide the wonderful overview that Gregman has provided. Greg Tavvaris has provided on the 3JS website and I'm just going to give the some basic examples of how to use textures inside of 3JS and some best practices and caveats as well. So starting with this cube, let's slap a texture on there and see what happens. Um let's create a texture loader. Text loader equals a new 3.exture texture loader and we'll just say const wood text equals text loader.load. It's actually one dashwood loading it checking for errors. Like for example, if I had named it improperly, I would see an error in the console. Couldn't find it. But it is loading correctly and I can use that as the map for my material. The map property gets the wood texture. Boom. Wood. Look at that. Look at that nice wood. Also metal. You can put a metal texture on there. Isn't that nice? Um, take a look at the texture. You can see it's actually kind of squashed a little bit. This is not a square texture, but I'm assigning it to square faces. So, that's that. One solution to that is to hang on. Make it square. Let's see. About 1024, I think, would be good. Copy. Save that as metal 1024. JPG and save it to my desktop. I hope that was my desktop. And I'm going to load that instead. 1024 after I put it in the directory. Save it. There it is. See how it's uh it it it's uniform now. It's not squashed. One last texture I want to load just to see how it looks is gray brick. gray brick.jpeg. Yeah. So, there's a very very simple way to load a texture and use it in your project. Another way to load textures is to wait for them to load. Um and you can pass see handle texture load or better yet just do it like this. Um texture I'm passing a function to this call to load and um that's fine. That's fine. Why don't we just say console.log texture Okay. And check our console. There's our texture. So, we've loaded textures and we've applied them to the map attribute of a material color channel. So, that's what you're looking at right now with this cube. Let's try applying textures to other attribute channels, normal and roughness. Check out the section on materials to learn more about what these attributes are. For now, we're just going to see what they look like. Let's change the geometry to a Taurus knot. Boom. So, we're loading this UV.jbg texture. When we use this callback, this function that we pass into the load, we can do things to the texture after we've loaded. What I want to do though is set the wrap s and wrap t. Wrap s is horizontal. Wrap t is vertical. In this case, wrap S is along the length of the Taurus knot and wrap T is uh radial. This is the default is kind of stretched out. But if I set the lengthwise repeat to six, they're almost looking like a grid now. A nice grid. Set it to eight. But let's set the repeat wrapping. There's a couple other types of wrapping. Clamp to edge wrapping. Let's see what that looks like. Okay, that's the default, I guess. And then mirrored repeat wrapping. I like the sound of that. In In this case, it creates these. Hang on. Stop rotating. That's too much. In In this case, it kind of doubles up where the textures repeat. Let's just stick with repeat wrapping. I think that's going to give us the most bang for our buck. That's the color channel. We could also apply this to different channels, but before I do that, I'm just going to change this to a mesh standard material. And I'm changing it because this is going to respond to lights. First of all, I've got this hemisphere light. And secondly, it's going to have it give me access to a bunch of other channels like the normal map and the roughness map. Roughness map is going to affect the shininess like uh zero. A value of zero for roughness is perfectly shiny and a value of one is flat or matte, I should say. All right. Well, let's load some stuff up. I'm going to load a normal map and a roughness map. And let's change this to be a template string. And we'll pass in this path property. And let's get rid of this. PNG is what we're dealing with here. I've got a convention set up in the course files for base color, normal, and roughness. Let's just see what happens. Save this. Oh, I didn't set up path yet. My bad. Const path is equal to assets textures. We'll start with this one called tiles. Save. Boom. There we go. I'm only applying the color texture. Let's add a light. I think adding a primary light is going to make this much more interesting because we'll see highlights. Const key light is equal to a new directional light with an intensity of one. I'll set its position and add it to the scene. 22, not 222. I'm going to dim down this hemisphere light as well. Okay. And just to see that highlight roughness is zero. Now we should be able to see that shininess. Isn't that nice? It's shiny. Okay. Commenting out that roughness. Let's see what the normal map looks like. In fact, let's look at the normal map by itself. Yeah, the normal map represents the position of the normals. In this case, it's telling the normals to have this broken tile texture. Cool, right? You can scale. Oh, this is that's kind of outside the scope. Nope. Doing it anyway. Normal scale can be set to a new vector 3 and you can um you can reduce the effect so that it's barely noticeable. Also, you could double it so it's much more noticeable. Okay, that's the normal map. Roughness map looks like this. And now notice the shininess has a pattern to it. That pattern is set by an image that I loaded, the texture that I loaded. If we combine that with the map, look at the effect it has. So those areas where the tiles are missing in the color are not shiny. I think that's such a cool effect. And let's just bring it all home with the normal map. Cool, right? Let's see how this looks with some others like a metal. And it's not looking great. So, let's turn up this quality called metaleness. Yeah, that's right. There's a property called metalness. Save it. And that's going to give us a more metally look. Again, we're getting that normal map. And well, let's just see what the normal map looks like. It's pretty subtle. So, I'm going to crank up that normal scale so we can see it better. 4, 4. Yeah, I can see that better. I like it better scaled up like that. Let's see. What if we turn on the metalness and crank up the roughness? Wow, look at that. And finally, let's turn on the roughness map. Yeah, I think it looks better with the um the normal scale set higher. Great. Let's look at leather. Let's turn down the normals. Oh, isn't that nice? And turn off the metal. It's a leather texture. It's a leather texture. Yeah. tweak to your liking. Let's turn this up to two comma two. Let's just double the normal scale to really emphasize that texture. Isn't that lovely? Let's turn off the roughness map. Kill the metalness in the map. So, we're just looking at the normals now. And add the roughness map. Yeah, there we go. I like turning up the metals. Makes it look like it's got um gloss on it. What's that? One more. How about Oh, there are no more. Bummer. Ever since I started playing with 3JS, I've always wanted to draw the Earth in lines and it's it's been difficult. Uh I haven't had much success until recently when I came across a wonderful code repository. the it's an abandoned code repo. It's it's been disused and archived, but I was able to clone it or fork it rather and update it to work with the new version of the most recent version of 3JS version 170. And this is what it looks like when you feed it the countries JSON. So, I thought it would be fun to walk through how to set this up today, this really cool looking globe, and to tweak it and make it look even better than this. Let's get started. But first, I'd like to talk about my 3JS basics course. It's designed to be short and digestible. Each lesson is between 5 and 15 minutes long. It teaches you something, hopefully gives you a foundation, and allows you to just start using it right away. Check it out. Cool. Let's start from here. This is the basic template that you can download from GitHub. Link also in the description. Just check the description for all the links. And for this, let's turn off the gradient background and turn the cube into a sphere. Okay. And let's let's do the edges geometry for this. So edges equals a new edges geometry for that geometry. And then line segments. Yeah, I want that. How's that look? Huh? Doesn't look so good. Line basic material. Align mat. Let's do it like that. I see. So, that's not happening. Let's get rid of that and turn that off for a second. Okay, that's better. Woo, that's a lot better. Because I'm using these this edges geometry, I get rid of all Let's see. Hang on. I'll pass in a threshold, too. Zero. This is what the wireframe sphere usually looks like. You get all of those every single tri triangle rendered, but If you just increase this second parameter slightly, you get this instead. I wonder if you increase it to five. What happens then? Same thing. There's a there is a threshold that if you increase it Oh, this is supposed to be an integer anyway. Um, if you increase it beyond which you just can't see anything like that. Also that. Oh, look at that. Wow. Wow. Look at that. I did not anticipate that. 12. Oh, 12 is too much. 11. 11's pretty good. Anything more than 11 is going to break it though, right? I don't think I can pass it a fractional value. Oh, it's so cool. Look at those lines. Um, the value I'm looking for though is one. And that'll just remove the triangles. Great. If you want, you can lighten up that material slightly. We've got um we can tell it to be transparent and give it an opacity of uh 0.4. Yeah, it's a little bit lighter. And we can add stars. Um, import get starfield from my library and then instantiate that below the background which we're not using. Const stars equals a new equals get starfield and then scene.add stars. We can increase the number of stars slightly. num stars is 1,000 and I'm not passing it radius. All right, I think a diameter of two would work better for the sphere geometry. Um, radius of two rather. Yeah, I like that. Now, let's draw the countries on there. To use to draw the countries, I'm going to do two things. I'm going to use this library. Excuse me, this one. This three gojson. So, let's import it. It's included in the project files. I think it's uh import draw something. I can't remember. Let's have a look. Uh, no. Source. Here we go. It's draw three geo. I don't love the name of that method, but what are you going to do from it's actually just in here in the source. Let's save it. If it doesn't blow up, then the import was successful. And then let's use it along with let's see where let's define that. I don't need this hemisphere light anymore. Right below the starfield I guess let's say fetch the gojson the path to the gojson and then do something with the data afterwards. Yeah, draw three geo. Um, the path is I think it's in source or no, I can't remember. Let's have a look. Test. No, not test. just gojson slash giojson slashc countries. I'm I'm waiting for it to finish typing for me and it won't. Oh, I need a comma here. Before we draw it, let's just console log it out and see what it looks like. Console log data. And it's successful. Let's check the console. And there's no data there. Why not? Why aren't you showing me any data? console.log data. H I I'm confused why this isn't working. I'm going to compare it to the previous version which was working fine. It looks like this. Fetch then response blah. Okay, let's do that instead. Instead of passing in a call back like this, just fetch like that. And then it then do something with that response. And then that's that's all good. That's what I did in the other scene. Let's hold on to that for a second. Just console.log text. Oh, look at all that text. So what happened here? I call the fetch API and then with the response I got I call this text method. I don't really know what that does and then I just logged it out but instead I want to parse it calling JSON.parse parse and then call this draw 3J geo which is going to return a group or an object 3D one of the two and I can add that to the scene. Um here's the data I'm passing in the radius I want it to be drawn at and this material options the color. Let's save it. And there we've got countries. Um, I would love to dig into this three gojson. Wait, that's not the one. Is this it? Yeah, this one. I would love to dig into here and break down what it's doing, but I'm I resist the urge to do that because I don't think it's it's gerine to graphics specifically. What do I mean by that? I mean it's really mostly about parsing the gojson. the the thing it does is it'll take the gojson and it's going to parse it saying hey what kind of object is this and if so do you know do a different activity whether it's draw a point draw a line and it's going to take oh by the way the gojson is just a bunch of uh 2D points right uh latitude and longitude and so this gojson library is going to make those three-dimensional points that 3JS can use to draw Okay, that's enough of that. Let's get out of here. To make this look better, I want to add fog to the scene. Let's see. Scene.fog is equal to It always gives me the one I don't want first. EXP2. And let's give it a color and a depth, a threshold, I think it is. And then I need to tell the stars to ignore the fog. Um I think it's is it use fog? No. Fog. Yeah, fog is false. I don't know if that works. No, it doesn't work. Um okay, let's grab that real quick and put it in the source. Oh. Oh, good. Starfield's already in there. I know. So is the layer. SRC. SRC. Let's update those. Great. Let's open it up. Um, sprite here. I guess I'm just going to set it fog. It's false. And there's my stars. Yay. Oh, interesting. The lines are not using the fog. I don't like that. I want him to use the fog. I can see it working on the globe geometry, but not on the lines. So, let's see if the lines will listen to me and when I tell them to to use the fog. Here's that material. Fingers are crossed. Fog. True. Yay, that worked great. What did I just do for these these country lines? I went into its material and told it uh I Hey, I want you to use fog. Oh, I love that that works. I love that that works. I wonder if I can tweak that. Um, I think I can. What am I doing? I'm just changing the cameras near and far, hoping that that'll affect the fog. Wow. Some other things I would do to this is try out a texture on the sphere. See how that looks with the lines on top of it. See if they line up. I'm not sure they will, but you could probably make it line up. Uh, another thing to try with colors, like try out some different colors. Maybe randomize them. Uh, okay. Okay. All right. I'll do I'll do it right now. Um, let's see. I'm not using any of this dash stuff in this version. Let's get rid of all of that. But this color, I want to set that for every time I draw a line. Every time I draw a line, it's either drawing a country or a piece of a country. And let's see what that looks like. So const color equals a new a new three dot color. And then I'm going to set the HSL, excuse me, math.random. And now each color, each country will have a random color. Looks colorful and delightful. But let's say we want to limit those hues. um hue let's say either to green so const hue use math.random random um times 0 two I think the green hue is like around a third so 0.33 plus we should be all kind of yellowish greenish great that was successful um I could if it's uh if they're too science Annie, I can move them shift them a little bit south on the hue scale. Oh, it looks cool. Um, I'd like them to be red as well. So, I kind of want either or. Um, so if math.random is greater than 0.5, then starting hue should be 0.3. Let's see what that looks like. Oh, that doesn't look good at all. Oh, because it's a const. Sorry. Yeah, not that's great. That's great. That's exactly what I wanted. Oh, there's some funkiness here. And I think that's because the lines are overlapping. If you know how to easily solve that, I would love to hear about it. But it's drawing the lines redundantly for every country. So every border has two lines. Like this border between Mexico and the United States has two. And this border between Canada and the United States also are lines overlapping each other. Yeah. What else? What else to do with this? Add some interactivity. Oh, that would be so cool. Play with different looks for the globe. Anyway, that's it for today. In the beginning, WebGL was hard and there was chaos. Then came 3JS, bringing 3D graphics into a clear and magical order. Ready to create some special effects magic? Let's dive in. We're exploring particle effects using a simple particle system, which is heavily inspired by one that Simon Dev created for his YouTube channel. What I want to explore today is some effects that we can achieve with that basic system. Really basic effects. Like for example, this kind of like um sparkly kind of effect. Uh in fact, making that a little more sparkly might be cool. Maybe they're just a little bit brighter now. Um or this fire effect. Yeah, let's create a smoke effect. And I can import the get particle system from get particle system. Great. Below where I've created the cube, I'm going to say const smoke smoke effect equals get particle system. I don't know why I put a space there. So, we're going to pass four things into here. A camera, emitter, sorry, five things. a rate and a texture. And let's make it smoke. The emitter is not that, it's the cube. The parent is the scene. Yeah, that's it. And then we just want to uh smoke effect.update. And we'll pass in what is approximately 160th of a frame uh 1/60th of a second rather. Let's see if there's any errors. There is. Can't find assets/smoke because it's not in assets. It's in um nope.g, but I'm not seeing anything. Camera emitter scene. Oh, look at the rate. That's terrible. Thanks, GitHub copilot. Oh yeah, look at that. The little guys little guys spinning off of there. Let's get that particle system. So there there are a few things I want to change. I want to change the velocity of the particles when they're created so that they kind of float up. I want to change the size so that they're big and I can see the texture on there. Change the color. And I want them right now they're shrinking as they get older. And I want them to grow as they get older. Let's start with a color. Uh this color spline here. I could just make them just make them white. Just like that. Now they're staying white all the time. The max size instead of doing being 0.15, I'm going to say 3.0 or not not 2.0, 3.0. Already it's looking pretty pretty awesome. Let's just make this zero for the x velocity, zero for the z velocity, and then up and down for the x for the y velocity. Actually, I did that backwards. This should be see 1.5. Oh, that's too fast. 1.0. So, they're growing too fast, and I don't want them to have that um blend mode. Let's kill the blending. And they're growing way too fast. Let's make max size two. Where's the size splint? Here it is. Oh, I see. That's why. Let's make it over their entire life, they just go from tiny to big. There we go. There's that smoke. Let's move the cube down a little bit so we can see the smoke effect a little bit better. Cube position set0.75. We're still getting that clipping, but now we have a interesting smoke effect. So, ideally, we'll be able to Let's go back to fire. Say fire. And to change the look of this, I'm going to modify the um the add particles. This part here. Hang on. Where where's the top of this add particles method? Get particle system. Here we go. Here's the add particles. I'm going to make them so they don't live as long. Drop the max life down. Um, let's see. What else do I want to do to these guys? The size. Do we want to make them larger? Where is the size defined? Right here. Let's call this max size and add this up here. Max size. Right now it's at two. Let's make them slightly bigger. 3.0. There is a max size for particles. And it turns out on my computer, my graphics card that max size is 512 pixels. I'm starting with a texture that's already 512. So, this is a concern. Like, if I crank this this value this max size up way up, they're not just they're not going to get that big. They just pop up to the max size and stay there. And I don't think that looks like a very good effect. So, be careful of that max size. Good. They're they're they're not living as long. And uh they're they're the right size. Now, I could modify the velocity. We could make them go a little bit like move a little bit more quickly. And the the real thing that's really going to sell them is adding this blending to the this blending property to the material. Now it actually is looking hot. Let's just crank it up a little bit more to 50. It doesn't start out that great, but it gets pretty good. We built this fire effect. Now I want to create this effect where there's kind of just like these uh floating um dots flying off of the the object which is emitting particles. Let's give it a shot. We'll start with the fire. And to the first thing I want to do is to change the texture from fire to circle. Okay. So good. We're in our particle system. Um right now you got this giant kind of floaty puffy plasma effect. Not ideal. Uh for now let's turn off the blending so we can see the individual guys. And I want to turn off uh let's see, just make the color white for now. They're way too big right now. Um let's have a max size of 0.25. Tiny fraction of what it was. And let's quickly change that velocity. I'm going to grab these values here because I want to use the randomness like that. And instead of random, let's say uh max velocity like that. And come up here and make max velocity. Yeah, there it's just slower. And now they're going to shoot out in all directions. That's sort of interesting. Um let's change the color. So here they're kind of turning from pink to red. Um let's start at yellow and stay at yellow for a while until like three or four and then go to what other color? Black. Let's start with black. See how that looks. Starting at yellow and then it just goes out to black. That's not bad. Not great either. How about yellow to green to black? They kind of just look green. Yellow stay yellow then go to green. It wants me to go to red. I don't want to go to red. So this yellow and then green and then black. But yellow, green, and white. and the size spline. Let's make this them shrink gun to nothing. Um, make that four. Okay, let's see how that looks. That's not bad. It's not really great either. Let's see what the life looks like. We could experiment with making him not live very long. They just kind of pop on and pop off. Interesting. Or making them live a really long time. That's sort of lovely. I think the max size is still too big. Just make it 0.1. And it's not very magical. Um, what if I give it this color? It's a little better. I think the size is too small. Make it slightly bigger. 50% bigger. That kind of looks like snow. Now, if we I just want to see what it looks like to stop the rotation of the cube. And it's just kind of sitting there and these particles are floating off it in all directions. Huh. The the rotation actually sells it a little better. It feels like the particles are are spinning off. They're inheriting the velocity, the rotational velocity of the cube. Hey coders, today we're turning your scrolls into something epic. [Music] Say goodbye to this and say hello to this. If you're ready to level up your web animations, let's dive right in. This is what we're building. But the background element is a 3JS scene. And as we scroll down the page, the scene updates. Let's dive into it. Shrink this down just a hair here. Starting from our template, we're going to add a bunch of HTML. We want content that we can scroll through. Currently, the HTML page is literally empty. We're going to update the style first. And this time we're going to import a couple of fonts. One for the headers and one for the body. Defining the font and the background gradient. Here's the CSS rules for a navigation bar. And these are the elements inside that bar. Now a container to hold all of the different sections of our HTML page. And this contains the rules for our 3JS canvas. Here's some more rules to define the sections of our page. And that concludes the CSS. Now, let's add the markup down here. Here's the navigation bar. And here's the container. Inside of there, we're defining a canvas element. This will be our 3JS scene. Usually, we let 3JS instantiate and add to the DOM our canvas element, but today we're just going to put it right in the page. so that we can control how it interacts with the rest of the elements on there. Now, I want to add a bunch of sections, stuff that we can scroll through, which is the point of this tutorial. And that's it. If I save with all the content we just added and the CSS rules. Oh, and there's our canvas at the bottom. So, let's modify the JavaScript now that we've updated our DOM. I no longer need this append child statement. Instead, we're going to pass in the canvas. And I'll say the canvas is const canvas document.getelement by ID3 canvas. And this is what that looks like now. Now the orbit controls no longer work. So I'm just going to remove the orbit controls. We're not going to need those anymore. And remove that update that statement. Now we've got a 3JS scene that lives behind a bunch of markup that we are scrolling through. Let's get the 3JS scene to respond to the scroll events. It's really really easy to get that to happen. We can say window.adde eventlister and scroll is what we want. The main thing I want to point out here is this variable here. Scroll Y. Let's log it out and see what it looks like. console.log scroll y. That's fine. Thank you very much. And now as I scroll down the page, that is a value between zero and one, which represents my scroll progress, so to speak. I said that wrong. Okay, let's log out. Get rid of all this. The window.scrolly. Let's scroll Y. Let's just log that out and see what the value is. The top of the page, it's zero. And as we scroll down, this number climbs to the height of the entire page in pixels. Let's modify that. I'm going to I'm getting this client height. What's client height? It's the total number of pixels on the page in terms of height. So, if I divide the scroll position by the total height, we get a percentage. I want scroll pause Y to be set to that value. Uh, I'm going to define it up here. Let scroll Whoops. Roll pause y equals zero. And then I'm setting it as I scroll. Instead of this box, why don't we load up that astronaut and add the stars? I happen to have the astronaut model in OBJ format. I wish it were GB or GLTF format, but alas, it is not. First thing I want to do is define a loading manager and an OBJ loader with that loading manager. And I'm going to create this empty JavaScript object that's going to contain all the data I want to pass into my scene after it's done loading and so on. Now I'm going to load that astronaut file. It's included in the project. And once it's loaded, I want to set up a variable called geometry. And I'm going to traverse the loaded file and say, oh, is one of your children a mesh? Good. That's now the geometry. Now I'm going to add that to the scene data object I created a moment ago. Save. So that's it. Let's import the OBJ loader. Thank you. It's actually just JSM. Now we got to create that init scene method. And this is what that looks like. Function init scene. And it's going to take the scene data. All I really care about is that geo. So, I'm just going to deconstruct it from the get- go. I want to close this out at the end of my animate method, like so. Format it. So, that's what it looks like. And let's just console.log the geo as it comes in. Save. Check the console. There's my geometry. Good. Let's use that instead of the geometry. I could just replace this declaration here like that. Boom. And there's an astronaut floating in our scene. Ah, that's so cool. Um, a tip that's useful, I think, is geometry center. And that's just going to move it right to the middle of the screen. Isn't that nice? Not only did it move it to the middle of screen, but you'll notice it's now pivoting around its center instead of around the heel. So, that's that's a good benefit. Great. Oh, I better move this scroll pause Y out of the net scene method because it needs to be in the global scope, so to speak. Don't need that log anymore. Also, um I don't need this automatic rotation anymore. I'm going to call this mesh instead. Right now, our character is just sitting there. He also looks pretty terrible. Why don't we change his material to a mesh mat cap material. Okay. And then the mat cap will be that. I'll just call this loader. I don't like instantiating a loader inside of the say const loader equals 3x texture loader. I think I might need to call it text loader because I'm using loader down here. All right, good enough. Text loader. All right, does that work? Lovely. Again, this file is included in the project. Let's get him responding to scroll events. This is how that works. This is how easy that is. Mesh rotation doy equals math.py time the scroll. Let's start with just the scroll. Pause y and then see and see why we need to we want to add the math.py. Look, as I scroll, he gently rotates. It's a value between 0 and one. And that's just like about a quarter of a circle. If we add math.py, now it's a half of a circle. Cool. Right now, we can scale him and position him how we want him on the page. Mesh. Set. We'll move him over a bit. Um 2.5 really. And then negative.5 and then zero. Let's see how that looks. Oh, a little bit too far. Yeah. And let's scale him down a hair, do you think? Or is he a good size? He is a good size, isn't he? Let's leave him that big. Um, we're almost done. Let's add the stars. import get starfield and it's not in there. It's actually just in the same directory like that. And then we'll say stars const stars equals get starfield with the number of stars and add it to the scene. H I'm not seeing it. Oh, I think I know why. Excuse me. I It can't find the texture it wants to use for the stars. So, I'm not even going to use it. I I commented out the line where it's looking for a texture, and I'm just They're just going to be little squares instead to make it just much more straightforward. Let's animate the stars, too. I think it'll be fun if the stars sort of zoom in as you scroll. In the animate method, I've got a reference to stars here. I can say stars.position.z equals scrollp.y* -2. Let's see how that looks. Oh, it's very subtle. See how they just kind of move back a little bit. How about this? Times 12. Now I got to zoom forward a lot more. It's not enough, right? Oh, I love that so much. I think it looks really good. I mean, as we get close, you see these little squares for stars. Not great. One last tip before we wrap up is right now when you scroll and stop it's it's a little bit harsh. It's a sudden stop. There's no transition. Let's add a transition con. Oh, sorry. It has to be let let goal pause equal zero. And we'll set that goal pause to be math.py. That's fine. That's fine. That's going to be gold pause. And this is the trick. Instead of just setting the rotation Y, we're going to interpolate mesh.rotation.y minus gold pause. And I'm tweaking this value a little bit. Let's actually start at 1.0. And this tells it to just uh gradually transition. If I set this to 1.0, there will be no there's actually no change at all. It's just the same kind of no transition. If I set it to a small value like 0.1, see how when I stop scrolling, he continues scrolling a little bit. He continues rotating a little bit. That's what I want. If I set it to to a high value, like 1.9, he just he kind of trembles a little bit. You see him trembling there? H it's not very obvious. can set it to a really tiny value and really see this effect in action. I don't like it that slow. It seems disconnected from what's actually happening. Let's do the same for the stars position. Like so. Minus equals stars.position.z times I think we did 24. Oh, 0.1. And we could set this we could make this um um interpolation rate or just plain old whoops just plain old rate and then we have a variable up here const rate that's equal to 0.1 just to pull it out so I think 24 is too much now um because gold pause is three times higher well math pie is 3.14 right So let's take a third of 24 8. There you have it. Tweak as you like. You can apply a different um you could apply a different matcap material to the astronaut or you get a different model altogether. Let's do black. You could lose the gradient background so that he's just kind of floating deeper out in space where there aren't any nebulas and stuff for more contrast. Today I wanted to explore some variations on one of my favorite projects, physics with Rapier. We're going to add a loaded model that I see that duck floating around in there. We're going to add a bunch of different shapes. We're going to modify the physics to work with those shapes, add camera controls, better mouse interactivity. Yeah. So, um, lots of different stuff to explore. If you're new to 3JS, check out my course, Learn 3JS Basics. First, I want to give an overview of where we're starting. This is usually the starting point for my 3JS projects, but today we're starting here. Okay. So, what's what's already here? I've initialized the renderer, the scene, the camera, and the animation loop. I've filled the scene with these icicosahedrons, these balls. I've wired up mouse controls so that I can move this glowy white object around with a mouse. Then, I added rapier physics to this, creating a collider for each one of those icosahedrons and for this glowy ball to create this effect. I kind of tweaked it until it looked just the way I liked it. Then I added post-processing to get that cool glowy effect. La. Like so. Great. First thing I want to do is just pull out this effects processing. I don't need this post-processing anymore. And change this from composer to renderer. And the scene. Hang on. Let me come back over to the scene. Now it looks like this. I want to add the orbit controls. import orbit controls. Run this. So, this path works because I have this set up in my um imports inside of index.js here. This import map. There's jsm. What I want to do is add rapier to this too, like so. and just take this just kind of clean things up a little bit, make my um index.html look a little nicer and I'm going to remove that version number on there. Good. Let's instantiate those orbit controls. To do that, I'm going to use Super Whisperer with VS Code agents. Super Whisperer is running every time I press the option and spacebar together on my Mac. I'm going to type command I in VS Code and then option space. Instantiate the orbit controls. Hit enter. Okay, accept it. I only really need these these guys here. And come down to your animate method or render loop and uncomment that or just add that line. Now I can orbit around the scene. That creates a problem with the mouse position. Um, once I've orbited, the mouse doesn't behave like you'd expect. So, we'll fix that later. I want to come into my get bodies method. This is where I create the meshes and also wire up the physics for each of the meshes in here. I want to remove that wireframe like so. And that should look like this. I also want to import get layer from source/get layer.js. Now let's use VS Code agents again like so. Command I instantiate get layer in a variable called bg sprites. kind of trivial. I could have done it. Oh my goodness. That's pretty cool looking actually. Oh, I like it. Oh, that makes me think of a really cool effect. Um, put a sprite inside a parent inside of an invisible ball and then we'll have these little puffs interacting too. Oh, that sounds cool. Stay focused. All right. So, the defaults are not working for us. All right. So, these defaults, I think, will be better. That's it for the tweaks. Now, we're going to start with the variations. Okay. I want to fix the lighting first of all. To do that, I'm going to import the Ultra HDR loader. import ultra HDR loader and thank you. Copilot knows where that is. Like so. And let's say why did that happen? Why is it mad about that? Oh. Oh, because I need to update the version here. Let's make this 71 instead. That version of 3JS doesn't have the HDR loader. Okay, good. Good. Right before I instantiate that mouse position, let's do this. Control I and option space. Instantiate the Ultra HDR loader and load an image. All right. So, that's how that works. Um, let's just replace this placeholder path with uh I think I'm calling it env/ this. Give her that HDR texture mapping scene. Let's just see how it looks. Yeah, look at that. Now I'm using an HDR image as a background and the light source. Here's what it looks like without the background. You could just see it working as a light. I think it's so cool. The agent created this HDR loader and then loaded um the image just setting the mapping to this aqua rectangular reflection mapping and then setting the background and the environment of the scene. Okay, I'm going to get rid of that this hemisphere light. Now, how does that change it? It's just a little bit different, I think. Okay, let's swap out materials on these guys. Right now they have a mesh standard material. Let's make it a mesh physical material. Is there any noticing not noticeable difference? Don't think so. Now I want to set the roughness and I want to set the metaless too. See how that changes the appearance. Yeah, if you set the roughness to zero, it's going to be 100% reflective. There'll be little shiny balls if you if you turn off the flat shading. Like so. I'm going to leave flat shading on and turn up the Let's see. If you turn up the metalness, they'll be darker and more interesting looking like chrome little chrome balls. Okay. Let's leave them as chrome balls and modify the roughness so that like a blurry reflection kind of also interesting. All right. So, hang on. Roughness. Let's make it five and leave flat shading on. Yeah. Leave metalness on. Okay. Oh, a bunch more primit primitives. Here's what that looks like. Let's ask Copilot to do it first. create an array with a bunch of different primitive geometries in it. Great. Now, inside of my get body method, instead of just instantiating this icosahedron. We'll say get geometry and we'll pass in the size. All right, let's see what you got. Yep. Oh, I don't need all this crap. Return geometry. Yes. Don't need any of this or the translate scale. we could use, but I think I'm going to leave the scale off. Like, who cares? Oh, look at all those geometries. This exposes an interesting shortcoming of our setup um that we're going to see in a we're going to fix in a second. And that is the there's no rotational physics. It's all just positional. None of these guys are rotating. Let's let's fix that. I want to modify the physics here. I'm where I'm up. This is the update method for each one of these little objects in here. Okay, here's where I set the position and I add the force to pull it toward the middle of the screen. Let's also update the velocity. Uh, excuse excuse me, the rotational. Let's Let's see if um GitHub co-pilot can do it first. Add rotational physics. Okay. Well, let's try it anyway. No. No. Oh, shoot. That's it. It works. I like it. Okay, now debug mode. It's already looking pretty cool, but they're definitely overlapping in an unnatural way. So come in here um inside of index.js. First thing I want to do is create a points object by creating three.points with a points geometry and a points material. I'm going to use this for the debug view. I'm going to add it to the scene. And now inside of render debug view, just grab the world.bug render. As you recall, the world is here. It's instantiation of rapier world. And then I'm just going to set the position attribute and color attribute of these points. Add that to our method render debug view. And now we can see we can see how what the colliders look like. And you can see they don't really match up very well with our um primitives. Let's modify these so that they're semi-transparent. Transparent is true. and opacity 0.5. And you could see that's what that that looks like. Okay. So the the thing the solution I suggest for this is instead of just using the same collider for every object, let's customize each collider so that it m it fits the mesh. Um convex hole is what that is. I think I could just type convex hole. And what it wants is points. Points um and those are const points are equal to the uh the geometry actually just the geometry needed above like so. Now I can say geometry.attributes.position.array array. Let's see what happens when I do that. Oh, look. Look at that. It's uh the performance just dropped significantly, right? Everything's moving a lot slower. But now you see that the colliders. And let's let's turn off the debug view momentarily. And make our objects opaque again because it's impossible to see what's happening when they're transparent like that. Now they collide properly. and it's really slow and I think that's because of some of the geometries I'm using. Um, let's import the rounded box geometry like this. And I want to use that instead of box. And I'll just use these defaults. And I broke it. I don't know what I don't know what the hell you're talking about here. Do you see the rounded box geometry? I don't see it. Let's isolate it so we can see it. There they are. Oh, look at that. Um, I think these are reversed. I'm not sure. Let's Let's figure it out, though. Uhoh. That's That's unstable. We might want to play with some damping to stabilize this simulation because it's pretty wild right now. Okay, I'm hoping that'll stay stable. So, what type of parameters does this constructor need? and it'll tell me height, width, dates, and segments. I think it's inverted the radius in the segments, though. So, let's try this. Uh, two and 0.2. Oh, wow. I didn't expect that. 0.1. Yeah, that's it. It inverts those for some reason. Add a couple more segments and those look pretty good. Is it slow though? Yeah, it's a little chunky, isn't it? So, let's reduce the segments down to two. And Bob's your uncle. Let's add in Taurus geometry. I think that's got way too many. Let's make that 32. Oh, that's nice. They're way too big, though. 3 and uh 0.15. Is that better? I think it's better. Um, I like the tetrahedrin geometry and the taurus knot geometry. Let's make that smaller and 0.15. This is way too heavy though. Make it 64 and 12. It's reducing the poly count. And if we turn off flat shading, it's going to look a little bit nicer. So, I'm sort of making a trade-off between the resolution of the geometry and the u the appearance of the render. Aren't those just too big? Uh they are be 2 and 0.1 2 and 0.1. So, a lot of tweaking here. Oh, that's better. Yeah. Look at that. Oh, I like it. Great. Um, I don't really need this, do I? All right. I want to improve the mouse interactivity right now. If I pan around the scene using the orbit controls, it kind of ruins the mouse interactivity. Okay, let's fix it. We've got this mouse position already defined. What I want to do now is to add an invisible