Three.js Developer Tools

@jsantell lately published a new tool for three.js developers at the Chrome web store. The three.js developers tools enhance your Chrome dev tools with an additional panel that provides various options like:

  • Inspect the structure/hierarchy of a three.js scene
  • Change properties of 3D objects, materials, textures or lights at runtime
  • Inspect statistical information about the graphics board memory and the rendering process (see WebGLRenderer.info)

Please note that the tool is still in an experimental stage. If you have ideas to make the tool even better or if you encounter any bugs, feel free to create an issue at the respective github repository.

10 Likes

I cannot activate it, it stays greyed out for three.js webpages as well. What do I do wrong? :confused:

I think it doesn’t work when the WebGL content is in an iframe. If you access the example’s page directly, it should work. Try this link: https://threejs.org/examples/webgl_animation_keyframes.html

No, it’s not in an iframe. I tried with the example you sent me, still greyed out.

It says “Three.js developer tool has access to this site” when I hover the mouse, but it says the exact same thing on every page (even the ones without three.js).

Capture

Capture000

Once installed you’ll find it as a tab in the browser’s dev tools. Doesn’t work with iframes yet and it requires r106+ :nerd_face:

6 Likes

Ohhh, That explains why it won’t work for me, I’m on 105.

Yes! I’ve been looking forward to this :star_struck:

Two things that are going to be really useful for me: adjusting the render order in real time, and quickly enabling/disabling lights and shadows without reloading.

Insanely useful, thanks for sharing

That’s great ! Where can we give some feedback to help improving it ?

4 Likes

@looeee thank you :slightly_smiling_face:

I really want to compliment the threejs/${whatever} pattern!