From 224ab06a4404e2ae5a0cbd2f43041961862b09fd Mon Sep 17 00:00:00 2001 From: Alvaro Saburido Date: Fri, 22 Dec 2023 16:31:02 +0100 Subject: [PATCH] feat: 474 vue chrome devtools plugin (#479) * feat: vue chrome devtools * feat: editable scenes from devtools * chore(lint): fix lint errors * feat: highlight material * chore(lint): fix --- docs/package.json | 6 +- playground/package.json | 3 +- playground/src/components/TheExperience.vue | 37 +- playground/src/components/TheSphere.vue | 1 + pnpm-lock.yaml | 1707 +++++++------------ src/components/TresCanvas.vue | 5 + src/devtools/highlight.ts | 24 + src/devtools/index.ts | 1 + src/devtools/plugin.ts | 292 ++++ src/devtools/utils.ts | 27 + src/utils/index.ts | 100 ++ src/utils/perf.ts | 2 +- 12 files changed, 1112 insertions(+), 1093 deletions(-) create mode 100644 src/devtools/highlight.ts create mode 100644 src/devtools/index.ts create mode 100644 src/devtools/plugin.ts create mode 100644 src/devtools/utils.ts diff --git a/docs/package.json b/docs/package.json index 097a757d5..38eb07d73 100644 --- a/docs/package.json +++ b/docs/package.json @@ -8,11 +8,11 @@ "build": "vitepress build", "preview": "vitepress preview" }, + "dependencies": { + "@tresjs/core": "workspace:3.6.0" + }, "devDependencies": { "unocss": "^0.58.0", "vite-svg-loader": "^5.1.0" - }, - "dependencies": { - "@tresjs/core": "workspace:3.6.0-next.0" } } diff --git a/playground/package.json b/playground/package.json index 2d29c1920..74f6190cb 100644 --- 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 index 51a02dc51..500a8b19d 100644 --- 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,21 +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) } }) diff --git a/playground/src/components/TheSphere.vue b/playground/src/components/TheSphere.vue index fa8b6118b..9c1761fcc 100644 --- a/playground/src/components/TheSphere.vue +++ b/playground/src/components/TheSphere.vue @@ -3,6 +3,7 @@