- Roundups12 Gamedev Engines and Platforms (and the Best Ways to Learn Each of Them)Michael James Williams
Why Use Three.js?
Since Three.js was first released by Ricardo Cabello to GitHub in 2010, the code base has been continuously maintained and enhanced by a growing and supportive community. The set of built-in features is extensive, and includes:
- renderers (Canvas, WebGL, and SVG)
- scenes (can be changed at runtime, imported, and exported)
- cameras (perspective and orthographic)
- lights (point, spot, directional, and ambient; objects can cast/receive shadows)
- textures and materials (Lambert, Phong, etc., including support for bump maps and specular maps)
- geometries (including lines, planes, cubes, spheres, polyhedra, cylinders, particle systems, and 3D text)
- utilities to export Three.js-compatible JSON files from 3D modeling software (such as Blender, 3ds Max, or Maya) and import files (such as Wavefront (.obj) or Collada (.dae)) directly into a scene
- shaders (providing complete access to OpenGL Shading Language for more direct control of the graphics pipeline)
- a library of post-processing shaders (including bloom, blur, edge detection, Fresnel, sepia, and vignette)
- a library of stereoscopic effects (Anaglyph, Parallax/Cross-eyed, and Oculus Rift)
Notable Games and Visualizations
A futuristic racing game created by Thibaut Despoulain:
An automobile racing game created by Jasmine Kent:
Related development articles can be found at Jasmine's Gamasutra blog.
A 2.5D platformer rendered in 3D, with a built-in live level editor, created by Mario Gonzalez:
A marble/soccer game created by Jerome Etienne:
A maze game created by Rye Terrell:
A 3D ping-pong game that incorporates video chat within the game, created by Google:
An interactive journey created by Walt Disney and UNIT9
More information is available at the game's Chrome Experiments page.
Tip: It is also possible to write code using Three.js entirely online, using services such as jsFiddle, as demonstrated by this example. However, this option is typically only used for sharing examples or demonstrations with small amounts of code.
To set up Three.js, first go to the GitHub repo. There will be a button that says "Download ZIP" that will allow you to download all the code in the repository as a ZIP file. (There are other alternatives, such as cloning or forking the repository using Git, which are unnecessary for the average user - these options are primarily useful only if you plan to contribute to the source code or online documentation.)
Once you have downloaded and unzipped the file into a directory of your choosing, one more important step remains before you can view most of the examples on your own computer. Many Three.js projects involve loading content from external files (such as images), but, for security reasons, web browsers restrict this behavior by default. The two options for solving this problem are to either change the security settings on your web browser, or to run files from a local server.
The former option is the most straightforward (for example, changing the settings for Google Chrome in Windows can be accomplished by creating a shortcut for Chrome and editing the path to include the flag
--allow-file-access-from-files). Instructions for both options can be found in the official wiki, in the page titled How to run things locally.
- Codecademy, which contains a large number of interactive lessons with responsive and intelligent feedback, as well a user-friendly glossary
To learn how to set up a basic scene in Three.js (including a discussion about scenes, cameras, renderers, meshes, and the animation loop, visit: the official manual. Another great introduction to creating a basic scene is the article Getting Started with Three.js by Paul Lewis
A more thorough introductory survey of the capabilities of Three.js is the excellent presentation by James Williams (a video and slideshow) at Introduction to WebGL and Three.js.
The Three.js documentation, available at http://threejs.org/docs/, is a work in progress but a good first place to get an idea for many of the available functions.
A more comprehensive way to learn about the inner workings of the library is to browse the the source code of the official collection of examples at http://threejs.org/examples/, which are often titled by the aspect of the library they most prominently feature. Another resource, consisting of simplified and thoroughly commented examples written for beginners, is the collection at http://stemkoski.github.io/Three.js/. Also, many Three.js projects are announced on Twitter with the #ThreeJS hashtag or on the Three.js subreddit.
Two particularly impressive and inspirational collections of advanced Three.js projects are:
- AlteredQualia, created by Branislav Ulicny (@alteredq, one of the major contributors to the Three.js library)
Some websites and blogs that discuss development and frequently feature Three.js projects include:
- Learning WebGL, originally created by Giles Thomas; the current editor-in-chief is Tony Parisi
- Learning Three.js, written by Jerome Etienne
- japh(r)'s Three.js posts, written by Chris Strom
To learn more about the foundations of 3D computer graphics, check out Interactive 3D Graphics, a free online course taught by Eric Haines that features video lectures and interactive programming exercises using Three.js.
- Tween.js: a library for automatically interpolating values, useful for smooth animations
- Physi.js: a physics engine designed for use with Three.js
- dat.GUI: a lightweight graphical user interface for changing variables
- Gamepad.js: a library that simplifies processing input from gamepads and joysticks
If you want to create advanced graphical effects beyond those that are included with Three.js, you will need to learn to write shaders, which are functions that run directly on the GPU. Two excellent introductions to shaders, written specifically for users of Three.js, are:
- Intro to Pixel Shaders in Three.js, written by Felix Turner
- An Introduction to Shaders, written by Paul Lewis
Finally, if you are interested in deploying your project for Android or iOS, Ludei's CocoonJS is a platform that does exactly that. The process is well-documented and relatively easy, as most of the work is automated by the CocoonJS Cloud Compilation System.
Where to Go for Help
If you have a question that you can't figure out by looking at the examples or resources above, the place to go for help is Stack Overflow, the premier question and answer site for professional and enthusiast programmers. First, search to see if your question was already asked; if not, register for an account and ask it there!
With these resources at your disposal, it is time to start creating! Three.js has an active and vibrant community, so you should always feel free to ask questions, join in the discussions, and showcase your work. The best of luck to you in your endeavors!