Hello, Three.js - Game Development with Three.js - page 4

Now comes the fun part: telling Three.js to display something. First, let's declare the
objects we'll need:
var camera, scene, renderer;
var geometry, material, mesh;
Then, let's give them values and explain what they do:
scene = new THREE.Scene();
A Scene class represents a list of objects that affect what is displayed on the screen,
such as 3D models and lights. (Each class provided by Three.js is invoked as a
property of the global THREE variable.) A scene isn't very useful by itself, so let's
put something in it.
Downloading the example code
You can download the example code iles for all Packt topics you
have purchased from your account at http://www.packtpub.com .
If you purchased this topic elsewhere, you can visit http://www.
packtpub.com/support and register to have the files e-mailed
directly to you.
A mesh object can be displayed in a scene, instantiated using the THREE.Mesh
constructor. It consists of geometry , which is the object's shape, and a material ,
which is a color, image, or other texture that defines how the faces of the shape
appear. In this case, the geometry we'll use is IcosahedronGeometry , which is
based on a 20-sided shape approximating a sphere. The constructor takes a radius
and detail, where detail is the number of times to split each edge of the icosahedron
to add more faces and make the shape closer to a sphere:
geometry = new THREE.IcosahedronGeometry(200, 1);
material = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe:
true, wireframeLinewidth: 2 });
mesh = new THREE.Mesh(geometry, material);
MeshBasicMaterial is a type of material that is not affected by the surrounding
lighting. The options we're passing include the color in hex format (like you'd use in
CSS), whether to display the shape as a solid color or highlight the edges, and how
thick to draw the wireframe, respectively.
There are many other types of geometry and materials.
Chapter 2 , Building a World describes them in detail.