... | @@ -74,5 +74,32 @@ renderer.setSize( window.innerWidth, window.innerHeight ); |
... | @@ -74,5 +74,32 @@ renderer.setSize( window.innerWidth, window.innerHeight ); |
|
document.body.appendChild( renderer.domElement );
|
|
document.body.appendChild( renderer.domElement );
|
|
```
|
|
```
|
|
|
|
|
|
|
|
## Geometry, Material and Mesh
|
|
|
|
|
|
|
|
The second common pattern is adding objects to the scene:
|
|
|
|
|
|
|
|
1. Create a Geometry
|
|
|
|
1. Create a Material
|
|
|
|
1. Create a Mesh.
|
|
|
|
1. Add mesh to scene.
|
|
|
|
In Three.js a Mesh is the composition of a Geometry with a Material.
|
|
|
|
|
|
|
|
![image](uploads/110e6ace72c423b82cf46fe462b09156/image.png)
|
|
|
|
|
|
|
|
A Geometry is the mathematical formula of an object, in Three.js we have many geometries, we’ll explore it in future chapters. A Geometry give us the vertices of the object we want to add to the scene.
|
|
|
|
|
|
|
|
![image](uploads/dbf51acda0ecdf67902f8dd00aba08d2/image.png)
|
|
|
|
|
|
|
|
A Material can be defined as the properties of an object and its behavior with the light sources of the scene. As you can see in the following image there are different types of materials.
|
|
|
|
|
|
|
|
![image](uploads/547e9738ef6555b4d6982e5d41910355/image.png)
|
|
|
|
|
|
|
|
Now that we know what a mesh, a geometry and a material are, we are going to add them to the scene. In this case we are creating a cube with basic Material.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|