Three.js Developer Tools

Developer tools for 3D library three.js.

Three.js Developer Tools - Chrome Extension

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.

Extension stats

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:
Manifest version: 2
Permissions:
  • storage
  • webNavigation
  • http://*/*
  • https://*/*
Size: 1.34M
URLs: Website

Other platforms

Not available on Android
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.

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, 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

Extension safety

Risk impact

Three.js Developer Tools requires some sensitive permissions that could impact your browser and data security. Exercise caution before installing.

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: