feat(cientos): environment preset support

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

@@ -2,7 +2,6 @@ import { EnvironmentOptions, EnvironmentPresetsType } from './const'
 import { CubeTexture, Texture, TextureEncoding } from 'three'
 import { defineComponent, PropType } from 'vue'
 
-import { useCientos } from '../useCientos'
 import { useEnvironment } from '.'
 
 export const Environment = defineComponent({
@@ -21,10 +20,7 @@ export const Environment = defineComponent({
       required: true,
     },
     encoding: Object as PropType<TextureEncoding>,
-    path: {
-      type: String,
-      default: '/',
-    },
+    path: String,
     preset: Object as PropType<EnvironmentPresetsType>,
   },
   async setup(props, { expose }) {

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

@@ -10,7 +10,7 @@ import {
 } from 'three'
 import { RGBELoader } from 'three-stdlib'
 import { useCientos } from '../useCientos'
-import { EnvironmentOptions } from './const'
+import { EnvironmentOptions, environmentPresets } from './const'
 
 export async function useEnvironment({
   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
@@ -21,12 +21,20 @@ export async function useEnvironment({
   encoding = undefined,
 }: Partial<EnvironmentOptions>): Promise<Texture | CubeTexture> {
   const { state } = useCientos()
+
+  if (preset) {
+    if (!(preset in environmentPresets))
+      throw new Error('Preset must be one of: ' + Object.keys(environmentPresets).join(', '))
+    files = environmentPresets[preset]
+    path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/hdr/'
+  }
+
   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 (path) loader.setPath(path)
     if (encoding) loader.encoding = encoding
   })
 

packages/tres/src/components/TheEnvironment.vue

@@ -31,14 +31,16 @@ const sphereRef = ref()
 
 const { pane } = useTweakPane()
 
-const environmentFiles = [
+/* const environmentFiles = [
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/px.jpg',
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nx.jpg',
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/py.jpg',
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/ny.jpg',
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/pz.jpg',
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nz.jpg',
-]
+] */
+
+const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']
 
 let envMap = null
 
@@ -109,7 +111,13 @@ pane
     <TresPerspectiveCamera :position="[8, 8, 8]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
     <OrbitControls make-default />
     <TresScene>
-      <Environment ref="environmentTexture" background :files="environmentFiles" />
+      <!-- <Environment
+        ref="environmentTexture"
+        background
+        :files="environmentFiles"
+        :path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
+      /> -->
+      <Environment ref="environmentTexture" background preset="sunset" />
       <TresAmbientLight :intensity="0.5" />
 
       <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>