fix: add reactivity to stars component, rmv factor as props unnecessary

docs/guide/abstractions/stars.md

@@ -41,4 +41,3 @@ Notice that you can pass a texture as an alphaMap to personalize the star shape
 | **count**   | number of stars      | 5000    |
 | **depth** | depth of star's shape                         | 50    |
 | **radius**      | Radius of star's shape                            | 100    |
-| **factor**    | factor of randomness scale star                            | 4       |

playground/src/pages/StarsDemo.vue

@@ -1,23 +1,60 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
+import { shallowRef, reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Stars, MouseParallax } from '@tresjs/cientos'
+import { OrbitControls, Stars, MouseParallax, useTweakPane } from '@tresjs/cientos'
 import { SRGBColorSpace, NoToneMapping } from 'three'
 
 const gl = {
   clearColor: '#333',
-  alpha: true,
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
+const options = reactive({
+  size: 0.1,
+  sizeAttenuation: true,
+  count: 5000,
+  depth: 50,
+  radius: 100,
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(options, 'radius', {
+  step: 5,
+  min: 0,
+  max: 300,
+})
+pane.addInput(options, 'depth', {
+  step: 1,
+  min: 0,
+  max: 50,
+})
+pane.addInput(options, 'count', {
+  step: 100,
+  min: 1000,
+  max: 15000,
+})
+pane.addInput(options, 'size', {
+  step: 0.1,
+  min: 0,
+  max: 50,
+})
+pane.addInput(options, 'sizeAttenuation')
 
 const star = shallowRef<Stars>(null)
 </script>
 <template>
   <TresCanvas v-bind="gl" ref="canvas">
     <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <MouseParallax />
-    <Stars ref="star" :radius="1" />
+    <MouseParallax :factor="0.5" />
+    <Stars
+      ref="star"
+      :radius="options.radius"
+      :depth="options.depth"
+      :count="options.count"
+      :size="options.size"
+      :size-attenuation="options.sizeAttenuation"
+    />
     <TresGridHelper :args="[10, 10]" />
     <OrbitControls />
   </TresCanvas>

src/core/abstractions/Stars.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { shallowRef, computed, toRefs } from 'vue'
+import { shallowRef, computed, toRefs, watchEffect, ref } from 'vue'
 import { Vector3, Spherical } from 'three'
 
 export interface StarsProps {
@@ -59,14 +59,6 @@ export interface StarsProps {
    * @default 100
    */
   radius?: number
-  /**
-   * factor of randomness scale star.
-   *
-   * @type {number}
-   * @memberof StarsProps
-   * @default 4
-   */
-  factor?: number
   /**
    * texture of the stars.
    *
@@ -86,31 +78,41 @@ const props = withDefaults(defineProps<StarsProps>(), {
   count: 5000,
   depth: 50,
   radius: 100,
-  factor: 4,
 })
-//TODO: Make props reactive and use watchEffect to generate starts on change
 
-const { radius, depth, count, factor, size, sizeAttenuation, transparent, alphaMap, alphaTest } = toRefs(props)
+const position = ref()
+const scale = ref()
 
-let circle = radius.value + depth.value
-const increment = computed(() => depth.value / count.value)
+const { radius, depth, count, size, sizeAttenuation, transparent, alphaMap, alphaTest } = toRefs(props)
 
-const positionArray: number[] = []
-const scaleArray: number[] = Array.from({ length: count.value }, () => (0.5 + 0.5 * Math.random()) * factor.value)
+const setStars = () => {
+  let circle = radius.value + depth.value
+  const increment = computed(() => depth.value / count.value)
 
-const generateStars = (circle: number): Array<number> => {
-  const starArray = new Vector3()
-    .setFromSpherical(new Spherical(circle, Math.acos(1 - Math.random() * 2), Math.random() * 2 * Math.PI))
-    .toArray()
-  return starArray
-}
+  const positionArray: number[] = []
+  const scaleArray: number[] = Array.from(
+    { length: count.value },
+    () => (0.5 + 0.5 * Math.random()) * 4,
+  )
+
+  const generateStars = (circle: number): Array<number> => {
+    const starArray = new Vector3()
+      .setFromSpherical(new Spherical(circle, Math.acos(1 - Math.random() * 2), Math.random() * 2 * Math.PI))
+      .toArray()
+    return starArray
+  }
 
-for (let i = 0; i < count.value; i++) {
-  circle -= increment.value * Math.random()
-  positionArray.push(...generateStars(circle))
+  for (let i = 0; i < count.value; i++) {
+    circle -= increment.value * Math.random()
+    positionArray.push(...generateStars(circle))
+  }
+  position.value = new Float32Array(positionArray)
+  scale.value = new Float32Array(scaleArray)
 }
-const position = new Float32Array(positionArray)
-const scale = new Float32Array(scaleArray)
+
+watchEffect(() => {
+  setStars()
+})
 
 const starsRef = shallowRef()