fix: precipitation-area issue, rmv log mouseparallax, add rule lint

.eslintrc.cjs

@@ -18,6 +18,7 @@ module.exports = {
   ignorePatterns: ['**/*.test.ts', 'packages/**/dist', 'package.json'],
   rules: {
     'arrow-parens': ['error', 'as-needed'],
+    'no-console': 'error',
     'comma-dangle': 'off',
     'space-before-function-paren': 'off',
     'max-len': [1, { code: 120 }],

playground/.eslintrc-auto-import.json

@@ -57,7 +57,6 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "toValue": true
+    "watchSyncEffect": true
   }
-}
+}

playground/auto-imports.d.ts

@@ -45,7 +45,6 @@ declare global {
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']

playground/components.d.ts

@@ -23,7 +23,6 @@ declare module '@vue/runtime-core' {
     TheSmoke: typeof import('./src/components/TheSmoke.vue')['default']
     TheStars: typeof import('./src/components/TheStars.vue')['default']
     TheText3D: typeof import('./src/components/TheText3D.vue')['default']
-    TransformControls: typeof import('./src/components/TransformControls.vue')['default']
     TransformControlsDemo: typeof import('./src/components/TransformControlsDemo.vue')['default']
     WobbleMaterial: typeof import('./src/components/WobbleMaterial.vue')['default']
   }

playground/src/components/PrecipitationDemo.vue

@@ -18,7 +18,7 @@ const options = reactive({
   speed: 1,
   randomness: 0,
   count: 1000,
-  size: 1,
+  size: 0.1,
   areaX: 25,
   areaY: 25,
   areaZ: 25,
@@ -66,12 +66,13 @@ pane.addInput(options, 'areaZ', {
     <TresPerspectiveCamera :position="[0, 2, 15]" />
     <Precipitation
       ref="precipitationRef"
-      :speed="options.speed"
-      :count="options.count"
       :area="[options.areaX, options.areaY, options.areaZ]"
+      />
+      <!-- :speed="options.speed"
+      :count="options.count"
       :randomness="options.randomness"
-      :size="options.size"
-    />
+      :size="options.size" -->
+      <!--  -->
     <TresGridHelper :args="[10, 10]" />
     <OrbitControls />
   </TresCanvas>

playground/src/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <TransformControlsDemo />
+    <PrecipitationDemo />
   </Suspense>
 </template>

src/core/abstractions/Precipitation.vue

@@ -130,18 +130,18 @@ const {
   sizeAttenuation = true,
 } = defineProps<PrecipitationProps>()
 
-const precipitationGeoRef = shallowRef()
-
-let position: [] | Float32Array = []
+const geometryRef = shallowRef()
+let positionArray: [] | Float32Array = []
 let velocityArray: [] | Float32Array = []
 const setPosition = () => {
-  position = new Float32Array(count * 3)
+  positionArray = new Float32Array(count * 3)
   for (let i = 0; i < count; i++) {
     const i3 = i * 3
-    position[i3] = (Math.random() - 0.5) * area[0]
-    position[i3 + 1] = (Math.random() - 0.5) * area[1]
-    position[i3 + 2] = (Math.random() - 0.5) * area[2]
+    positionArray[i3] = (Math.random() - 0.5) * area[0]
+    positionArray[i3 + 1] = (Math.random() - 0.5) * area[1]
+    positionArray[i3 + 2] = (Math.random() - 0.5) * area[2]
   }
+
 }
 const setSpeed = () => {
   velocityArray = new Float32Array(count * 2)
@@ -156,17 +156,15 @@ setPosition()
 watchEffect(() => {
   setSpeed()
   setPosition()
-  if (precipitationGeoRef.value?.attributes.position) {
-    precipitationGeoRef.value.attributes.position = position
-  }
 })
 
+
 const { onLoop } = useRenderLoop()
 
 onLoop(() => {
-  if (precipitationGeoRef.value) {
-    const positionArray = precipitationGeoRef.value.attributes.position.array
-    for (let i = 0; i < precipitationGeoRef.value.attributes.position.count; i++) {
+  if (geometryRef.value?.attributes.position.array && geometryRef.value?.attributes.position.count) {
+    const positionArray = geometryRef.value.attributes.position.array
+    for (let i = 0; i < geometryRef.value.attributes.position.count; i++) {
       const velocityX = velocityArray[i * 2]
       const velocityY = velocityArray[i * 2 + 1]
 
@@ -178,7 +176,7 @@ onLoop(() => {
       if (positionArray[i * 3 + 1] <= -area[1] / 2 || positionArray[i * 3 + 1] >= area[1] / 2)
         positionArray[i * 3 + 1] = positionArray[i * 3 + 1] * -1
     }
-    precipitationGeoRef.value.attributes.position.needsUpdate = true
+    geometryRef.value.attributes.position.needsUpdate = true
   }
 })
 </script>
@@ -196,6 +194,6 @@ onLoop(() => {
       :transparent="transparent"
       :size-attenuation="sizeAttenuation"
     />
-    <TresBufferGeometry ref="precipitationGeoRef" :position="[position, 3]" :velocity="[velocityArray]" />
+    <TresBufferGeometry ref="geometryRef" :position="[positionArray, 3]" :velocity="[velocityArray]" />
   </TresPoints>
 </template>

src/core/abstractions/useParallax/index.ts

@@ -12,7 +12,6 @@ export function useMouseParallax(disabled = false, factor = 2.5, ease = true, ca
 
   const { onLoop } = useRenderLoop()
   const cameraGroup = new Group()
-  console.log('jaime ~ useParallax ~ ease:', ease)
   const easeFactor = ease ? 2.5 : 30
 
   const cursorX = computed(() => (x.value / width.value - 0.5) * factor)