feat(cientos): move texture loading to the useEnvironment composable

packages/cientos/src/core/useEnvironment/component.ts

@@ -1,20 +1,9 @@
-/* import { useLoader } from '../../../../tres/src/core/useLoader' */
-import { useLoader } from '@tresjs/core'
-import { EnvironmentPresetsType } from './const'
-import {
-  CubeReflectionMapping,
-  CubeTexture,
-  CubeTextureLoader,
-  EquirectangularReflectionMapping,
-  LinearEncoding,
-  sRGBEncoding,
-  Texture,
-  TextureEncoding,
-} from 'three'
+import { EnvironmentOptions, EnvironmentPresetsType } from './const'
+import { CubeTexture, Texture, TextureEncoding } from 'three'
 import { defineComponent, PropType } from 'vue'
 
 import { useCientos } from '../useCientos'
-import { RGBELoader } from 'three-stdlib'
+import { useEnvironment } from '.'
 
 export const Environment = defineComponent({
   name: 'Environment',
@@ -39,33 +28,12 @@ export const Environment = defineComponent({
     preset: Object as PropType<EnvironmentPresetsType>,
   },
   async setup(props, { expose }) {
-    const { state } = useCientos()
     let texture: Texture | CubeTexture | null = null
-    const isCubeMap = Array.isArray(props.files)
 
     expose({ getTexture: () => texture })
-    const loader = isCubeMap ? CubeTextureLoader : RGBELoader
 
-    const result = await useLoader(loader, isCubeMap ? [props.files] : props.files, (loader: any) => {
-      /* if (props.path) loader.setPath(props.path) */
-      if (props.encoding) loader.encoding = props.encoding
-    })
+    texture = await useEnvironment(props as EnvironmentOptions)
 
-    texture = isCubeMap ? result[0] : result
-
-    if (texture) {
-      texture.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping
-      texture.encoding = props.encoding ?? isCubeMap ? sRGBEncoding : LinearEncoding
-    }
-
-    if (props.background && state.scene) {
-      state.scene.environment = texture
-      state.scene.background = texture
-
-      if (props.blur) {
-        state.scene.backgroundBlurriness = props.blur | 0
-      }
-    }
     return () => {
       texture
     }

packages/cientos/src/core/useEnvironment/const.ts

@@ -1,3 +1,14 @@
+import { TextureEncoding } from 'three'
+
+export type EnvironmentOptions = {
+  background?: boolean
+  blur?: number
+  files?: string | string[]
+  path?: string
+  preset?: EnvironmentPresetsType
+  encoding?: TextureEncoding
+}
+
 export const environmentPresets = {
   sunset: 'venice/venice_sunset_1k.hdr',
 }

packages/cientos/src/core/useEnvironment/index.ts

@@ -1,3 +1,50 @@
-export async function useEnvironment(): Promise<null> {
-  return null
+import { useLoader } from '@tresjs/core'
+import {
+  CubeReflectionMapping,
+  CubeTexture,
+  CubeTextureLoader,
+  EquirectangularReflectionMapping,
+  LinearEncoding,
+  sRGBEncoding,
+  Texture,
+} from 'three'
+import { RGBELoader } from 'three-stdlib'
+import { useCientos } from '../useCientos'
+import { EnvironmentOptions } from './const'
+
+export async function useEnvironment({
+  files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
+  blur = 0,
+  background = false,
+  path = undefined,
+  preset = undefined,
+  encoding = undefined,
+}: Partial<EnvironmentOptions>): Promise<Texture | CubeTexture> {
+  const { state } = useCientos()
+  const isCubeMap = Array.isArray(files)
+
+  const loader = isCubeMap ? CubeTextureLoader : RGBELoader
+
+  const result = await useLoader(loader, isCubeMap ? [files] : files, (loader: any) => {
+    /*  if (path) loader.setPath(path) */
+    if (encoding) loader.encoding = encoding
+  })
+
+  const texture: Texture | CubeTexture = isCubeMap ? result[0] : result
+
+  if (texture) {
+    texture.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping
+    texture.encoding = encoding ?? isCubeMap ? sRGBEncoding : LinearEncoding
+  }
+
+  if (background && state.scene) {
+    state.scene.environment = texture
+    state.scene.background = texture
+
+    if (blur) {
+      state.scene.backgroundBlurriness = blur | 0
+    }
+  }
+
+  return texture
 }