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

It's animating! You've now built your first 3D world in the browser. Because it's in
JavaScript, you can also easily send it to your friends. (In the online editor, click on
the stacked bars icon at the upper-right, click on the Download button, and then
rename the downloaded file with a .html extension.)
Both within the Three.js repository and online, most of the Three.js
examples you'll find will have all their code in a single HTML file.
This is convenient for small projects but unhealthy for larger ones.
Even though most of the code in this topic is small enough to be
manageable in a single file, we will try to use patterns that make the
code maintainable. Chapter 5 , Design and Development specifically
addresses designs that work well at scale.
Choosing your environment
The Google Chrome browser is usually considered to be on the leading edge of
WebGL support, so many Three.js developers work mainly in either the latest stable
version of Chrome or the alpha-release branch, named Canary . Chrome has a lot
of other advantages too, such as advanced performance profiling, the ability to
emulate touch events, and support for inspecting canvas frames. (You can access
these features through the Chrome Developer Tools settings. Canvas inspection
is explained well at http://www.html5rocks.com/en/tutorials/canvas/
inspection/ .) If you want to experiment with WebGL features that are still in
development, you can enable some of them in Canary's about:flags page.
When it comes to coding, the online Three.js editor is great for testing small,
isolated concepts, but it quickly gets cumbersome for more complex projects.
Most programming environments have solid JavaScript support, but some
are better than others.
Chrome also has a script-editing environment that works well for some people. If
you open the Chrome Developer Tools ( Ctrl / Cmd + Shift + I ) and switch to the
Sources tab, you can configure Chrome to edit files from your local filesystem. This
environment includes syntax highlighting, debugging, autocompletion, source
mapping for minified files, revision control that visually shows changes, and the
ability to run the code instantly without reloading the page. Additionally, you can
store snippets for reuse as described at https://developers.google.com/chrome-
developer-tools/docs/authoring-development-workflow#snippets .