Add objects to the scene

[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.