Chrome Extension for Inspecting your ThreeJs Scenes.
This project is in a very early stage! Currently, you can use this extension to get a very coarse overview of your
scene, as well as edit the shaders of ShaderMaterials and RawShaderMaterials on the fly.
Generally, threespector will keep track of all objects in your root scene. It will notice any changes to position, rotation, scale.
- Expand the tree nodes to see objects and their children
- Double-click on the name of an object in the tree to jump to it in the 3D view
All meshes are represented by their bounding boxes. Lights are also visible.
Use the filter input to filter the tree by object-types and -names.
When working on shaders it is sometimes quite cumbersome to reload the scene on every tiny change. With threespector you can edit your GLSL code and update the shaders directly without reloading the scene. This should be especially helpful when experimenting:
At this point the extension has not been published in the Chrome Web Store. So, you need to build it yourself or download the latest release and install it manually:
- Download the latest release and unpack in a folder of your choice.
- Open chrome and go to
chrome://extensions/ - Turn on Developer Mode
- Click Load unpacked
- Point chrome to the directory you unpacked the extension to. It should be the one that contains
manifest.json
If you want to build the extension yourself, just clone this repository, install all dependencies via yarn install
and run yarn build. The extension will be placed in ./dist/. When installing the extension in Chrome point it to
the distdirectory.
In order for ThreeSpector to find your scene you need to expose it globally in your project. As soon as you open
the developer tools panel of the extension, it will look for ___threespector_scene___ and hook into it. So, all
you have to do is:
window.___threespector_scene___ = scene; // <- your scene objectIf you've found a bug or have a problem, feel free to open an issue. This will help improve the extension.