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 @@
+<script setup lang="ts">
+import { reactive, shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
+import { SRGBColorSpace, NoToneMapping } from 'three'
+
+const gl = {
+  clearColor: '#333',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const directionalLightRef = shallowRef()
+const pointLightRef = shallowRef()
+const spotLightRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ elapsed }) => {
+  if (directionalLightRef.value ) {
+    directionalLightRef.value.position.y = Math.sin(elapsed) * 1.5 + 2
+
+  }
+  if (pointLightRef.value) {
+    const lightAngle = elapsed * 0.5
+    pointLightRef.value.position.x = Math.cos(lightAngle) * 4
+    pointLightRef.value.position.z = Math.sin(lightAngle) * 4
+  }
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      v-light-helper
+      :scale="0.5"
+    >
+      <TresMeshStandardMaterial :color="0x222" />
+    </Sphere>
+    <TresAmbientLight :color="0xffffff" />
+    <TresDirectionalLight
+      ref="directionalLightRef"
+      v-light-helper
+      :color="0xffffff"
+      :intensity="5"
+      :position="[0, 2, 4]"
+    />
+    <TresPointLight
+      ref="pointLightRef"
+      v-light-helper
+      :color="0xff0000"
+      :intensity="100"
+      :position="[0, 1, 1]"
+    />
+    <TresSpotLight
+      ref="spotLightRef"
+      v-light-helper
+      :color="0x00ff00"
+      :intensity="10"
+      :position="[0, 1, 1]"
+    />
+
+    <TresHemisphereLight
+      v-light-helper
+      :color="0x0000ff"
+      :ground-color="0x00ffff"
+      :intensity="50"
+    />
+
+    <TresGridHelper :args="[10, 10]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
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 }) => {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 2, 5]" />
     <Stars
+      v-log
       :radius="options.radius"
       :depth="options.depth"
       :count="options.count"
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index 0a7caf9f..41a6f850 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -2,6 +2,6 @@
 
 <template>
   <Suspense>
-    <DirectivesDemo />
+    <ModelsDemo />
   </Suspense>
 </template>
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..3affe388
--- /dev/null
+++ b/src/core/directives/vLightHelper.ts
@@ -0,0 +1,22 @@
+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
+    }
+    const currentHelper = helpers[el.type]
+    el.parent.add(new currentHelper(el))
+  },
+}
+
+const helpers = {
+  DirectionalLight: DirectionalLightHelper,
+  PointLight: PointLightHelper,
+  SpotLight: SpotLightHelper,
+  HemisphereLight: HemisphereLightHelper,
+}