refactor: update texture loading in Ocean and Precipitation components

- Replaced the use of destructured state from `useTexture` with direct texture loading using `TextureLoader` in the `Ocean.vue` component for improved clarity and performance.
- Updated the `watchEffect` in `Precipitation.vue` to use a more descriptive variable name for the texture state, enhancing code readability.
- Ensured that texture loading logic is consistent across components, aligning with best practices for resource management.

Author: alvarosabu

src/core/staging/Ocean.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useLoop, useTresContext } from '@tresjs/core'
 import { useTexture } from '../loaders/useTexture'
-import { FrontSide, RepeatWrapping, Vector3 } from 'three'
+import { FrontSide, RepeatWrapping, TextureLoader, Vector3 } from 'three'
 import { Water } from 'three-stdlib'
 import { nextTick, onMounted, shallowRef, toRefs } from 'vue'
 import type { TresColor, TresVector3 } from '@tresjs/core'
@@ -147,16 +147,18 @@ onMounted(async () => {
   }
 })
 
-const { state: normalMap } = useTexture(waterNormals.value)
+const normalMap = new TextureLoader().load(waterNormals.value)
 
 normalMap.wrapS = normalMap.wrapT = RepeatWrapping
 
 const { onBeforeRender } = useLoop()
 
 onBeforeRender(({ delta /* invalidate */ }) => {
-  waterRef.value.material.uniforms.time.value += delta
-  // TODO: comment this until invalidate is back in the loop callback on v5
-  // invalidate()
+  if (waterRef.value) {
+    waterRef.value.material.uniforms.time.value += delta
+    // TODO: comment this until invalidate is back in the loop callback on v5
+    // invalidate()
+  }
 })
 </script>
 

src/core/staging/Precipitation.vue

@@ -179,16 +179,16 @@ const mapTexture = shallowRef<Texture | null>(null)
 
 watchEffect(async () => {
   if (typeof alphaMapUrl.value === 'string') {
-    const { state: resolvedTexture } = useTexture({ alphaMap: alphaMapUrl.value })
-    alphaMapTexture.value = resolvedTexture.value
+    const { state: alphaMap } = useTexture(alphaMapUrl.value)
+    alphaMapTexture.value = alphaMap.value
   }
   else {
     alphaMapTexture.value = alphaMapUrl.value ?? null
   }
 
   if (typeof mapUrl.value === 'string') {
-    const { state: resolvedTexture } = useTexture({ map: mapUrl.value })
-    mapTexture.value = resolvedTexture.value
+    const { state: map } = useTexture(mapUrl.value)
+    mapTexture.value = map.value
   }
   else {
     mapTexture.value = mapUrl.value ?? null