feat: on-demand Environment

src/core/staging/useEnvironment/component.vue

@@ -29,10 +29,7 @@ const fbo = ref(null as null | WebGLCubeRenderTarget)
 let cubeCamera = null as null | CubeCamera
 
 const envSence = ref<EnvSence | null>(null)
-onUnmounted(() => {
-  envSence.value?.destructor()
-  fbo.value?.dispose()
-})
+
 const { onBeforeRender } = useLoop()
 let count = 1
 onBeforeRender(() => {
@@ -83,6 +80,11 @@ watch(useSlots().default, (value) => {
   setTextureEnvAndBG()
 }, { immediate: true, deep: true })
 texture.value = useEnvironmentTexture
+
+onUnmounted(() => {
+  envSence.value?.destructor()
+  fbo.value?.dispose()
+})
 </script>
 
 <template>

src/core/staging/useEnvironment/index.ts

@@ -12,6 +12,7 @@ import {
 import { RGBELoader } from 'three-stdlib'
 import type { Ref } from 'vue'
 import { computed, ref, toRefs, unref, watch } from 'vue'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 import type { EnvironmentOptions } from './const'
 import { environmentPresets } from './const'
 
@@ -45,6 +46,8 @@ export async function useEnvironment(
     background,
   } = toRefs(options)
 
+  const { invalidateOnDemand } = useOnDemandInvalidation(options)
+
   const texture: Ref<Texture | CubeTexture | undefined> = ref()
   const isCubeMap = computed(() => Array.isArray((files as Ref<string[]>).value))
   const loader = computed(() => isCubeMap.value ? CubeTextureLoader : RGBELoader)
@@ -122,6 +125,7 @@ export async function useEnvironment(
         texture.value = result.value
         texture.value.mapping = EquirectangularReflectionMapping
       }
+      invalidateOnDemand()
     }
     else if (value && !(value in environmentPresets)) {
       throw new Error(`Preset must be one of: ${Object.keys(environmentPresets).join(', ')}`)