diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index ded89b80..1ae69825 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -103,6 +103,13 @@ export default defineConfig({
{ text: 'Stats', link: '/guide/misc/stats' },
],
},
+ {
+ text: 'Directives',
+ collapsed: true,
+ items: [
+ { text: 'v-log', link: '/guide/directives/v-log' },
+ ],
+ },
],
socialLinks: [
diff --git a/docs/guide/directives/v-log.md b/docs/guide/directives/v-log.md
new file mode 100644
index 00000000..5d289738
--- /dev/null
+++ b/docs/guide/directives/v-log.md
@@ -0,0 +1,56 @@
+# v-log
+
+### Problem
+
+When you have to log your instance you have to use the template reference and then log them:
+
+```vue{3}
+
+
+
+
+
+
+
+
+```
+
+And is A LOT of code just for a simple log right?
+
+## Solution
+
+With the new directive v-log provided by **TresJS**, you can do this by just adding `v-log` to the instance.
+
+```vue{3}
+
+
+
+
+
+ />
+
+
+
+```
+
+Note that you can pass a modifier with the name of a property, for example `v-log:material`, and will log directly the `material` property 😍
+
+::: warning
+The component `` will not log the canvas or the scene.
+:::
diff --git a/playground/components.d.ts b/playground/components.d.ts
index ea39ab41..57605e84 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -8,16 +8,10 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AkuAku: typeof import('./src/components/AkuAku.vue')['default']
- EnvironmentDemo: typeof import('./src/components/EnvironmentDemo.vue')['default']
- GlassMaterialDemo: typeof import('./src/components/GlassMaterialDemo.vue')['default']
+ DirectivesDemo: typeof import('./src/components/DirectivesDemo.vue')['default']
Gltf: typeof import('./src/components/gltf/index.vue')['default']
- LeviosoDemo: typeof import('./src/components/LeviosoDemo.vue')['default']
- MapControlsDemo: typeof import('./src/components/MapControlsDemo.vue')['default']
ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
- TheGizmos: typeof import('./src/components/TheGizmos.vue')['default']
- UseVideoTextureDemo: typeof import('./src/components/useVideoTextureDemo.vue')['default']
- WobbleMaterial: typeof import('./src/components/WobbleMaterial.vue')['default']
}
}
diff --git a/playground/src/components/DirectivesDemo.vue b/playground/src/components/DirectivesDemo.vue
new file mode 100644
index 00000000..469af6af
--- /dev/null
+++ b/playground/src/components/DirectivesDemo.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index 41a6f850..0a7caf9f 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -2,6 +2,6 @@
-
+
diff --git a/src/core/directives/index.ts b/src/core/directives/index.ts
new file mode 100644
index 00000000..25fbb90a
--- /dev/null
+++ b/src/core/directives/index.ts
@@ -0,0 +1,3 @@
+import { vLog } from './vLog'
+
+export { vLog }
diff --git a/src/core/directives/vLog.ts b/src/core/directives/vLog.ts
new file mode 100644
index 00000000..88dac2a6
--- /dev/null
+++ b/src/core/directives/vLog.ts
@@ -0,0 +1,11 @@
+export const vLog = {
+ updated: (el: any, binding: any) => {
+ if (binding.arg) {
+ // eslint-disable-next-line no-console
+ console.log(`v-log:${binding.arg}`, el[binding.arg])
+ return
+ }
+ // eslint-disable-next-line no-console
+ console.log('v-log', el)
+ },
+}
\ No newline at end of file
diff --git a/src/core/index.ts b/src/core/index.ts
index 9e07a17f..d46d7f66 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -5,3 +5,4 @@ export * from './materials'
export * from './shapes'
export * from './staging'
export * from './misc'
+export * from './directives'