Live Code Examples, and How to Fix Errors in Your Code 0.5

LIVE CODE EXAMPLES, AND HOW TO FIX ERRORS IN YOUR CODE

All the code demonstrated throughout this book is available in an online, editable format using Codesandbox.io. Each chapter will start with a template for you to work from, and end with the completed code, both embedded as live templates within the page. You can even edit the code without leaving the site! It will look like this:

The CodeSandbox Interface

Click “edit on CodeSandbox” above to open the example in a new window. Take a few minutes now to become familiar with the UI.

Working Locally

If you prefer, you can take the directory structure from the empty template and create your own local version.

The Codesandbox.io file tree

Copy the folder structure above, except for package.json which is used to set up the Codesandbox project environment, and copy the contents of index.html and main.css into your local version. You can leave app.js empty for now.

You can avoid this issue by using the online version throughout this book. Fortunately, whenever you do run into it, there is a manual page on the official three.js docs called How to Run things locally that explains things in more detail, and setting up a simple HTTP server is usually pretty straightforward.

Debugging Your Code with the Browser Console

If three.js has successfully loaded, when you type THREE into the console you will see this:

Object {
    WebGLRenderTargetCube: WebGLRenderTargetCube(),
    WebGLRenderTarget: WebGLRenderTarget(),
    WebGLRenderer: WebGLRenderer(),
    ShaderLib: Object,
    UniformsLib: Object,
    UniformsUtils: Object,
    ShaderChunk: Object,
    FogExp2: FogExp2(),
    Fog: Fog(),
    Scene: Scene(),
    367 more
}

Press CTRL + SHIFT + I, or CMD + Shift + I on a Mac, and take a look at the window that opens up. Looks familiar? Great. If not take a moment now to become familiar with it, especially the tab called Elements which holds data about your HTML structure and the CSS applied to it, and the tab called Console where any messages, warnings or errors related to your app will show up. You’ll be using this a lot throughout your career as a three.js developer - or indeed while doing any kind of web development.

Make sure you have the “console” tab highlighted and type THREE (all capital letters), then press return. If three.js has already been loaded, then the THREE global object will be logged to the console, telling you that three.js has successfully loaded and is ready for use.

If three.js has not been loaded, you will see an error similar to this (depending on which browser you are using):

Uncaught ReferenceError: THREE is not defined
    at <anonymous>:1:1

However, if you open the console from this page right now, and type THREE then you will see an “object not defined” error.

Uncaught ReferenceError: SomeObject is not defined is a common error and means that you are referencing an object that does not exist (in the current scope). There can be many reasons for this, such as a script that hasn’t loaded correctly, or calling an object before it was defined, or somewhere that it is not accessible… or even just misspelling the object’s name! There’s nothing more annoying than spending an hour trying to track down a bug only to find that you had typed Someobject instead of SomeObject - so always double check your spelling first!

Logging to the Console

To check the value of a variable x using the browser console

let x = 'something';

// Do some stuff with x, so that now you expect that x = 'something else'.
// But how do you test this? Simple! Just use:

console.log( x );

// output: "something else"

The main debugging technique we’ll be using in this book is logging information to the console using console.log(). It’s a simple but powerful technique, and until you start to create more complex apps it’s likely to be the only one that you need.