(WIP) Next-generation Three.js DevTools, it's modern and future-oriented.
MIT License
⚠️ |
three-devtools is currently in development, You can test the latest alpha build if you would like, but be warned, you may find many bugs and incomplete features, and API may be changed. Please file new issues here after searching to see if the issue exists. Contributors welcome! |
---|
Original three-devtools and other three.js
devtools are feature-lacking, outdated, and lack maintenance. This project aims to provide modern and feature-rich devtools for three.js.
https://www.chengfeng.fun/three-devtools/example.html
The browser extension is working in progress.
Browser extension is running in an isolated environment, it can't access the three.js
objects directly. So we need to inject a script to the page to communicate with the devtools. This will cause a performance penalty, so we recommend using Embedding Mode
(Can be injected by browser extension or manually initialize) if care about performance.
three-devtools
to your project// Choose one of the following commands depending on your package manager
npm install three-devtools -D
yarn add three-devtools -D
pnpm add three-devtools -D
three-devtools
in your code⚠️ Be cautious, you must make sure that three-devtools
has been initialized before initializing three.js
, otherwise three-devtools
cannot hook three.js correctly.
THREE
module to the initialize
method:import * as THREE from 'three';
import { ThreeJsDevTools } from 'three-devtools';
ThreeJsDevTools.initialize({
three: THREE,
});
initialize
method without passing the THREE
module:import { ThreeJsDevTools } from 'three-devtools';
ThreeJsDevTools.initialize();
It's coming soon.
See Contributing Guide.
three.js
user codeLicensed under the MIT license.