feat(cientos): 178 v-light-helper (#214)

* feat: add v-light-helper component

* docs: add docs for v-light-helper

* chore: remove the instance in unmounted

* chore: adding dispose method to helper

* docs: remove copy/paste mistake

* chore: add update method to helpers

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' },
         ],
       },
     ],

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}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]" />
+      <TresDirectionalLight
+        v-light-helper
+      />
+      <TresPointLight
+        v-light-helper
+      />
+      <TresSpotLight
+        v-light-helper
+      />
+
+      <TresHemisphereLight
+        v-light-helper
+      />
+  </TresCanvas>
+</template>
+```
+
+::: 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
+:::

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>

playground/src/components/DirectivesDemo.vue → 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"

playground/src/pages/index.vue

@@ -2,6 +2,6 @@
 
 <template>
   <Suspense>
-    <DirectivesDemo />
+    <ModelsDemo />
   </Suspense>
 </template>

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({

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'),
+  },
+]

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,
 }

src/core/directives/index.ts

@@ -1,3 +1,4 @@
 import { vLog } from './vLog'
+import { vLightHelper } from './vLightHelper'
 
-export { vLog }
+export { vLog, vLightHelper }

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,
+}