Create a new Vite Project

Elements of a 3D scene

Install three.js and @types/three 

Add objects to the scene

Camera and Renderer

Transform objects position

Scaling objects

Rotating objects

Animations

Resize scene along with browser window

Debug with Tweakpane

Organize your Three.js Project - Part I

Organize your Three.js Project - Part 2

Organize your Three.js Project - Part 3

threejs

Build production-ready 3D experiences on the web with Three.js, TypeScript, and Vite. This workshop takes you from an empty project to a modular, maintainable Three.js application using the same architectural patterns you'd reach for on a real product team.

You'll start by scaffolding a Vanilla TypeScript Vite project and wiring up `three` with full `@types/three` support. From there, you'll build up the core building blocks of every 3D scene u2014 the Scene, Camera, Renderer, and Canvas u2014 and develop a mental model for how they fit together before a single pixel hits the screen.

Once the fundamentals click, you'll bring the scene to life. You'll add meshes with `BoxGeometry` and `MeshBasicMaterial`, translate and orient them using `position`, `rotation`, and `scale`, and learn what a `Vector3` actually represents in 3D space. You'll drive smooth, frame-rate independent motion with `requestAnimationFrame` and Three.js's `Clock`, and make the canvas feel native to the browser by handling window resize events without stretching or distortion. You'll wire up Tweakpane to build a live debug panel so you can tune scene parameters in real time instead of bouncing back to the editor.

The back half of the workshop is where most Three.js tutorials stop u2014 and where this one pushes further. You'll refactor a messy `main.ts` into a set of composable factory functions, each owning its own subsystem (renderer, camera, resize observer) and exposing a `dispose` method for clean teardown. You'll handle Vite's hot module replacement with `import.meta.hot` so cameras, renderers, and WebGL contexts are properly cleaned up between reloads u2014 preventing the memory leaks and duplicated contexts that quietly kill dev performance in real projects.

By the end, you'll have a scalable Three.js project structure, a working debug workflow, and the architectural instincts to keep a 3D codebase maintainable as it grows.

## What you'll learn

- Scaffolding a Three.js project with Vite and TypeScript
- The anatomy of a 3D scene: Scene, Camera, Renderer, Canvas
- Transforming objects with position, rotation, and scale
- Building a frame-rate independent animation loop
- Handling resize and HMR without leaking WebGL contexts
- Debugging scenes live with Tweakpane
- Factory composition and `dispose` patterns for modular Three.js code

## Who this is for

Developers comfortable with TypeScript and modern frontend tooling who want to move past copy-paste Three.js snippets and build 3D applications with the same rigor they'd apply to the rest of their stack.


Modern Three.js Course

Scaffold a new project using pnpm create vite, select the Vanilla TypeScript template, and verify the dev server runs correctly.

[00:00] One of the first things I did when I started learning ThreeJS was to build my own boilerplate. So I could remove the set of friction and focus purely on experimenting and following new lessons. In this first module of the course, you will learn how to create your own modern 3GS boilerplate powered with Bit, completely typed, well structured, and designed to provide you a great developer experience. Let's open the terminal and use pnpm create-bit to start the wizard. Let's name our project something like modern3ds-starter And then you can select the framework of choice, but in this case for this course we're gonna use vanilla We're gonna select TypeScript and yeah, why not?

[00:57] We're gonna use roll down beat Then choose install and wait for the installation to finish Open the project in your IDE of choice. In this case, I'm using cursor and Here we have a pretty simple bit application that is using TypeScript for the models So we have an entry point which is the index.html that contains a div with an idea of app. Then in the main TS which is the entry for TypeScript we're replacing the content with this inner HTML while doing document query selection. So this is the default content that comes with the installation, so we're gonna remove everything that we don't need. We're gonna remove this, and for now, we're just going to say, hello egghead.

[01:49] We probably also want to remove this one and we can get rid of the counter TS since we're not gonna use it. We hit save, We open the terminal and then let's see if everything works. So let's use pnpm run dev to run the local server. When opening the browser, you should be seeing something like this. To confirm that the hot model replacement is working, we're going to add something like this to our string.

[02:19] And voila, we have our project set up.



Walk through the core building blocks of every Three.js scene. Every 3D scene out there is composed of the same main elements:

- Objects (cube, lights)
- A camera
- A renderer
- The canvas

[00:00] So before we install 3ds and create our 3d scene let's see what elements actually make up a 3d experience So first we need to render something it could be A cube A really good looking cube like this one. It could be the donut that we saw at the beginning Maybe we create something like a floor with a plane like this and we add some lighting to the scene so one light here the illuminates our cube and a little bit of that. So this is what we call objects. So we're going to take those objects and frame them in what we call a view. Okay, so something like this.

[01:06] And to be able to see them we're gonna need a camera. I'm gonna take the camera here and then the camera is gonna allow us to take pictures each frame of our 3dsim. Then we need to render these images that the camera is taking into a DOM element to be able to see them in our web application. So this is where the DOM element of the canvas comes into play. So 3GS is going to take all of our objects, camera, lights, etc.

