Three.js Developer Tools

Three.js Developer Tools

Developer tools for 3D library three.js.

What is Three.js Developer Tools?
Three.js Developer Tools is a Chrome extension that offers developer tools for the three.js 3D library. It allows users to inspect the scene graph, objects, materials, and textures. Additionally, users can view renderer information and modify entity values directly through the developer tools.
Stats
This extension was removed from Chrome Web Store on 2022-06-15
By: jsantell
Users: 10,000+
Rating: 4.50 (20)
Version: 0.4.0 (Last updated: 2020-07-27)
Creation date: 2020-01-15
Risk impact: High risk impact
Risk likelihood: High risk likelihood
Manifest version: 2
Permissions:
  • storage
  • webNavigation
  • http://*/*
  • https://*/*
Size: 1.34M
URLs: Website
Stats date:

Other platforms

Not available on Firefox
Not available on Edge
Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.
Chrome-Stats extension
Summary

Developer tools for 3D library three.js.

Currently supports inspection of three.js scenes and renderers. While currently an early alpha stage, a handful of features are supported:

  • Inspect the scene graph
  • Inspect objects, materials, textures
  • View renderer info
  • Modify entity values via developer tools
User reviews
very useful for thee.js developers Thank you
by Gnana Sai Gnana Sai, 2022-02-02

I just got started with ThreeJS and this tool is very useful to tinker around with the lights' colors and the meshes! The only difficulty in getting started is to know where to put the extension's observer code. I put it at the end of the animate function like so: function animate() { requestAnimationFrame(animate); // ... renderer.render(scene, camera); // Observe a scene or a renderer if (typeof __THREE_DEVTOOLS__ !== "undefined") { __THREE_DEVTOOLS__.dispatchEvent( new CustomEvent("observe", { detail: scene }) ); __THREE_DEVTOOLS__.dispatchEvent( new CustomEvent("observe", { detail: renderer }) ); } } And then you just have to open the "three" tab in the Chrome Devtool. Enjoy!
by Cyril Antoni, 2021-05-16

Very lightweight / not many features, but certainly better than nothing (I am shocked there is no native option similar to the editor on threejs.org, like A-Frame has via CMD + OPT + i?). Installation is not straightforward, so if you're stuck: Step 1 - Follow instructions under "Current API" (https://github.com/threejs/three-devtools) You'll need to add that code to your page (rename the variables according to your logic), or run it manually via console. Step 2 - Restart Chrome
by Chris Scavongelli, 2021-05-13
View all user reviews
Safety
Risk impact

Three.js Developer Tools is risky to use as it requires a number of sensitive permissions that can potentially harm your browser and steal your data. Exercise caution when installing this extension. Review carefully before installing. We recommend that you only install Three.js Developer Tools if you trust the publisher.

Risk likelihood

Three.js Developer Tools may not be trust-worthy. Avoid installing if possible unless you really trust this publisher.

Upgrade to see risk analysis details
Similar extensions

Here are some Chrome extensions that are similar to Three.js Developer Tools: