Three.js & React Fiber

[00:00:00]
>> Matias Gonzalez: So let's get into the basics of animating 3D scenes. We're not going to deep dive into Three.js too much because that can take, let's say a week, but we're going to create some basic 3D setup and then just add some animations to it. So we're going to be using React Three Fiber, so we're going to start by explaining the difference between Three.js and their React version.

[00:00:33]
So in 3D if we want to create some object we need to first define the shape of it so we might want to create like a box or a sphere or some sort of shape. We might also have like a model that has a custom shape already in place. And then we also want to define how that model looks and Three.js already has a lot of different materials, so standard material would be like a basic shading that will react to light.

[00:01:11]
And then a mesh is basically the combination of the geometry and the materials, so you join those things together and then you would add that mesh into the scene and you'll have like a little cube there. The React version of Three.js simplifies this syntax a lot, so it enables us to actually just write JSX, so declare a mesh and then declare the shape of that mesh inside.

[00:01:48]
And then add whatever material we want to apply to that mesh inside of it and we can of course reference this object and animate it using GSAP and make it appear or have some interesting thing happen. I already have a model loaded here using GLB, so this is like a file format for 3D models that you can use and React Three Fiber has...

[00:02:22]
Oh sorry, one more thing is since we're using React Three Fiber, there's also this other library like full of utilities that we can use in React called Drei, and it basically has a lot of useful functions to handle 3D scenes for us. So we can go ahead and load our 3D model using the useGLTF hook. And this will grab the model that we have in here.

[00:02:58]
And we have the same model that we use for the scroll sequence. It's the rover that's in here. And this hook will return the scene, so it will already return the 3D object that we can add to our 3D scene. In Three.js if we use, let's actually implement this like one by one. Let's delete this. To start again.

[00:03:38]
So how to get started with a blank canvas, I need to import Canvas from React Three Fiber, and this is going to create a canvas that already has Three.js set up for us so I can create a little mesh with a box geometry as we saw before. And a standard material. Mesh standard material with some color red, for example.

[00:04:09]
So it's going to be a little red cube. Then we can add a camera, so we want to add a perspective camera. Cameras could be either perspective or orthographic, depending on the effect that we want to achieve. I want to set a position for our camera so. Positions in Three.js has 3 values. X goes to the sides.

[00:04:44]
Y goes like up and down, and then Z value is like depth. So since my box is going to be on the center of the scene because I haven't set up a position, I can move my camera a little bit back so I can actually see the cube, otherwise we'll just be inside. So if I open my scene in here. I can't see anything and it's because we are missing some lights.

[00:05:18]
If there are no lights and I have a standard material, then there's nothing to like light the scene up. So let's add a point light. And let's put a position to that point light. Let's move that point light away from the cube. Let's say 2 2 2, for example. So we can see that it's not that bright, let's actually increase the intensity of our light, to say 10 to test what happens, and now we can see that we see our little cube.

[00:06:03]
It's actually a cube that's, we kind of like see the other edges from this side, so a nice way usually to debug your scenes is using the orbit controls. And this will automatically have like some controls that we can use to like rotate around our scene. It's really useful usually to like inspect different models and understand what's happening in our scene.