Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Game Development with Three.js

You're reading from   Game Development with Three.js With Three.js you can create sophisticated 3D games that run in the web browser. This book is aimed at both the professional game designer and the enthusiast with a step by step approach including lots of tips and examples.

Arrow left icon
Product type Paperback
Published in Oct 2013
Publisher Packt
ISBN-13 9781782168539
Length 118 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Isaac Sukin Isaac Sukin
Author Profile Icon Isaac Sukin
Isaac Sukin
Arrow right icon
View More author details
Toc

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.

You can see what the editor looks like in the following screenshot:

Google Chrome Developer Tools

If you prefer to work outside of the Chrome editor, it can be tedious to constantly switch windows and reload the page. There are several tools that attempt to solve this. LiveReload (http://livereload.com/) and Tin.cr (http://tin.cr/) are the best known; they are browser extensions that automatically reload the page when you save a file. You may also want to try LightTable (http://www.lighttable.com/), an experimental IDE that also autoreloads and additionally includes tools for visually manipulating your code.

If you use Sublime Text as your editor, you can install autocompletion support for Three.js commands through the package manager or from the Three.js repository itself (in /utils/editors).

You have been reading a chapter from
Game Development with Three.js
Published in: Oct 2013
Publisher: Packt
ISBN-13: 9781782168539
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image