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.

30 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:

9 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 ?

1 Like
4 Likes

@looeee thank you :slightly_smiling_face:

1 Like

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

3 Likes

as for current 0.1 version this code worked:

    if (typeof __ THREE_DEVTOOLS__ !== 'undefined') {
    	__ THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('entity', { type: 'scene', detail: scene }));
    	__ THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('entity', { type: 'renderer', detail: renderer }));
    }
1 Like

I love it.

:heart_eyes:Great!

Great tool! It would be really useful if there was a way to pick an object on screen

1 Like


What happens with the extension. It was still working until last week

It seems this happens since the extension is not available in the Chrome Web Store anymore.

@mrdoob Is it possible that the account which published the extension has been deleted?

1 Like

Is there any chance these will come back? I use them all the time for debugging.