{"id":15287939,"url":"https://github.com/vimcaw/three-devtools","last_synced_at":"2026-01-23T11:46:00.710Z","repository":{"id":186471580,"uuid":"612537791","full_name":"vimcaw/three-devtools","owner":"vimcaw","description":"(WIP) Next-generation Three.js DevTools, it's modern and future-oriented.","archived":false,"fork":false,"pushed_at":"2025-03-02T09:28:40.000Z","size":807,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T06:07:35.033Z","etag":null,"topics":["devtools","threejs"],"latest_commit_sha":null,"homepage":"https://www.chengfeng.fun/three-devtools/example.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vimcaw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-11T08:39:53.000Z","updated_at":"2025-03-02T09:28:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"706624c2-ccaa-4298-9e1a-99b4171883e0","html_url":"https://github.com/vimcaw/three-devtools","commit_stats":null,"previous_names":["vimcaw/three-devtools"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimcaw%2Fthree-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimcaw%2Fthree-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimcaw%2Fthree-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimcaw%2Fthree-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vimcaw","download_url":"https://codeload.github.com/vimcaw/three-devtools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670435,"owners_count":21142904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["devtools","threejs"],"created_at":"2024-09-30T15:39:52.086Z","updated_at":"2026-01-23T11:45:55.685Z","avatar_url":"https://github.com/vimcaw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./resource/logo.svg\" height=\"128\"\u003e\n  \u003ch1 align=\"center\"\u003eThree.js DevTools\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/three-devtools\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/three-devtools?style=for-the-badge\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e\n  Next-generation Three.js DevTools, it's modern and future-oriented.\n\u003c/h3\u003e\n\n| ⚠️  | `three-devtools` is currently in development, You can test the latest [alpha build](https://www.npmjs.com/package/three-devtools) 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](https://github.com/vimcaw/three-devtools/issues) after searching to see if the issue exists. [Contributors welcome](https://github.com/vimcaw/three-devtools/blob/main/CONTRIBUTING.md)! |\n| --- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n\n# Motivation\n\n[Original three-devtools](https://github.com/threejs/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://threejs.org).\n\n# Example website\n\nhttps://www.chengfeng.fun/three-devtools/example.html\n\n# Usage\n\n## Browser Extension\n\nThe browser extension is working in progress.\n\n### Performance Limitation\n\nBrowser 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.\n\n## Embedding Usage\n\n### Modern Project With Bundling (Vite, Webpack, Rollup, etc.)\n\n#### 1. install `three-devtools` to your project\n\n```bash\n// Choose one of the following commands depending on your package manager\n\nnpm install three-devtools -D\nyarn add three-devtools -D\npnpm add three-devtools -D\n```\n\n#### 2. Initialize `three-devtools` in your code\n\n**⚠️ Be cautious, you must make sure that `three-devtools` has been initialized before initializing `three.js`, otherwise `three-devtools` cannot hook three.js correctly.**\n\n##### Option 1: If you want to enable some feature(such as object highlighting on a pick), you have to pass the `THREE` module to the `initialize` method:\n\n```js\nimport * as THREE from 'three';\nimport { ThreeJsDevTools } from 'three-devtools';\n\nThreeJsDevTools.initialize({\n  three: THREE,\n});\n```\n\n##### Option 2: If you don't need those features, you can just call the `initialize` method without passing the `THREE` module:\n\n```js\nimport { ThreeJsDevTools } from 'three-devtools';\n\nThreeJsDevTools.initialize();\n```\n\n### Legacy Project Without Bundling\n\nIt's coming soon.\n\n# Roadmap\n\n- [ ] Scene Tree\n  - [x] View scene tree\n  - [x] Remove object\n  - [x] Highlight the selected object\n  - [ ] Improve highlight effect\n  - [ ] Pick an object in a scene to select\n  - [ ] Search and filter objects in the scene tree\n- [ ] Rendering pipelines\n  - [ ] View rendering pipelines\n- [ ] Render Target\n  - [ ] View all render targets\n- [ ] Inspector\n  - [x] View basic render information\n  - [x] View and edit basic object properties\n  - [ ] View and edit basic material properties\n  - [ ] View and edit basic texture properties\n  - [ ] View and edit basic light properties\n  - [ ] Visualize light probes\n  - [ ] View and edit basic camera properties\n  - [ ] View normals of vertexes\n  - [ ] Shader edit and preview in real time\n  - [ ] View and edit vertexes\n- [ ] Embedding Mode\n  - [x] Embedding to a user page\n  - [x] Adjust the embedding switch button position\n  - [x] Adjust embedding panel width\n  - [ ] Legacy project usage\n  - [ ] Improve UI\n- [ ] Browser Extension\n  - [ ] Chrome\n  - [ ] Firefox\n  - [ ] Edge\n  - [ ] Safari\n- [ ] Misc\n  - [x] Dark mode\n  - [x] Automatic versioning and publishing\n  - [ ] Issue and PR template\n  - [ ] Unit test\n  - [ ] E2E test\n  - [ ] Internationalization and localization (i18n)\n  - [ ] Performance optimization\n\n# Contribution\n\nSee [Contributing Guide](CONTRIBUTING.md).\n\n# Credits\n\n- [Original three-devtools](https://github.com/threejs/three-devtools) - For inspiration of communication mechanism with `three.js` user code\n- [Babylon.js inspector](https://doc.babylonjs.com/toolsAndResources/inspector) - For inspiration of functionality and UI\n\n# License\n\nLicensed under the [MIT license](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimcaw%2Fthree-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvimcaw%2Fthree-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimcaw%2Fthree-devtools/lists"}