Getting Started

Christoph Gruber edited this page Jul 25, 2018 · 24 revisions

We can easily set up three.js scenes. These scenes require only a few lines of code to initialize. To construct a scene, we use three different types of objects: cameras, lights, and meshes.

To render a three.js scene, first create a WebGL renderer object. The following code creates a new WebGLRenderer object, sets the size of the HTML output canvas of that object to 800 x 640 pixels, adds the object to the document's body, and initializes a three.js scene.

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( 800, 640 );
	document.body.appendChild( renderer.domElement );
	
	var scene = new THREE.Scene();

Next, define a camera. The renderer object will use this camera as it renders the scene.

	var camera = new THREE.PerspectiveCamera(
		35,		// Field of view
		800 / 640,	// Aspect ratio
		0.1,		// Near
		10000		// Far
	);
	camera.position.set( -15, 10, 15 );
	camera.lookAt( scene.position );

In the camera variable definition, the first parameter in the PerspectiveCamera function handles the field of view width. The second parameter defines the aspect ratio: viewing area width divided by viewing area height. The third and fourth parameters specify cut-off points for objects in the camera's view. If the distance between the camera and an object falls outside the range defined between NEAR and FAR then that object will not render in the scene. The position.set line sets the camera's XYZ coordinates to -15, 10, and 15 respectively, and the last line points the camera at the scene object position.

Now create a five-unit wide/tall/long cube geometry, add Lambert material, and add the cube to the scene, combining the cube geometry and Lambert material in a Mesh object.

	var geometry = new THREE.BoxGeometry( 5, 5, 5 );
	var material = new THREE.MeshLambertMaterial( { color: 0xFF0000 } );
	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

Create a yellow light source, and add it to the scene as the last scene creation step.

	var light = new THREE.PointLight( 0xFFFF00 );
	light.position.set( 10, 0, 10 );
	scene.add( light );

To see the dark sides of the cube against the background, set the background color to grey.

	renderer.setClearColor( 0xdddddd, 1);

Finally, render the scene to display our scene through the camera's eye.

	renderer.render( scene, camera );

This minimal HTML template puts everything together in a working example:

	<!DOCTYPE html>
	<html>
	<head>
		<title>Getting Started with Three.js</title>	
		<script src="three.min.js"></script>
		<script>
		window.onload = function() {
				
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( 800, 600 );
			document.body.appendChild( renderer.domElement );
				
			var scene = new THREE.Scene();
				
			var camera = new THREE.PerspectiveCamera(
				35,			// Field of view
				800 / 600,		// Aspect ratio
				0.1,			// Near plane
				10000			// Far plane
			);
			camera.position.set( -15, 10, 10 );
			camera.lookAt( scene.position );
			
			var geometry = new THREE.BoxGeometry( 5, 5, 5 );
			var material = new THREE.MeshLambertMaterial( { color: 0xFF0000 } );
			var mesh = new THREE.Mesh( geometry, material );
			scene.add( mesh );
				
			var light = new THREE.PointLight( 0xFFFF00 );
			light.position.set( 10, 0, 10 );
			scene.add( light );
				
			renderer.setClearColor( 0xdddddd, 1);
			renderer.render( scene, camera );
				
		};
		</script>
	</head>
	<body></body>
	</html>

Wow! Sixteen lines of Javascript will initialize and render a scene.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.