[01:51] And it's going to use the WebGL render, which is the API That the browser will use for this and it's gonna run everything in a DOM element of the canvas with.



Install the three package and @types/three for full TypeScript support. Import Three.js into the project and confirm the types are working.

[00:01] To install Three.js we're going to open the terminal in our IDE, and we're going to do pnpm add 3. We also want to install the types for full type support. Since the 3GS library doesn't offer it by default we're gonna use a library called types and we're gonna use types tree we're gonna add it as a developer dependency let's go and replace the dummy text that we have at the beginning and let's gonna add a canvas element with the idea of WebGL to be able to retrieve it. So canvas like this. Okay let's hit save and see if it's actually added to the DOM.

[00:48] So we open the developer tools and here we have our WebGL canvas. Now let's start using 3GS. So you're gonna see a lot of resources out there that import all as tree from tree. And then let's console log what is inside of that tree model that we're getting into the main TS. So if we open the developer tools, and we're gonna see a module that has a bunch of different classes and methods.

[01:25] This is everything that forms Tree.js as a whole, okay? This is totally fine because modern bundlers like the ones that use V to like roll down They're going to do the tree shaking for you if you do something like this, for example tree scene Okay, we save it It's a class. So this is gonna work fine. But I do prefer to use named imports. So what I'm actually gonna do for having a full usable tree shaking is using import the scene from tree and then we're just going to console log the scene and we get the same result.

[02:08] So in all these modules or lessons in the course we're going to use name it import instead of using import all as tree. Import all S3.



Create a Mesh by combining a BoxGeometry with a MeshBasicMaterial, add it to the scene, and render it.

[00:00] If you remember at the beginning of the lesson, we talked about the different elements that make up a 3D scene. So one of them were the objects that we want to render, then we have the scene that groups them all, and then we have a camera to be able to see those objects in the scene. Last but not least, we have the renderer, which is the one that renders all these objects in the scene into a canvas element. So We're gonna go here and we are gonna create our scene first So const a scene equal new scene And we're gonna out import the scene from tree Next we're gonna add the objects. So let's create a section for them.

[00:50] And the first one that we're gonna add is a cube. So follow along with everything that I'm gonna do right now and then I will explain. We're gonna create a geometry, okay? So it's gonna be const geometry, new Box Geometry. And we are going to import this from tree.

[01:13] So the box geometry accepts several parameters. One is the width, the height and the depth. So we're gonna do a cube of one by one by one. Then we need to create the material. So material, new, mesh, basic material.

[01:32] New Mesh Basic Material and we're gonna pass an object with the color. Let's put maybe teal. Then let's import the Mesh Basic Material And now that we have the geometry and we have the material, we can create the cube using a mesh. So const cube equal new Mesh. This is also auto-imported from 3.

[02:05] It accepts two parameters, which is the geometry and the material. So we're going to pass the geometry that we just created and the material. We're going to hit save, but we are not going to see anything on the canvas yet. So let's check if we are creating everything like it should. So let's do console.log cube And then we're gonna see an instance of a mesh.

[02:33] So here are all the properties that the Mesh class has. But we can see that it's working because the geometry that we created, the box geometry is here. We also have the material, the Batch Basic Material. And also we have a lot of different properties like position that we're gonna play with later So we need to add it to the scene the way you are gonna do it is scene add And then cube So let's console log The scene and See what happens. So instead of the scene if we open here we're gonna see as well as our properties, but we are interested in the one that says children.

[03:18] And let's check that the children is the instance that we created before. So it's the box geometry and the basic material. You can think of the geometry and the material as the HTML and the CSS correspondingly. So the geometry is the structure of the content So meaning all the different position for the vertices and the material is all the CSS Which is the visual properties of it like the color, how shiny it is, or if it's metallic or not.



Set up a PerspectiveCamera by understanding FOV and aspect ratio, initialize a WebGLRenderer tied to a canvas element, and fix the most common beginner mistake: camera and object starting at the same position.

[00:01] Next in the line, we're going to add the camera. And for the camera, you can think of it like a movie set where you can have multiple cameras and you can switch between them. But most of the time using 3DS, we're just going to use one camera. There are also different types of them, but we are gonna use one that imitates how real cameras work and also how our vision work, which is The new perspective Camera So we're gonna import it from 3 and this accepts the field of view or the FOV. So the description is like the camera first room vertical field of view but I like to describe like how large your vision angle is.

[00:51] If you have a very large angle you will be able to see in every direction at once, but a little bit of distortion, while if you have a small angle you're gonna focus a little bit more. So things will look a little bit something So the fillet build normally is between 45 and I don't know like 60 The default I think is 50 Yes, so we're gonna use something like 60. Okay? The second parameter is the aspect ratio. And in most cases, aspect ratio is just the width of the canvas divided by the height.

[01:27] But since we haven't decided yet, We're gonna hard code the numbers for now. So I'm gonna use 400 and 300 here So it's gonna be 400 wide and 300 of height Okay. So now we're going to do the exactly the same as we did with the cube, we need to add it to the scene. So scene, add camera. Okay, we hit save.

