Graphics Reference
In-Depth Information
tp://www.packtpub.com/support
and register to have the files e-mailed
directly to you.
As you can see this is use a simple page, with a
script
tag in the body
that'll contain our Three.js code. The only interesting part is the CSS style.
We will add this style to the body element to make sure that our Three.js
scene will run in fullscreen mode and won't show any scrollbars.
2. Next, let's start by filling in the script tag. The first thing that we will do is cre-
ate a number of global variables that are used throughout this recipe:
// global variables
var renderer;
var scene;
var camera;
The
renderer
variable will hold a reference to the
THREE.WebGLRenderer
object that we're going to create in the next step.
The
scene
variable is the container for all the objects that we want to render,
and the
camera
variable determines what we will see when we render the
scene.
3. Usually, you'd want to wait for all the HTML elements to finish loading, before
you start running your JavaScript. For this, we use the following JavaScript:
// calls the init function when the
window is done loading.
window.onload = init;
With this code, we tell the browser to call the
init
function, once the com-
plete page has loaded. In the next step, we'll show the content of this
init
function.
4. For your skeleton to work, you need to add the
init
function, which looks
as follows:
