... | @@ -64,7 +64,7 @@ camera.position.z = 4; |
... | @@ -64,7 +64,7 @@ camera.position.z = 4; |
|
// Create a renderer with Antialiasing
|
|
// Create a renderer with Antialiasing
|
|
var renderer = new THREE.WebGLRenderer({antialias:true});
|
|
var renderer = new THREE.WebGLRenderer({antialias:true});
|
|
|
|
|
|
// Configure renderer clear color
|
|
// Configure renderer red color
|
|
renderer.setClearColor("#ff0000");
|
|
renderer.setClearColor("#ff0000");
|
|
|
|
|
|
// Configure renderer size
|
|
// Configure renderer size
|
... | @@ -96,7 +96,46 @@ A Material can be defined as the properties of an object and its behavior with t |
... | @@ -96,7 +96,46 @@ A Material can be defined as the properties of an object and its behavior with t |
|
|
|
|
|
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.
|
|
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.
|
|
|
|
|
|
|
|
## RequestAnimationFrame
|
|
|
|
|
|
|
|
The last piece of code is the one that allows us to animate the scene, for this purpose we use requestAnimationFrame, which allows us to have a function that runs at 60 frames per second (at best).
|
|
|
|
|
|
|
|
```
|
|
|
|
// Render Loop
|
|
|
|
var render = function () {
|
|
|
|
requestAnimationFrame( render );
|
|
|
|
// Your animated code goes here
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
};
|
|
|
|
render();
|
|
|
|
```
|
|
|
|
|
|
|
|
## Animating the cube
|
|
|
|
|
|
|
|
In order to animate the cube inside our render loop, we need to change it’s properties. When we create a Mesh we have access to a gr0up of properties that are very useful at the moment of animating.
|
|
|
|
```
|
|
|
|
// Rotation (XYZ) in radians.
|
|
|
|
cube.rotation.x
|
|
|
|
cube.rotation.y
|
|
|
|
cube.rotation.z
|
|
|
|
// Position (XYZ)
|
|
|
|
cube.position.x
|
|
|
|
cube.position.y
|
|
|
|
cube.position.z
|
|
|
|
// Scale (XYZ)
|
|
|
|
cube.scale.x
|
|
|
|
cube.scale.y
|
|
|
|
cube.scale.z
|
|
|
|
```
|
|
|
|
|
|
|
|
In our example we animate the X and Y rotation of the cube:
|
|
|
|
```
|
|
|
|
cube.rotation.x += 0.01;
|
|
|
|
cube.rotation.y += 0.01;
|
|
|
|
```
|
|
|
|
|
|
|
|
## BufferGeometry
|
|
|
|
A representation of mesh, line, or point geometry. Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU.
|
|
|
|
|
|
|
|
|
|
|
|
|
... | | ... | |