/ programming

Debugging axes in three.js

Some of the issues I've encountered when I started playing around in three.js, is debugging my axes.

They visualize the position and orientation of meshes and the GridHelper (currently undocumented) helps me to debug my camera perspective.

If you're on the latest version of three.js (r58) I can help you with that pesky problem.

In foolishly attempting to create a 3D game, I created a utility class that has a few simple functions to help me debugging.

Usage:

THREE.utils.enableDebug( )

This function takes two kind of arguments. It takes a THREE.Scene object to enable BoxHelpers and AxisHelpers on every mesh in the scene.

It also take a THREE.Mesh object in case you only want to debug a single object.

THREE.disableDebug( )

does the exact opposite, and takes the same kind of arguments.

The code is freely available on GitHub, if you have anything to contribute don't hesitate to send a pull request!

https://github.com/gillesdemey/dungeongl/blob/master/game/utils/debug.js

Check out a demo below: