Graphics Reference
In-Depth Information
THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
// add the output of the renderer
to the html element
document.body.appendChild(renderer.domElement);
// call the render function
renderer.render(scene, camera);
}
In this
init
function, we first created a
THREE.Scene
object with the con-
tainer for all the objects that we want to render. Next, we created a camera,
which determines the field of the view that will be rendered. Next, we created
the
THREE.WebGLRenderer
object, which is used to render the scene using
WebGL. The
THREE.WebGLRenderer
object has many properties. In this
recipe, we used the
setClearColor
property to set the background of our
scene to black, and we told the renderer to use the complete window for its
output, using the
window.innerWidth
and
window.innerHeight
prop-
erties. To see whether our skeleton page is working, we then added a simple
THREE.Mesh
object with a
THREE.BoxGeometry
object to the scene. At
this point, we can add the output of the WebGL, as a child of the HTML body
element. We do this by appending the renderer's DOM element to the docu-
ment body. Now, all that is left to do is render the scene by calling
render-
er.render()
.
With these steps, you've created a basic
WebGLRenderer
based Three.js scene,
which you can use as a basic starting point for all your Three.js experiments.
See also
• The
THREE.WebGLRenderer
object only works when your browser sup-
ports WebGL. Even though most modern desktop browsers (and even a
large number of mobile browsers) support WebGL, in some cases, you might
need to look for an alternative. Three.js provides a couple of other render-
