docs(lights): clean up demo

* move directives from lights demo to misc/directives
* add SpotLight
* add preview image
* fit scene in default camera view

playground/vue/src/pages/misc/directives/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
+import type { TresObject } from '@tresjs/core'
+import { TresCanvas, vDistanceTo, vLog } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import DirectiveSubComponent from './DirectiveSubComponent.vue'
 
@@ -12,14 +13,25 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
+
+const planeRef: Ref<TresObject | null> = ref(null)
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <TresPerspectiveCamera v-distance-to="planeRef" :position="[3, 3, 3]" />
     <OrbitControls />
     <TresGridHelper />
     <DirectiveSubComponent />
     <TresAmbientLight :intensity="1" />
+    <TresMesh
+      ref="planeRef"
+      v-log:material
+      :rotation="[-Math.PI / 2, 0, 0]"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial />
+    </TresMesh>
   </TresCanvas>
 </template>