three-devtools v0.1.0-alpha.4
⚠️ | three-devtools is currently in development and not yet ready for opensource. You can test the latest alpha build if you would like, but be warned, you will find many bugs and incomplete features, and API may be changed. Please file new issues here after searching to see if the issue already exists. Contributors welcome! |
---|
Motivation
Original three-devtools and other three.js
devtools are feature-lacking, outdated and lack of maintenance. This project aims to provide a modern and feature-rich devtools for three.js.
Usage
Browser Extension
Browser extension is working in progress.
Performance Limitation
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.
Embedding Usage
Modern Project With Bundling (Vite, Webpack, Rollup, etc.)
1. install three-devtools
to your project
// Choose one of the following commands depends on your package manager
npm install three-devtools -D
yarn add three-devtools -D
pnpm add three-devtools -D
2. initialize 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.
Option 1: If you want to enable some feature(such as object highlighting on pick), you have to pass the THREE
module to the initialize
method:
import * as THREE from 'three';
import { ThreeJsDevTools } from 'three-devtools';
ThreeJsDevTools.initialize({
three: THREE,
});
Option 2: If you don't need those feature, you can just call the initialize
method without passing the THREE
module:
import { ThreeJsDevTools } from 'three-devtools';
ThreeJsDevTools.initialize();
Legacy Project Without Bundling
It's coming soon.
Roadmap
- Scene Tree
- View scene tree
- Remove object
- Highlight selected object
- Improve highlight effect
- Pick object in scene to select
- Search and filter objects in scene tree
- Rendering pipelines
- View rendering pipelines
- Render Target
- View all render targets
- Inspector
- View basic render information
- View and edit basic object properties
- View and edit basic material properties
- View and edit basic texture properties
- View and edit basic light properties
- Visualize light probes
- View and edit basic camera properties
- View normals of vertexes
- Shader edit and preview in real time
- View and edit vertexes
- Embedding Mode
- Embedding to user page
- Adjust embedding switch button position
- Adjust embedding panel width
- Legacy project usage
- Improve UI
- Browser Extension
- Chrome
- Firefox
- Edge
- Safari
- Misc
- Dark mode
- Automatic versioning and publishing
- Issue and PR template
- Unit test
- E2E test
- Internationalization and localization (i18n)
- Performance optimization
Contribution
See Contributing Guide.
Credits
- Original three-devtools - For inspiration of communication mechanism with
three.js
user code - Babylon.js inspector - For inspiration of functionality and UI
License
Licensed under the MIT license.
9 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago