Shader editor

.changeset/mean-cycles-cover.md

@@ -0,0 +1,7 @@
+---
+'core': feat
+'embedding': feat
+'examples': patch
+---
+
+Add the `Shader Editor` to edit shader code and take it effect in realtime

.changeset/quick-pugs-grab.md

@@ -0,0 +1,6 @@
+---
+'embedding': minor
+'core': minor
+---
+
+Integrate the [Spector.js](https://spector.babylonjs.com/) debug tool

.changeset/twenty-items-relax.md

@@ -0,0 +1,6 @@
+---
+'embedding': patch
+'core': patch
+---
+
+Improve the scene panel

.eslintignore

@@ -3,3 +3,5 @@ node_modules
 dist
 public
 pnpm-lock.yaml
+.changeset
+!.changeset/config.json

.prettierignore

@@ -3,3 +3,5 @@ node_modules
 dist
 public
 pnpm-lock.yaml
+.changeset
+!.changeset/config.json

README.md

@@ -44,16 +44,27 @@ 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:
+
 ```js
 import * as THREE from 'three';
 import { ThreeJsDevTools } from 'three-devtools';
 
-// Make sure `three-devtools` has initialized before initializing `three.js`
 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:
+
+```js
+import { ThreeJsDevTools } from 'three-devtools';
+
+ThreeJsDevTools.initialize();
+```
+
 ### Legacy Project Without Bundling
 
 It's coming soon.

packages/core/package.json

@@ -19,11 +19,14 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@swc/plugin-styled-components": "^1.5.49",
+    "@uiw/codemirror-extensions-langs": "^4.19.16",
+    "@uiw/react-codemirror": "^4.19.16",
     "antd": "^5.3.2",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "react-use": "^17.4.0",
     "shared": "workspace:*",
+    "spectorjs": "^0.9.29",
     "styled-components": "^5.3.9",
     "ts-toolbelt": "^9.6.0",
     "valtio": "^1.10.3"

packages/core/src/Drawer/Drawer.ts

@@ -3,16 +3,20 @@ import { ThreeJsClientAdapter } from '../ThreeJsClientAdapter';
 
 export class Drawer {
   public static drawWireframeBox(object: THREE.Mesh, parent: THREE.Group) {
-    const line = new ThreeJsClientAdapter.USER_THREE.BoxHelper(object, '#f3ca67');
+    if (ThreeJsClientAdapter.USER_THREE) {
+      const line = new ThreeJsClientAdapter.USER_THREE.BoxHelper(object, '#f3ca67');
 
-    line.name = `wireframe-${object.uuid}`;
-    if (
-      line.material &&
-      line.material instanceof ThreeJsClientAdapter.USER_THREE.LineBasicMaterial
-    ) {
-      line.material.linewidth = 2;
-    }
+      line.name = `wireframe-${object.uuid}`;
+      if (
+        line.material &&
+        line.material instanceof ThreeJsClientAdapter.USER_THREE.LineBasicMaterial
+      ) {
+        line.material.linewidth = 2;
+      }
 
-    parent.add(line);
+      parent.add(line);
+    } else {
+      console.log('USER_THREE not defined');
+    }
   }
 }