[01:55] We still don't see anything because we need to add the render. Last but not least, we're going to create the renderer. So, to do that, we're going to do const renderer, and we're going to use a class called WebGLRenderer. We're going to out-import it from tree, And the reason it's called WebGL is because it's using the API, the low-level 3D graphics API of the browser, call it the same. It's based on OpenGL, so it's WebGL render.

[02:31] We need to pass an object with some parameters, but the most important one is the canvas It's gonna complain now because we haven't created or retrieved the canvas yet So we're gonna do that here the same way. We're gonna use document query selector and we're gonna pass the ID. So here, WebGL, exactly. And We are going to check if we actually found it. So we're gonna do if there is no canvas, so we couldn't find it.

[03:09] We're gonna throw a new error. Okay. No canvas found. So hit save. And The first thing that we're gonna do with the render because the renderers job is to render I bet you didn't see that coming.

[03:30] But we simply ask the render to render our scene from the camera point of view. So we need to set first the same aspect ratio as the camera. To do that we're gonna use setSize and then dataSetsWidth and height. And then we're gonna tell it, hey, please render, and it sets two parameters, which is you're gonna render this scene from the point of view of this camera. If we hit save, now we're going to see a square, well like a 400 by 300 rectangle here.

[04:12] And if we go to the DevTools, let's see what's actually here. We have a canvas and you can see that the render is doing its work or it's mounted correctly because you're gonna see a property called data engine with 3DS and the version of it. So with this we're sure that we have our rendering going. But didn't we add a cube to the scene? Why don't we see it yet?

[04:42] This is one of the most common mistakes that beginners do when they're trying 3DS the first time. And actually it takes a long time to debug it and realize what it is, so I'm going to save you that time and explain to you. The reason we don't see anything yet is because the camera is by default in the center of the scene in the coordinate 0 0 0 similar to what our cube is so we're basically seeing the cube from inside but by default to save performance the materials doesn't render from inside only outside. So it has a really easy solution we're gonna take the camera and we're gonna take advantage of this to understand how we can modify some properties. So we're gonna set the position of the camera and we're gonna check what does it need.

[05:39] It needs a value for the x-axis, one for the y-axis and one for the z-axis. So some numbers. We're gonna do like 3 3 3 and then really important we are going to take the camera and tell please look at the center of the scene where a cube is. So we're gonna hit save and now finally we can see our cube of color teal in the middle of the scene.



Move objects along the X, Y, and Z axes using the position property. Add an AxesHelper to stay oriented in 3D space, use position.set() to avoid verbose code, and learn what a Vector3 actually is with a visual explanation.

[00:00] We already got a glimpse of how to transform objects in the previous lesson when we needed to modify the camera position Put it far from the origin to be able to see our cube. So in this lesson, we're gonna learn the different Transformations that we can apply to a 3D object. We're going to see how to change the position, how to change the scale, and finally how to change the rotation in the different axes. So we're going to start by modifying our cube and we are going to modify its position in the X axis. So since we have our camera looking from this point or this coordinate, meaning that we're seeing from one side like this, the X axis is gonna be actually this one.

[00:50] So we're gonna do something like this and we're gonna put it in distance 2. But it can get really tricky to get the reference of where the origin is and how much have we moved our object in the 3D scene. So to help us with that, we're gonna add another object at the beginning of our scene that is called the access helper. So we're gonna do access helper new access helper class Okay, I think I already imported it. And we need to add it to the scene.

[01:30] So access helper. And this is gonna create this handy visual representation of where the axes are So the red one is the x-axis and this line right here is where the positive values Start so everything that is two Positive is gonna be here. This is the green one is the Y axis and the blue one is the Zeta axis. So let's see how it works. Let's now change for example the y-axis instead and you can see that it remains here in the center but it goes up to on the y-axis.

[02:12] Similar we can do zeta and we can move it on the zeta axis like this. We can even go further and do like this. So if we use negative numbers here what is going to happen is that it's going to be in the other side of the line. So this line goes to infinite to minus infinite to infinite same for the X and the Y. Modifying individual axis of the position can get really verbose because for example let's put this back to zero and then let's move it, I don't know half a unit in the X axis and then say position Y, move it in one in the Y axis and then cube position Z, move it too far from the region.

[03:03] So we can do exactly the same by just setting similar to what we did with the camera, just use the position set, because cube position is a vector tree And it has a property of set where we can pass the X the Y and Z in that case. We're gonna do one Like half one and two and it should remain in the same position For the sake of demonstrating that is working. Just I'm gonna replace the Y so it's below the plane, right? So if we console log to understand what is happening in the cube position and We open our developer tools here. We're gonna see that it's an instance of vector3.

[03:48] Vector3 is just, yeah, you thought you're never going to see vectors again from school. I have bad news for you. You're going to use them a lot. But it's actually pretty simple to understand. So a vector is basically a coordinate from the center of the scene where you can display an arrow, let's say.

[04:11] So the arrow point is gonna be on the number here. Actually it's probably easy if I draw it. To help visualize better what a vector tree looks like in the 3D scene, I created the draw with the same axis helper as we have in our scene, same color for the axis. So let's say we want to create a vector that is in the 1, 0, 2 And to help us Localize where it should be. Let's use some perpendicular lines in the y-axis.

