diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 7327e2b1..18e8bf78 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -111,6 +111,7 @@ export default defineConfig({
collapsed: true,
items: [
{ text: 'v-log', link: '/guide/directives/v-log' },
+ { text: 'v-light-helper', link: '/guide/directives/v-light-helper' },
],
},
],
diff --git a/docs/guide/directives/v-light-helper.md b/docs/guide/directives/v-light-helper.md
new file mode 100644
index 00000000..0094ac89
--- /dev/null
+++ b/docs/guide/directives/v-light-helper.md
@@ -0,0 +1,32 @@
+# v-light-helper 🔆
+
+With the new directive v-light-helper provided by **TresJS**, you can add fast the respective helper to your lights with just one line of code 😍.
+
+```vue{3}
+
+
+
+
+
+
+
+
+
+
+
+```
+
+::: warning
+This directive just work with the following lights:DirectionalLight,PointLight, SpotLight, HemisphereLight.
+By this way you can't tweaks the props for the helper if you need to do that, please use the normal helper instance
+:::
diff --git a/playground/src/pages/directives/vLightHelper.vue b/playground/src/pages/directives/vLightHelper.vue
new file mode 100644
index 00000000..738e79ca
--- /dev/null
+++ b/playground/src/pages/directives/vLightHelper.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/playground/src/components/DirectivesDemo.vue b/playground/src/pages/directives/vLog.vue
similarity index 98%
rename from playground/src/components/DirectivesDemo.vue
rename to playground/src/pages/directives/vLog.vue
index 469af6af..0dbe3aca 100644
--- a/playground/src/components/DirectivesDemo.vue
+++ b/playground/src/pages/directives/vLog.vue
@@ -32,6 +32,7 @@ onLoop(({ elapsed }) => {
-
+
diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts
index de4e0005..15823a5f 100644
--- a/playground/src/router/index.ts
+++ b/playground/src/router/index.ts
@@ -5,6 +5,7 @@ import {
stagingRoutes,
loadersRoutes,
materialsRoutes,
+ directivesRoutes,
} from './routes'
const routes = [
@@ -18,6 +19,7 @@ const routes = [
...stagingRoutes,
...loadersRoutes,
...materialsRoutes,
+ ...directivesRoutes,
]
export const router = createRouter({
diff --git a/playground/src/router/routes/directives.ts b/playground/src/router/routes/directives.ts
new file mode 100644
index 00000000..a9bb9fc6
--- /dev/null
+++ b/playground/src/router/routes/directives.ts
@@ -0,0 +1,12 @@
+export const directivesRoutes = [
+ {
+ path: '/directives/vlog',
+ name: 'vLog',
+ component: () => import('../../pages/directives/vLog.vue'),
+ },
+ {
+ path: '/directives/v-light-helper',
+ name: 'vLightHelper',
+ component: () => import('../../pages/directives/vLightHelper.vue'),
+ },
+]
\ No newline at end of file
diff --git a/playground/src/router/routes/index.ts b/playground/src/router/routes/index.ts
index 17d10a7e..30360585 100644
--- a/playground/src/router/routes/index.ts
+++ b/playground/src/router/routes/index.ts
@@ -2,6 +2,7 @@ import { controlsRoutes } from './controls'
import { abstractionsRoutes } from './abstractions'
import { stagingRoutes } from './staging'
import { loadersRoutes } from './loaders'
+import { directivesRoutes } from './directives'
import { materialsRoutes } from './materials'
export {
@@ -10,4 +11,5 @@ export {
stagingRoutes,
loadersRoutes,
materialsRoutes,
+ directivesRoutes,
}
\ No newline at end of file
diff --git a/src/core/directives/index.ts b/src/core/directives/index.ts
index 25fbb90a..e9f5305c 100644
--- a/src/core/directives/index.ts
+++ b/src/core/directives/index.ts
@@ -1,3 +1,4 @@
import { vLog } from './vLog'
+import { vLightHelper } from './vLightHelper'
-export { vLog }
+export { vLog, vLightHelper }
diff --git a/src/core/directives/vLightHelper.ts b/src/core/directives/vLightHelper.ts
new file mode 100644
index 00000000..41c924fe
--- /dev/null
+++ b/src/core/directives/vLightHelper.ts
@@ -0,0 +1,36 @@
+import { useLogger } from '@tresjs/core'
+import { DirectionalLightHelper, PointLightHelper, SpotLightHelper, HemisphereLightHelper } from 'three'
+
+const { logWarning } = useLogger()
+
+export const vLightHelper = {
+ mounted: (el: any) => {
+ if (!el.isLight) {
+ logWarning(`${el.type} is not a light`)
+ return
+ }
+ currentHelper = helpers[el.type]
+ el.parent.add(new currentHelper(el))
+ },
+ updated: (el: any) => {
+ currentInstance = el.parent.children.find((child: any) => child instanceof currentHelper)
+ currentInstance.update()
+ },
+ unmounted: (el: any) => {
+ if (!el.isLight) {
+ logWarning(`${el.type} is not a light`)
+ return
+ }
+ currentInstance = el.parent.children.find((child: any) => child instanceof currentHelper)
+ currentInstance.dispose()
+ el.parent.remove(currentInstance)
+ },
+}
+let currentHelper: any
+let currentInstance: any
+const helpers = {
+ DirectionalLight: DirectionalLightHelper,
+ PointLight: PointLightHelper,
+ SpotLight: SpotLightHelper,
+ HemisphereLight: HemisphereLightHelper,
+}