Debugging Three.js Projects Just Got a Whole Lot Easier
An Introduction to Three.js
Three.js is a JavaScript library that allows users to create and display 3D content in the browser. To build this 3D world, Three.js relies on WebGL. WebGL is a JavaScript API that allows developers to create triangles, which come together to create a 3D experience in your browser.
Ricardo Cabello created Three.js, which is now updated regularly by a large community. This library simplifies WebGL and acts as syntactic sugar for the obscure math and physics used to manipulate 3D objects and scenes.
Unfortunately, even with Three.js, it can be difficult to view all 3D properties and make edits. Moving back and forth from a code editor to the browser can be tedious and previous developer tools are no longer compatible with different browsers and Three.js versions.
Three-tools
We have created the solution. Three-tools is an open-source Three.js Developer’s Tool designed to facilitate easy debugging of Three.js entities right from the browser. Three-tools displays the relevant properties for different Three.js scenes, objects, cameras, geometries, materials and textures. Using Three-tools, you can manipulate Three.js properties in the browser and edit scenes to your liking. Once you have found a set of transform properties you like, three-tools will allow you to save and view those properties.
Three-tools iterates on the previous Three.js Developer’s Tool by Jordan Santell and implements additional features, Chrome compatibility, and an up-to-date compatibility with the newest Three.js version.
Listening to the Three.js community, we have made the following changes:
- eliminate the requirement to hit the reload button when extension is first opened
- search bar to allow users to search through entities by uuid, name, or type
- hide/show toggle icon to control visibility of scene elements, textures, geometries and materials
- updated Three.js to the latest version
- updated UI/UX for enhanced user debugging experience
- support for rendering camera information
- support for scene background colors
- ability to save transformed properties and view information in the console and popup windows
Three-tools was created to provide a free, open-source solution for those looking to debug their Three.js projects. Our tool is still in the experimental/beta phase, so please feel free to send comments and suggestions to our project. We’ve kept features the community knows and loves and have added new ones to make developing Three.js projects seamlessly integrate with the user experience in the browser. Happy debugging!
Alyssa Chew | GitHub | LinkedIn
Katie Ahn | GitHub