[04:49] So we are going to go to the 1 here and draw an infinite line. Then let's go to 0 on the y-axis so it doesn't have height and then two here on the zeta axis. And then this point right here is essentially these coordinates and the vector is just an arrow that we can draw from the center of the scene into the coordinate that we have. This is a vector tree. We could also create another vector and let's say that this one is on the same one, then two, or let's say three, and then two.

[05:42] So that will mean that in this axis right here, we can create another line. So let's just leave it less, and let's load a line from here up okay and then we can I believe we can copy and paste and then move up a little bit around here and this line we can do the same, put it around here So the new vector is going to be at this point right here? So we can draw it in a similar fashion as we did before, from the center of the scene, like this, into the point. Well, I have drawn better arrows, but you get the idea. So these are representations of vectors in the 3D space.

[06:39] Let's try to use the knowledge that we just acquired on the vector drawing and try to position it or cube in a new position. So I'm gonna remove this and I'm gonna create a vector with the new position And we're gonna use new vector 3 We need to import it from 3 Okay And we're gonna use the same coordinates that we have in the drawing, which were, I think, one, three, and two in the z-axis, right? We could be tempted to try to do cube position and then equal to new position, but we're gonna get an error. And the error is because as Many properties on the 3d objects you cannot async position because it's a read-only property so we can still do it, but we need to use the set and then we are going to use new position X, new position Y and new position Zeta. And Now we have the cube and the position that we were before if this is to propose we can also say New position To array so this is gonna give us an array, so it's going to be like 1, 3, 2 like this and since it's an array we can use the spread operator to set the parameters here.

[08:19] And voila, we have the same result Also we can console log another things from the From the vector. For example, we could get the length of the vector. I believe it is like this. Okay, so this is the length of the vector with these coordinates. If I change any of the coordinates here and we put coordinates far from the origin, you're gonna see that this value increase because this is the distance from the origin.



Use the scale property to resize objects along each axis independently. Learn that scale values are multipliers on the geometry's original dimensions, and use MeshNormalMaterial to better visualize face changes while experimenting.

[00:00] What if we want to modify the dimensions of our cube? For that we can use the property Scale. But to be able to visualize it better, I'm going to just quickly change this material to one material that is easy to see on the render, which is a mesh normal material. This one allows us to quickly visualize with different colors the different faces of our cube. So now that we have that out of the blue, let's use cube and Let's see what actually what type of property is the scale.

[00:40] So let's use console log Cube now, Let's go to developer tools and see what is here. So we are, yeah, console unload the cube, but let's use the scale. So yeah, you guessed it right, it's also a vector. But this vector is kind of different because we're gonna tell how much we are going to multiply the dimensions of our cube. So, similar way as we did before, we can go here and set X and we want to be the double size on the X.

[01:20] If we do this, it increase the value on X. Let's say that we want to make it half the height that has right now so we go cube scale y 0.5 and now it's narrow maybe we want to do something like a plane so we can go to the cube scale, and the zeta, and we can do something like 10. And then in the x-axis as well as 10, and we have something like a floor. We can similarly use the set method to do it easily. So we can say something like, I don't know, 0.5, 2 and 3.

[02:14] And then we have a rectangle like this.



Use the rotation property to rotate objects around the X, Y, and Z axes. Learn why Three.js uses radians instead of degrees, how to convert between them using Math.PI, and how rotation direction is determined by sign.

[00:00] So next in line is rotation, but rotation is quite special, so please bear with me. I'm going to try to explain it better with a drawing. So you guessed it right, rotation is also a vector, but this vector represents something different. So we have a vector in the X, Y, and V. And this value represents the angle that we're going to rotate our object around on a specific axis.

[00:33] So if I put a value here it means that it's gonna rotate our object around this axis. If I put a value in the y-axis it means that it's gonna do something like this and it's gonna rotate like a carousel. Depending on the sign, the plus sign represents a rotation counterclockwise. While if we go clockwise, negative numbers are the way to go so here I believe that this is negative and this is positive because if we see it from here counterclockwise will be this one and this will be clockwise and if we see him from here then We have control clockwise, which will be this And I believe this is gonna be the negative Okay So depending on the value that we put here, we're gonna rotate either from this axis, this axis, or this axis. It's easy to believe that since we're talking about angles of rotation, we could use degrees directly as the values here.

[01:46] But that's not the case because these values here are not represented in degrees, they're represented in radians. So radians is another way of defining angles based on the number pi. Pi is equal to 3.1416 something, okay? But the rule of thumb is that pi is equal to 180. So p radians is equal to 180 degrees.

[02:27] So we can easily do the math and say that our angle, so here, is going to be the degrees. So let's say we want to use 30 degrees and multiply it by pi divided by 180. So this goes away and at the end if we want to achieve 30 degrees we need to use pi divided by 6 And these are the values that we're going to use here. So let's see how it looks in the code. To rotate our cube we're gonna do cube rotation y and we're gonna use the Pi number as we see with ratings.

[03:19] So to access the Pi number, we're gonna use the mat library.pi. And since we want to rotate it in 30 degrees counterclockwise, we're gonna do mat.pi divided by six. So you can see the cube rotated counterclockwise in 30 degrees. Now we can do the same as cube rotation x. And in this case we're gonna use matpy, but we're gonna divide it by 4 which is the same as 45 degrees Voila, we have our cube.

[03:56] So they're additive Similar to what we did with the position we can use the set method here and it's gonna set the same value so we could say math minus math pi divided by 6 to rotate clockwise and let's put 0 on 0 and then in the x-axis is going to be rotated in that value



Create a render loop using requestAnimationFrame and Three.js's Clock to animate objects smoothly. Use delta and elapsed time values to keep animations frame-rate independent.

[00:00] Right now we're calling the method render from the instance renderer only once and nothing really moves in our scene So in order to animate our cube We need something called a render loop Which is basically a function that runs on every frame to do that we're gonna create a function called tick and we are gonna pass recursively to the request animation frame and we're gonna pass the same method. So below that, we're gonna call that method and to see if it's working let's open the developer tools here and we're gonna use a console log or count maybe frame Now that the scene renders on every frame, we want to animate the cube in the scene. So we're gonna call the cube here on the thick method just before the render method of the scene. We're gonna call rotation and then we're gonna modify the y-axis to rotate it like it was a carousel. So to do that we need to do plus equal so we're gonna accumulate a value of 0.01.

[01:19] Why such a small value? Because if I put a bigger one you're gonna see that it's really fast because it's increasing the rotation in these big numbers every frame per second So you need to adapt it to a certain value to achieve the correct speed. But we have a problem with this. Is that, remember when I mentioned that some devices will run at 100 frames per second, while, for example, I don't know, the MacBook screen is gonna run at 60 frames per second. So if we keep a hard-coded value that is equal in both, it means that at 60 frames per second it's gonna have this value, but in 100 frames per second it's going to run twice as fast.

[02:07] So in order to maintain the same speed, no matter the device of the user, we're going to use an instance that comes built in, in 3DS, which is called the clock. To use the clock, we are gonna create a variable called clock and we're gonna set new clock and call the method. We need to import it from tree. We need to import it from Trigius and then inside of here we're gonna get a value that will tell us the time since the last frame. That value is called delta and we can get it from clock.getDelta.

[02:49] So this is the time since the last frame. If we console log it, we say delta Delta here and We open our developer tools. We're gonna see several barriers. So I'm going to pause one and this Is the time since the last frame you will notice that it's not necessarily the same every time because it's compensated by the refresh rate on on the on the browser or the device that you're using, but it's gonna give you a really really close number. We can use that number if you see it's pretty close to what we have here.

[03:33] So we're going to replace this with the delta. And then hit save. And refresh this. And now we can see that our cube is rotating at the same speed that before. We can modify the speed by just multiplying the delta by a value and achieve even like faster times or maybe slower times.

[03:57] There is another really useful variable that we can get from the clock is called elapsed and elapsed is really good for things that are driving by a continuous time value. What I mean by that? Let's create a variable called elapsed and we are gonna use clock get elapsed time. This is gonna give us the total time since we call it tick for the first time. Let's see what it shows in the console.

[04:31] So we're gonna do console log and then elapsed, then elapsed here. And we can see that the number accumulates and continue growing over time. So that's really useful for a lot of different approaches and animation but let's for now just animate the cube on maybe the zeta axis and we're gonna do rotation zeta and instead of using the plus equal we're just gonna do equal to elapsed time and now you can see that the cube is rotating in both the y and the zeta axis and we are using two different ways of accumulating with the Delta or using a Lapsed directly. A Lapsed is really easy to use whenever you want to change the position by using a sine wave. So we're gonna do position in the y-axis as well and we're gonna equal to math sine and then we're gonna pass the elapsed time here and see what happens.

[05:44] So now our cube is oscillating from plus one to minus one and we use elapsed to avoid having to accumulate the values here so this is perfect when we're dealing with time-based animations.



Listen for window resize events to update the camera aspect ratio and renderer size. Prevent the scene from stretching or distorting when the browser window changes dimensions.

[00:00] So right now the canvas is hardcoded to have a size of 400 by 300, so that's why it doesn't occupy the whole window. We're going to change that. So to do that we're going to go up in our file and we're going to create another section. And we're going to come here and create a variable called size and we're gonna say that width is equal not to hit on red but to inner width and window inner height. Once we have that we're going to go here and say size width and size height.

[00:43] To get the actual radio here we can do exactly the same We can use size width and size height. If we hit save, now we can go to the inspector here and check that is the app that has here the padding. So we're gonna remove this padding right here and voila! Orisin is occupying the whole window. But there is an issue that we haven't tackled yet.

[01:10] And that is that if we resize the browser, instead of resizing the scene with the windows resizing, we're cropping the scene below. So to fix that we're gonna go here and we're gonna use the object window and we're gonna add an event listener and we're gonna listen for the resize event which accepts a callback as a function and we're gonna console.log essentially the same object that we created at the beginning. So width is window inner width and Inner height so if we hit save and we check the developer tools We see that the initial we have two And if we resize we're gonna see that this change the width and the height of our object. If we go here and we say camera aspect equal and we say window inner width divided by window inner height actually we could do the same as we did before and say cons size Equal and we copy exactly this again and then we use it for the camera aspect So camera aspect is going to be equal to sizes with divided by sizes dot height Then we need to update the projection matrix of the camera in order to see the changes.

[02:51] So we're going to use updateProjectMatrix. This will avoid artifacts. So updateProjection... Yeah, projection matrix. It was this one.

[03:05] Okay, and last but not least, we're going to ask the renderer to set the size to these new values, which are going to be sizes.width and sizes.height. If we hit save and then we try to resize the window, now you can see that the whole thing adapts to the new size of the window, making it way more responsive.



Integrate Tweakpane to create a live debug panel for scene parameters. Add controls for object position, rotation, and material color that update in real time without touching the code.

[00:00] So in this lesson, we're going to learn how to integrate Tweakpane to create a live debug panel for our scene parameters. This is pretty useful because we can add controls for the object position, rotation and material color to update it in real time without touching the code. So we're going to learn how to add it to our current scene. To install TwigPaint, we can open the terminal and then just do pnpm add twigpaint. And also if we want type support we can do pinpm add tweak pane core and then sign it as a developer dependency.

[00:43] So once we install both In this case I have version 4.0.5 and 2.0.5. So let's close this and import it at the top of the file. So just before the import of the styles we're going to do import pane from tweak pane. And just below the canvas we are going to create another section called debug and here we are going to initialize a variable with a new pane. So this is the one that we're gonna use to add the bindings for our scene.

[01:26] To add a binding, we're gonna go where we initialize our cube here, just before the scene add cube. And we're gonna add a binding to modify the position on the y-axis so all we need to do is write paint and then add binding so this method accepts several parameters the first one is gonna be the object that you want to modify or bind into the pane. So it's going to be the cube position. Then the second parameter is going to be the property that you want to modify. In this case, the Y.

[02:02] So if we hit save, we have this number control that we can modify like this. So if we put one, it's going to go one in the Y axis. If we put two, it's going to be here. And if we put something like, I don't know, minus three dot five, because you can also put decimals, it's gonna go down in the y-axis. You can also use this handler here which is pretty handy, I really like this feature.

[02:29] It allows you to like modify like it was a slider. But we can actually create our own slider rather than just having the input number. So we can pass an options here and we can specify the minimum value that we want to be available. So let's put like minus two, then the maximum value could be two and then instead of Y we can put something more meaningful something like position Y So we hit save and now we have a range that we can play with it and it goes from minus 2 to 2. Also this handler that we used before is going to be constrained to the same range.

[03:15] Let's try with another property. So we're going to add a pin, add binding, and then in the cube position we're actually gonna use the rotation. Let's change, let's use rotation, and let's change the rotation on the z-axis. Why not? Okay, so as parameters we're gonna also create a range but in this case we can specify like the angles.

[03:39] So we can do something like minus math pi here and then here the maximum will be plus math pi not minus something like this and as label we're gonna pass rotation on the zeta axis So let's hit save and see what we can do here. So if we use the slider we can go from minus pi, so 3.1415 whatever, and we can rotate it from here to here. But the more bindings that you add, the more complicated the organization will be. So something that you can add whenever you're adding bindings to the same object. So imagine that you have several objects in your scene and you want to group them.

[04:34] You can create folders, which is pretty cool So here before the paint here, we're gonna actually do a folder for the cube so it's gonna be Q folder and then equal to paint add folder and then we're gonna add cube actually no we have to pass an object and it's gonna be the title and the title is cube so now we have the cube folder and all we need to do is replace the pane with the cube folder and now we have a collapsible folder with different controls inside. So this is a great way to organize our controls in TwigPane. Another cool thing that we can use to debug our scene is adding monitors into our TwigPane. So what we're gonna do is we're gonna uncomment the previous code that we did for animation of our cube. And then here where we added the binding for the position on the y-axis, which is, I think, the one that we are oscillating between 1 and minus 1, so this one what we are gonna do we are gonna remove the control and We're gonna pass read only True So if we hit save now we have a valley Control or a value control that goes from minus one to one.

[06:08] And it's only read only, you cannot modify it. So this is a monitor. Every time you put the read only, it's going to create a monitor. But this is not the only monitor that you can have. You can also have a graph.

[06:21] So here, not here, we can pass, I think it's view. And then let's put graph. And if we hit save, now we have a graph, but we need to specify which is the mean value so minus one and probably the max value is gonna be one here and if we hit save now we have a graph that goes from one to minus one and we can visually see the oscillation that is happening on the position of the cube. So this is really handy for visualization or effects or animations that you want to add. You can monitor them and see it in a better fashion.

[07:10] There is an insane amount of things that we can tweak with TwigPaint. We can even control colors to modify the colors of the materials that we have. We have the range, but we also have points. So we can modify points with vectors here. Here the amplitude as well, that's pretty cool.

[07:32] We can have tabs with drop downs. So there is a lot of stuff that we can tweak with this. And check the documentation, they have a lot of cool stuff like buttons, tabs, intervals. They have blades, which is kind of like controls like drop downs and such. And we are going to be using this quite often during this course.

[07:57] So take a look of it, play with it and then see you in the next lesson.



Refactor a messy Three.js main.ts into scalable, maintainable code using factory composition. 

Learn to build modular subsystems with cleanup methods and create a reusable resize observer utility that decouples the camera and renderer, turning your main file into a clean orchestrator for 3D scenes.

[00:00] Right now everything lives in the main TS. That works well for a demo, but it doesn't scale well and it will bring up problems in the future, especially for maintenance. Right now we have what I call a spaghetti code. All the imperative instructions in one file to create our 3D scene. The pattern that we are going to use is called factory composition.

[00:27] So instead of exporting singleton instances, each subsystem becomes a function that creates what it needs and returns both the object and a disposed method for cleanup. So instead of having everything in the main, we're gonna create factory functions that are gonna return us the camera, the renderer and even the debug graphic interface with TwigPane. The cool thing about this is that the main TS is going to become just an orchestrator and it's going to be pretty clean. Another advantage of this approach is that things like resizing the window, we can create a utility to observe the window resizing and apply it to several objects like the camera and the renderer without duplicating code. Since we are going to use the resize of server I think it's good that we create it first.

[01:22] So the problem with adding a resize listener directly on the camera or the render code is that they're a couple. So the camera will need to know about the renderer and be service. So instead of that, let's create a shared utility So I'm gonna go here. I'm gonna create a folder called utils and Inside of utils, Let's create a file that is called resizeofserver.ts. Inside here, we're gonna create a factory function.

[01:59] We can call it createResizeOfServer. And basically we need to save all the callbacks that we're gonna register for the different parts, like the camera and I guess the render. So it's gonna be something like const callbacks and we can use a map here. So we're gonna do new set, but probably it's a good idea to type it so we need a type for interface so we need a type for what we are gonna return which is basically the size is gonna be the window width and the windows height. So both of them are gonna be a number, and then we need an interface for the resize callback, essentially.

[02:48] So we are gonna call it just that, resize callback. And this is gonna be a function that has the size. So it's gonna use the one, the interface that we created here. And this is what we're gonna pass to the generic here. So resize callback, resize callback.

[03:11] Okay, now we have the callbacks, but we need to add event listeners for the resizing. So we're gonna do window add event listener, and similar to what we did here, that we took this, actually, I'm going to just comment this part. So we are going to listen to the resize and then we are gonna call the callbacks instead of doing the code here. So in the addEventListener, we're gonna do resize. We're gonna return something like this.

[03:49] And probably we need to return all the callbacks for each so we're gonna iterate through them and then the callback here and we're gonna call the callback and we need the function to return the size. So we can create one here, so getSize, probably a good name. So equal, And with this one, we are going to return an object, which is essentially this object right here. So the window's inner width and the window inner height. Something like this.

[04:39] I don't know if we need to type it though. Well, let's type it like this and then in this callback, we're gonna call the getSize. Okay, so everything is fine type-wise. So we need to return this getSize because we're gonna need it to initialize our parameters to get the initial window innerWidth and innerHeight but we also need their onResize callback so we're gonna do const onResize so whenever we resize and this is going to be as parameter, the resize callback. Okay, and we have it like this, and it's basically adding or registering the callback into the callback set.

[05:36] It's gonna be like this. We pass a callback and we should return something like this callback delete. While we do this, this is a common pattern, but basically we are returning the unsubscribe method here. We're gonna see in a moment how it works. Okay, so we do this, we don't call getSize here, that's a mistake.

[06:07] So we return getSize on resize. Okay, let's save it and then let's go here and maybe below the canvas let's do the resize of server of server okay and Let's create the resize of server like this. So, server and equal to create resize of server. We need to import it from here and now we're ready to use it



Extract the Three.js renderer into its own factory function that accepts a canvas and resize observer, returning a dispose method for proper cleanup. 

Learn how factory composition keeps main.ts as a clean orchestrator while decoupling subsystems and handling window resize events efficiently.

[00:01] Next, we're going to move all this logic about the renderer into its own factory function. So let's create another folder here. I mean, you can actually do it directly in source, but I like to keep my things organized. So I'm gonna do core and then create render.ts. Here we can create the functions.

[00:28] It's gonna be export function, create renderer. And we need two things here because we are going to move this part here and this part here so let's clean it from here and copy it here. So we need to import the WebGL renderer. We need the canvas, so we need to pass the canvas down. And for this, we're gonna use the resize of server.

[00:59] So we also need to pass the resize of server down. We should be typing this probably. So it's a good idea to create an interface for it. So I'm gonna do this interface, which is basically the canvas, it's an HTML canvas element. And this is gonna be the return type of the factor function for size of server.

[01:23] So in order to use this type, we're gonna do like this and put it here. Okay, so we have the canvas right here. We need to pass the sizes for the render. So we're gonna do const and deconstruct width and height of the use, no, the resize of server and we're gonna call the getSize. And here we're gonna remove this and this and it's gonna be width and height.

[01:57] So with that, we are setting the initial size of the render. So now we need to register on the window resize. So it's gonna be resize of server on resize. That's gonna be the width and height because it returns the size. And let's do this.

[02:23] And let's get back here and see what we're doing here. So we are doing render set size like this, but instead of sizes, we're getting the parameters directly here. Okay, so this is done. Why is this complaining? Oh, because I missed, yeah, I missed here like this and like this.

[02:52] Okay, now it's correct. So these are the parameters and We are setting the render size, but we also need the possibility to unsubscribe to this so it's gonna be on soups drive equal to the resize of server. So whenever we want to unsubscribe, we are just going to call this method like this. So that's why we created this right here. It's a returns call by X delete.

[03:21] Okay, so we are going to return, turn here. We're gonna return the renderer and we're gonna return a dispose function which is basically going to call unsubscribe. So it's gonna be like this, unsubscribe. And also I think we need to do renderer dispose. This is gonna make sense in a moment.

[04:01] And we can get back to our orchestrator, which is the main TS and here we're gonna call const We're gonna retrieve the render from create render and We need to pass here the canvas and the resize of it. Okay, cool. We have an issue with the type, so type element. Oh, so this is type element. Well, we can easily fix it by going to the create render and changing this from HTML element to element so that it should be right.

[04:43] Yes. OK, so Let's just check in the browser if everything is working as expected. So let's run it and voila, we have our cube continue working as before. So the migration has worked. Now is the turn for the camera.



Extract the Three.js camera into a factory function that subscribes to a shared resize observer and returns a dispose method. 

Learn how to handle Vite's hot module replacement with import.meta.hot to clean up cameras, renderers, and WebGL contexts, preventing duplication and boosting dev performance.

[00:00] So for the camera we're going to duplicate this here and call it create camera. So for the camera we can remove the WebGL renderer, this interface, we are going to call this create camera. Maybe we will, well, we actually just need the resize of server. So maybe it doesn't even needs to be an object. It could be just the resize of server.

[00:30] We can remove this here, but we are going to need the width and height that's staying and we need to register as well. So let's remove this. We also need a dispose. So okay, it looks good to get started with the camera. So for the camera, we need to move everything that we have in here.

[00:52] Where is it? Here. So we are gonna take all this and we are gonna move it. I'm gonna close this and also resize observer. And here we're gonna do perspective camera imported from tree so we already get the sizes here from the resize of server so that's nice yes I know you're complaining because basically we need to do the same as here.

[01:18] So return type server, something like this. Okay, now it's good. We need to do something whenever we are resizing. So if we go back here, what we were doing is setting the aspect ratio of the camera and also updating the projection matrix of it so we're gonna go here and do exactly that but we're going to use the width and the height So let me see if I'm not forgetting anything. So we have the onResize, we are setting the camera.

[01:55] Now everything looks good. So we're gonna return, of course, the camera. And what the dispose is gonna be, I think here is just gonna be the unsubscribe, because I don't think there is anything that we need to add for the camera disposal. Okay, so let's use it. Let's go to main TS and Here where we do the scene we're gonna do cons camera Equal create camera and we pass down the resize of server.

[02:34] We need to import it from here. And if everything went right, if we refresh here, our scene continues working. So we've successfully managed to abstract all the code that we had here into different factory functions. We could go even further and abstract more stuff from here and clean in the main TS. So we no longer need the sizes here The scene is so simple that you you only need to call it here and pass it down So it doesn't make sense to abstract it The objects is up to you.

[03:14] We could do the Graphic interface this twig thing thing you can extract it as well but I will let you do it as an exercise, and let me know later if you manage to do it. What I didn't explain though is why we needed those disposals. And the thing is that we're using Vite and this has a hot model replacement. So we need to clean up a lot of stuff to prevent the WebGL context duplication. This is really important to make the scene, especially in dev mode, more performant.

[03:50] So what we're going to do just below here is that we're going to clean up for hot model replacement. So the way you detect if you're in Hot Model Represents is import meta hot and you need to do something like onDispose we're gonna dispose the camera and dispose the render. But we need to return it from the camera. So here we have an unsubscribe dispose, but we are gonna call it dispose camera. And here we have also dispose, but we're gonna say disposeRender.

[04:40] Okay, so this disposeCamera expression is not callable. This expression is not callable. It's return a boolean and this one Okay, so create camera what did it? Okay, so it needs to be something like this, right? Yes, okay, so whenever we are hot model when the hot model replacement hits It's gonna dispose the previous camera and dispose the previous render We can do you also like a scene dispose or go through it I don't know if it even has a dispose now but I know that the object does so you can even clean up the cube Let's see if the cube geometry has this pose.

[05:35] So yes, you can start disposing the rest of elements in the scene if you want.



Modern Three.js Course

Alvaro Saburido

What you'll learn

Who this is for

Free Community Resource

Free Community Resource

Course Content