Game Development Reference
In-Depth Information
Three.js has several other renderers, most notably for CSS and SVG. These can be found
in the
examples/js/renderers
folder and are available as
THREE.CSS3DRenderer
and
THREE.SVGRenderer
, respectively, if their eponymous files are included in your
HTML document. These renderers have a smaller set of supported features and are not
as widely used, so they are not included in the main library, but they can be useful for
scenes with a limited amount of primitive geometry and no lighting.
For the rest of this topic, we'll be using the
WebGLRenderer
, so if you're using a version
before version 11 of Internet Explorer, you should switch to Chrome or Firefox.
If WebGL isn't available, your game can fall back to the
CanvasRenderer
or just display an error message. The easiest way
to do this is with the script at
examples/js/Detector.js
. Once the
script is included on your page, you can simply check the
Detector.
webgl
Boolean to see if WebGL is supported on the current system. If
it's not, you can call
Detector.addGetWebGLMessage()
to explain
to the user why your game won't run on their device and how to
switch to a browser that supports WebGL.
Summary
In this chapter, we learned how to work with different kinds of geometry, materials,
and lighting. We also learned about renderers and scenes, and completed a project
to build a city procedurally. In the next chapter, we'll learn about ways that users
can interact with Three.js, add some physics to the mix, and build a basic first-person
shooter game.
