docs: add demo to docs

docs/.vitepress/theme/components/ReflectorDemo.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import {
+  OrbitControls,
+  MeshWobbleMaterial,
+  Reflector,
+  Stars,
+} from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas clear-color="#111">
+    <TresPerspectiveCamera
+      :position="[3, 2, 6]"
+      :look-at="[0, 0, 0]"
+    />
+    <Stars />
+    <TresMesh>
+      <TresTorusGeometry />
+      <MeshWobbleMaterial
+        color="orange"
+        :speed="1"
+        :factor="2"
+      />
+    </TresMesh>
+    <Reflector
+      :rotation="[-Math.PI * 0.5, 0, 0]"
+      :position="[0, -2, 0]"
+      color="#f7f7f7"
+    >
+      <TresCircleGeometry :args="[10, 32]" />
+    </Reflector>
+    <TresAmbientLight :intensity="1" />
+    <OrbitControls />
+  </TresCanvas>
+</template>

docs/guide/abstractions/reflector.md

@@ -1,14 +1,15 @@
 # Reflector
 
+<DocsDemo>
+  <ReflectorDemo />
+</DocsDemo>
+
 The `cientos` package provides an abstraction of the [Reflector class](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js), which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from `Mesh` so all the default props can be passed as well:
 
 ## Usage
 
-```vue{2}
-<Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position-y="-2" color="#F7F7F7">
-  <TresCircleGeometry :args="[10, 10]" />
-</Reflector>
-```
+<<< @/.vitepress/theme/components/ReflectorDemo.vue{6,26-32}
+
 ## Props
 
 | Prop              | Description                                          | Default                   |