-
Notifications
You must be signed in to change notification settings - Fork 0
Getting Started
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.