Learning Three.js: Part 1: Terms and Techniques

On By Dan CoxIn Uncategorized

0ayhlbqydc

Requirements:

Three.js is a JavaScript library that supports different forms of three-dimensional in-browser rendering including CSS3D and WebGL. It is the library behind projects like A-Frame and often paired with other libraries like Cannon.js or Ammo.js for advanced 3D web browser projects.

Terminology

Like many graphical rendering libraries, three.js works on the basis of scenes and objects. In order to render (show) an object, it must first be added to a scene. As a collection of objects, a scene is then paired with a camera (a view into a scene) and usually animated. In order, then, a scene is created. Objects are added to the scene. And then, when paired with a camera, objects can be rendered (shown) and animated/updated (refreshed).

Like other libraries, three.js also prefers a three-step series of functions. The first is an initialization of the settings for the project. The second is usually an animation or updating loop. As part of the updating is usually a third, rendering loop, which connects into the second. The first, initialization loop usually runs one time with the animating and rendering loops running infinitely as long as the project continues to be shown to users.

Because it works with 3D, three.js also handles different forms of geometries, materials, and meshes. In the metaphor of a body, a geometry can be thought of as the skeleton of an object. It defines the edges and points. A material is something like the muscles that covers the geometry and helps define how to treat those edges and points. Finally, a mesh is a combination of geometries and materials in a single package.

Techniques


var camera, scene, renderer, geometry, material, mesh;
function init() {
// Create a scene
scene = new THREE.Scene();
// Create a geometry
// Create a box (cube) of 10 width, length, and height
geometry = new THREE.BoxGeometry( 10, 10, 10 );
// Create a MeshBasicMaterial with a color white and with its wireframe turned on
material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true} );
// Combine the geometry and material into a mesh
mesh = new THREE.Mesh( geometry, material );
// Add the mesh to the scene
scene.add( mesh );
// Create a camera
// Set a Field of View (FOV) of 75 degrees
// Set an Apsect Ratio of the inner width divided by the inner height of the window
// Set the 'Near' distance at which the camera will start rendering scene objects to 2
// Set the 'Far' (draw distance) at which objects will not be rendered to 1000
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1000 );
// Move the camera 'out' by 30
camera.position.z = 30;
// Create a WebGL Rendered
renderer = new THREE.WebGLRenderer();
// Set the size of the renderer to the inner width and inner height of the window
renderer.setSize( window.innerWidth, window.innerHeight );
// Add in the created DOM element to the body of the document
document.body.appendChild( renderer.domElement );
}

view raw

init.js

hosted with ❤ by GitHub

Initially creating a set of variables (camera, scene, renderer, geometry, material, mesh) outside of the scope of any one function, the init() function works through the setting of values and the creating of the tools needed for the later functions. As the first of the three-step process, it preforms all of the initializing.


function animate() {
// Call the requestAnimationFrame function on the animate function
// (thus creating an infinite loop)
requestAnimationFrame( animate );
// Rotate the x position of the mesh by 0.03
mesh.rotation.x += 0.03;
// Rotate the y position of the mesh by 0.02
mesh.rotation.y += 0.02;
// Render everything using the created renderer, scene, and camera
renderer.render( scene, camera );
}
init();
animate();

view raw

animate.js

hosted with ❤ by GitHub

As the second and third parts of the three-step process, the animate() function calls the browser’s requestAnimationFrame function on itself, creating an infinite loop of updating objects, in the form of rotating the mesh, and then calling the renderer to render() using the scene and camera defined previously.

Finally, the last two function calls start the whole process by first calling init() and then animate() to kick-off the infinite looping of updating, animating, and rendering the changes.

Demo (Full Example)


<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
</head>
<body>
<script>
var camera, scene, renderer, geometry, material, mesh;
function init() {
// Create a scene
scene = new THREE.Scene();
// Create a geometry
// Create a box (cube) of 10 width, length, and height
geometry = new THREE.BoxGeometry( 10, 10, 10 );
// Create a MeshBasicMaterial with a color white and with its wireframe turned on
material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true} );
// Combine the geometry and material into a mesh
mesh = new THREE.Mesh( geometry, material );
// Add the mesh to the scene
scene.add( mesh );
// Create a camera
// Set a Field of View (FOV) of 75 degrees
// Set an Apsect Ratio of the inner width divided by the inner height of the window
// Set the 'Near' distance at which the camera will start rendering scene objects to 2
// Set the 'Far' (draw distance) at which objects will not be rendered to 1000
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1000 );
// Move the camera 'out' by 30
camera.position.z = 30;
// Create a WebGL Rendered
renderer = new THREE.WebGLRenderer();
// Set the size of the rendered to the inner width and inner height of the window
renderer.setSize( window.innerWidth, window.innerHeight );
// Add in the created DOM element to the body of the document
document.body.appendChild( renderer.domElement );
}
function animate() {
// Call the requestAnimationFrame function on the animate function
// (thus creating an infinite loop)
requestAnimationFrame( animate );
// Rotate the x position of the mesh by 0.03
mesh.rotation.x += 0.03;
// Rotate the y position of the mesh by 0.02
mesh.rotation.y += 0.02;
// Render everything using the created renderer, scene, and camera
renderer.render( scene, camera );
}
init();
animate();
</script>
</body>
</html>

view raw

threejs.html

hosted with ❤ by GitHub