feat: 474 vue chrome devtools plugin (#526)

* feat: vue chrome devtools * feat: editable scenes from devtools * chore(lint): fix lint errors * feat: highlight material * chore(lint): fix * docs: debug section + devtools guide
Tresjs · Jan 29, 2024 · 0185bfa · 0185bfa
1 parent 5268e9f
commit 0185bfa
Show file tree

Hide file tree

Showing 18 changed files with 1,203 additions and 1,100 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -64,8 +64,28 @@ export default defineConfig({
           },
         ],
       },
+
+      {
+        text: 'Advanced',
+
+        items: [
+          { text: 'Extending', link: '/advanced/extending' },
+          { text: 'primitive', link: '/advanced/primitive' },
+          {
+            text: 'Caveats',
+            link: '/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Debug',
+        items: [
+          { text: 'Devtools', link: '/debug/devtools' },
+        ],
+      },
       {
         text: 'Examples',
+        collapsed: true,
         items: [
           { text: 'Orbit Controls', link: '/examples/orbit-controls' },
           { text: 'Basic Animations', link: '/examples/basic-animations' },
@@ -77,18 +97,6 @@ export default defineConfig({
           { text: 'Shaders', link: '/examples/shaders' },
         ],
       },
-      {
-        text: 'Advanced',
-
-        items: [
-          { text: 'Extending', link: '/advanced/extending' },
-          { text: 'primitive', link: '/advanced/primitive' },
-          {
-            text: 'Caveats',
-            link: '/advanced/caveats',
-          },
-        ],
-      },
       {
         text: 'Directives',
         collapsed: true,

diff --git a/docs/debug/devtools.md b/docs/debug/devtools.md
@@ -0,0 +1,28 @@
+# Devtools
+
+
+
+One of the most difficult things a developer faces when creating 3D experiences on the browser is debugging. The browser `canvas` is a black box, and it's hard to know what's going on inside. The imperative nature of [ThreeJS](https://threejs.org/) makes it incredibly difficult to debug, having to depend on `console.log` to see what's going on, or third party to fine-tune and inspect the scene.
+
+Don't make me get started with checking the performance of your scene. 😱
+
+![developer debugging 3D](/debug-3D.png)
+
+One of our goals with TresJS is to offer **the best DX (Developer Experience)** when dealing with 3D scenes on the browser. Thanks to the declarative nature of the ecosystem plus the variety of solutions the Vue ecosystem offers such as the Vue Devtools, Nuxt and Vite, we can offer a better tooling for devs to debug their scenes.
+
+## Introducing the Devtools
+
+From <Badge text="^3.7.0" /> we are introducing the TresJS Devtools, a customized inspector tab for the [Official Vue Chrome Devtools](https://devtools.vuejs.org/guide/installation.html) that allows you to inspect your TresJS scenes and components.
+
+![TresJS Devtools](/vue-chrome-devtools.png)
+
+### Features
+
+- **Scene Inspector**: Inspect the current scene and its components using a tree view similar to the Vue Devtools component inspector.
+- **Memory Allocation**: See how much memory is being by the components.
+- **Object Inspector**: Inspect the properties of the selected object in the scene, including its children.
+- **Editable Properties**: And yes, you can edit the properties of the selected object and see the changes in real-time.
+
+![](/devtools-scene-inspector.png)
+
+Enjoy the new Devtools and let us know what you think! 🎉
diff --git a/docs/public/debug-3D.png b/docs/public/debug-3D.png
diff --git a/docs/public/devtools-scene-inspector.png b/docs/public/devtools-scene-inspector.png
diff --git a/docs/public/meme-debugging.jpg b/docs/public/meme-debugging.jpg
diff --git a/docs/public/vue-chrome-devtools.png b/docs/public/vue-chrome-devtools.png
diff --git a/playground/package.json b/playground/package.json
@@ -10,15 +10,16 @@
   },
   "dependencies": {
     "@tresjs/cientos": "3.6.0",
+    "@tresjs/core": "workspace:^",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@tresjs/leches": "0.15.0-next.3",
     "@tweakpane/plugin-essentials": "^0.2.0",
-    "vite-plugin-vue-devtools": "1.0.0-rc.6",
     "unplugin-auto-import": "^0.17.2",
     "vite-plugin-glsl": "^1.2.1",
     "vite-plugin-qrcode": "^0.2.3",
+    "vite-plugin-vue-devtools": "1.0.0-rc.6",
     "vue-tsc": "^1.8.25"
   }
 }
diff --git a/playground/src/components/TheExperience.vue b/playground/src/components/TheExperience.vue
@@ -3,6 +3,8 @@ import { ref, watchEffect } from 'vue'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
 import TheSphere from './TheSphere.vue'
 
 const gl = {
@@ -17,20 +19,21 @@ const gl = {
 const wireframe = ref(true)
 
 const canvas = ref()
+const meshRef = ref()
+
+const { isVisible } = useControls({
+  isVisible: true,
+})
 
 watchEffect(() => {
-  if (canvas.value) {
-    console.log(canvas.value.context)
+  if (meshRef.value) {
+    console.log(meshRef.value)
   }
 })
 </script>
 
 <template>
-  <div>
-    <RouterLink to="/multiple">
-      Multiple
-    </RouterLink>
-  </div>
+  <TresLeches />
   <TresCanvas
     v-bind="gl"
     ref="canvas"
@@ -42,14 +45,10 @@ watchEffect(() => {
       :look-at="[0, 4, 0]"
     />
     <OrbitControls />
-    <TresFog
-      :color="gl.clearColor"
-      :near="5"
-      :far="15"
-    />
     <TresMesh
       :position="[-2, 6, 0]"
       :rotation="[0, Math.PI, 0]"
+      name="cone"
       cast-shadow
     >
       <TresConeGeometry :args="[1, 1.5, 3]" />
@@ -66,19 +65,22 @@ watchEffect(() => {
       />
     </TresMesh>
     <TresMesh
-      :rotation="[-Math.PI / 2, 0, 0]"
+      ref="meshRef"
+      :rotation="[-Math.PI / 2, 0, Math.PI / 2]"
+      name="floor"
       receive-shadow
     >
-      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-      <TresMeshToonMaterial color="#D3FC8A" />
+      <TresPlaneGeometry :args="[20, 20, 20]" />
+      <TresMeshToonMaterial
+        color="#D3FC8A"
+      />
     </TresMesh>
-    <TheSphere />
+    <TheSphere v-if="isVisible" />
     <TresAxesHelper :args="[1]" />
     <TresDirectionalLight
       :position="[0, 2, 4]"
       :intensity="2"
       cast-shadow
     />
-    <TresOrthographicCamera />
   </TresCanvas>
 </template>
diff --git a/playground/src/components/TheSphere.vue b/playground/src/components/TheSphere.vue
@@ -3,6 +3,7 @@
 <template>
   <TresMesh
     :position="[2, 2, 0]"
+    name="sphere"
     cast-shadow
   >
     <TresSphereGeometry />

diff --git a/playground/vite.config.ts.timestamp-1706539768400-58c91108b32e6.mjs b/playground/vite.config.ts.timestamp-1706539768400-58c91108b32e6.mjs
@@ -0,0 +1,50 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index.js";
+import vue from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import { resolve } from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/[email protected]/node_modules/pathe/dist/index.mjs";
+import AutoImport from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/unplugin-auto-import/dist/vite.js";
+import Components from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/[email protected][email protected]/node_modules/unplugin-vue-components/dist/vite.js";
+import glsl from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-glsl/src/index.js";
+import UnoCSS from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/unocss/dist/vite.mjs";
+import { templateCompilerOptions } from "file:///Users/alvarosabu/Projects/tres/core/dist/tres.js";
+import { qrcode } from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-qrcode/dist/index.js";
+import VueDevTools from "file:///Users/alvarosabu/Projects/tres/core/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-vue-devtools/dist/vite.mjs";
+var __vite_injected_original_dirname = "/Users/alvarosabu/Projects/tres/core/playground";
+var vite_config_default = defineConfig({
+  plugins: [
+    glsl(),
+    VueDevTools(),
+    vue({
+      script: {
+        propsDestructure: true
+      },
+      ...templateCompilerOptions
+    }),
+    AutoImport({
+      dts: true,
+      eslintrc: {
+        enabled: true
+        // <-- this
+      },
+      imports: ["vue"]
+    }),
+    Components({
+      /* options */
+    }),
+    UnoCSS({
+      /* options */
+    }),
+    qrcode()
+    // only applies in dev mode
+  ],
+  resolve: {
+    alias: {
+      "@tresjs/core": resolve(__vite_injected_original_dirname, "../src/index.ts")
+    },
+    dedupe: ["three"]
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYWx2YXJvc2FidS9Qcm9qZWN0cy90cmVzL2NvcmUvcGxheWdyb3VuZFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2FsdmFyb3NhYnUvUHJvamVjdHMvdHJlcy9jb3JlL3BsYXlncm91bmQvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2FsdmFyb3NhYnUvUHJvamVjdHMvdHJlcy9jb3JlL3BsYXlncm91bmQvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXG5pbXBvcnQgeyByZXNvbHZlIH0gZnJvbSAncGF0aGUnXG5pbXBvcnQgQXV0b0ltcG9ydCBmcm9tICd1bnBsdWdpbi1hdXRvLWltcG9ydC92aXRlJ1xuaW1wb3J0IENvbXBvbmVudHMgZnJvbSAndW5wbHVnaW4tdnVlLWNvbXBvbmVudHMvdml0ZSdcbmltcG9ydCBnbHNsIGZyb20gJ3ZpdGUtcGx1Z2luLWdsc2wnXG5pbXBvcnQgVW5vQ1NTIGZyb20gJ3Vub2Nzcy92aXRlJ1xuaW1wb3J0IHsgdGVtcGxhdGVDb21waWxlck9wdGlvbnMgfSBmcm9tICdAdHJlc2pzL2NvcmUnXG5pbXBvcnQgeyBxcmNvZGUgfSBmcm9tICd2aXRlLXBsdWdpbi1xcmNvZGUnXG5pbXBvcnQgVnVlRGV2VG9vbHMgZnJvbSAndml0ZS1wbHVnaW4tdnVlLWRldnRvb2xzJ1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIGdsc2woKSxcbiAgICBWdWVEZXZUb29scygpLFxuICAgIHZ1ZSh7XG4gICAgICBzY3JpcHQ6IHtcbiAgICAgICAgcHJvcHNEZXN0cnVjdHVyZTogdHJ1ZSxcbiAgICAgIH0sXG4gICAgICAuLi50ZW1wbGF0ZUNvbXBpbGVyT3B0aW9ucyxcbiAgICB9KSxcbiAgICBBdXRvSW1wb3J0KHtcbiAgICAgIGR0czogdHJ1ZSxcbiAgICAgIGVzbGludHJjOiB7XG4gICAgICAgIGVuYWJsZWQ6IHRydWUsIC8vIDwtLSB0aGlzXG4gICAgICB9LFxuICAgICAgaW1wb3J0czogWyd2dWUnXSxcbiAgICB9KSxcbiAgICBDb21wb25lbnRzKHtcbiAgICAgIC8qIG9wdGlvbnMgKi9cbiAgICB9KSxcbiAgICBVbm9DU1Moe1xuICAgICAgLyogb3B0aW9ucyAqL1xuICAgIH0pLFxuICAgIHFyY29kZSgpLCAvLyBvbmx5IGFwcGxpZXMgaW4gZGV2IG1vZGVcbiAgXSxcbiAgcmVzb2x2ZToge1xuICAgIGFsaWFzOiB7XG4gICAgICAnQHRyZXNqcy9jb3JlJzogcmVzb2x2ZShfX2Rpcm5hbWUsICcuLi9zcmMvaW5kZXgudHMnKSxcbiAgICB9LFxuICAgIGRlZHVwZTogWyd0aHJlZSddLFxuICB9LFxufSlcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBK1QsU0FBUyxvQkFBb0I7QUFDNVYsT0FBTyxTQUFTO0FBQ2hCLFNBQVMsZUFBZTtBQUN4QixPQUFPLGdCQUFnQjtBQUN2QixPQUFPLGdCQUFnQjtBQUN2QixPQUFPLFVBQVU7QUFDakIsT0FBTyxZQUFZO0FBQ25CLFNBQVMsK0JBQStCO0FBQ3hDLFNBQVMsY0FBYztBQUN2QixPQUFPLGlCQUFpQjtBQVR4QixJQUFNLG1DQUFtQztBQVl6QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxLQUFLO0FBQUEsSUFDTCxZQUFZO0FBQUEsSUFDWixJQUFJO0FBQUEsTUFDRixRQUFRO0FBQUEsUUFDTixrQkFBa0I7QUFBQSxNQUNwQjtBQUFBLE1BQ0EsR0FBRztBQUFBLElBQ0wsQ0FBQztBQUFBLElBQ0QsV0FBVztBQUFBLE1BQ1QsS0FBSztBQUFBLE1BQ0wsVUFBVTtBQUFBLFFBQ1IsU0FBUztBQUFBO0FBQUEsTUFDWDtBQUFBLE1BQ0EsU0FBUyxDQUFDLEtBQUs7QUFBQSxJQUNqQixDQUFDO0FBQUEsSUFDRCxXQUFXO0FBQUE7QUFBQSxJQUVYLENBQUM7QUFBQSxJQUNELE9BQU87QUFBQTtBQUFBLElBRVAsQ0FBQztBQUFBLElBQ0QsT0FBTztBQUFBO0FBQUEsRUFDVDtBQUFBLEVBQ0EsU0FBUztBQUFBLElBQ1AsT0FBTztBQUFBLE1BQ0wsZ0JBQWdCLFFBQVEsa0NBQVcsaUJBQWlCO0FBQUEsSUFDdEQ7QUFBQSxJQUNBLFFBQVEsQ0FBQyxPQUFPO0FBQUEsRUFDbEI7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=