Three.js Basics

Welcome to the Three.js Fundamentals basics. Now that we understand the basics of 3D grpahics, let's move onto Three.js.

Example Scene

Let's take a look at the example scene.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			const geometry = new THREE.BoxGeometry();
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			const animate = function () {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

Let's remove the HTML and just focus on the JavaScript. 

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

There are some concpets that might be new.

THREE.Scene()

Where you place objects, lights, cameras, etc.

THREE.PerspectiveCamera()

A type of camera

THREE.WebGLRenderer()

The renderer that makes it possible to render 3D in the browser

THREE.BoxGeometry()

A type of geometry (a box)

THREE.MeshBasicMaterial()

A type of material (not texture)

THREE.Mesh()

The mesh consists of a geometry and material

In the snippet above, we have created a green cube.

Important Concepts

BufferGeometry

In short, BufferGeometry is a "faster" way to represent geomtry. It uses math and magic to represent the 3D geometry. Take a look at the docs or Three.js Fundamentals for a deep dive into this topic.

BufferGeometryUtils

Take a look at the docs for more information.

Materials

Three offers many types of materials, see the docs for more info.

Notice that some meterials are linked to a type of 3D object. For example, LineBasicMaterial and LineDashedMaterial belogns to a line.

Recall the chapter about 3D Basics. We are intrested in edges and meshes. You can find more information over at the Three.js Fundamentals.

Stuff to Consider

Previous3D BasicsNextFirst Draft

Last updated