feat(environment): enhance environment and background props

docs/guide/staging/environment.md

@@ -88,16 +88,6 @@ You can incorporate `Lightformer` into the environment just like a slot.
 </template>
 ```
 
-### Props for Lightformer
-
-Lightformer inherits from mesh, and its extension parameters include:
-| Prop | Description | Default |
-| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| `from` | 'circle' , 'ring' , 'rect' , any:other Mesh.The type of Lightformer | `rect` |
-| `intensity` | number : the intensity of the light. | 1 |
-| `color` | the color of the light. | `0xffffff` |
-| `args` | the arguments of the Geometry | When using other geometries, set the corresponding arguments. |
-
 ## Props
 
 | Prop         | Description                                                                 | Default                                                                          |
@@ -112,3 +102,17 @@ Lightformer inherits from mesh, and its extension parameters include:
 | `near`       | The near of the CubeCamera.                                                 | 1                                                                                |
 | `far`        | The far of the CubeCamera.                                                  | 1000                                                                             |
 | `frames`     | The frames of the cubeCamera.update.                                        | Infinity                                                                         |
+| `backgroundIntensity`  | Intensity of the background. | 1 |
+| `environmentIntensity`  | Intensity of the environment. | 1 |
+| `backgroundRotation` | Rotation of the background. | [0, 0, 0] |
+| `environmentRotation` | Rotation of the environment. | [0, 0, 0] |
+
+### Props for Lightformer
+
+Lightformer inherits from mesh, and its extension parameters include:
+| Prop | Description | Default |
+| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `from` | 'circle' , 'ring' , 'rect' , any:other Mesh.The type of Lightformer | `rect` |
+| `intensity` | number : the intensity of the light. | 1 |
+| `color` | the color of the light. | `0xffffff` |
+| `args` | the arguments of the Geometry | When using other geometries, set the corresponding arguments. |

docs/guide/staging/use-environment.md

@@ -62,3 +62,7 @@ const texture = await useEnvironment({
 | **background** | `boolean`  | `false`                                                                          | If `true` the texture will be used as the scene background.                 |
 | **blur**       | `number`   | `0`                                                                              | Blur factor between 0 and 1. (only works with three 0.146 and up)           |
 | **preset**     | `string`   | `undefined`                                                                      | Preset environment map.                                                     |
+| **backgroundIntensity** | `number` | `1` | Intensity of the background. |
+| **environmentIntensity** | `number` | `1` | Intensity of the environment. |
+| **backgroundRotation** | `VectorFlexibleParams` | `[0, 0, 0]` | Rotation of the background. |
+| **environmentRotation** | `VectorFlexibleParams` | `[0, 0, 0]` | Rotation of the environment. |

playground/vue/src/pages/staging/environment/EnvironmentDemo.vue

@@ -4,7 +4,7 @@ import { Environment, Lightformer, OrbitControls, Sphere, useProgress } from '@t
 import { TresCanvas } from '@tresjs/core'
 import Lightformers from './Lightformers.vue'
 import { TresLeches, useControls } from '@tresjs/leches'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace, Vector3 } from 'three'
 import '@tresjs/leches/styles'
 
 /* const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg'] */
@@ -18,7 +18,7 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const { background, blur, preset } = useControls({
+const { background, blur, preset, backgroundIntensity, environmentIntensity, backgroundRotation, environmentRotation } = useControls({
   background: true,
   blur: {
     value: 0,
@@ -43,6 +43,24 @@ const { background, blur, preset } = useControls({
     ],
     value: 'sunset',
   },
+  backgroundIntensity: {
+    value: 1,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  environmentIntensity: {
+    value: 1,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  backgroundRotation: {
+    value: new Vector3(0, 0, 0),
+  },
+  environmentRotation: {
+    value: new Vector3(0, 0, 0),
+  },
 })
 
 const environmentRef = ref(null)
@@ -91,6 +109,10 @@ const { progress, hasFinishLoading } = await useProgress()
         :blur="blur.value"
         :preset="preset.value"
         :frames="Infinity"
+        :background-intensity="backgroundIntensity.value"
+        :environment-intensity="environmentIntensity.value"
+        :background-rotation="[backgroundRotation.value.x, backgroundRotation.value.y, backgroundRotation.value.z]"
+        :environment-rotation="[environmentRotation.value.x, environmentRotation.value.y, environmentRotation.value.z]"
       >
         <Lightformer
           :intensity="0.75"

src/core/staging/useEnvironment/component.vue

@@ -18,6 +18,8 @@ const props = withDefaults(defineProps<EnvironmentOptions>(), {
   near: 1,
   far: 1000,
   frames: Number.POSITIVE_INFINITY,
+  backgroundIntensity: 1,
+  environmentIntensity: 1,
 })
 
 const texture: Ref<Texture | CubeTexture | null> = ref(null)

src/core/staging/useEnvironment/const.ts

@@ -1,3 +1,5 @@
+import type { VectorFlexibleParams } from '@tresjs/core'
+
 export interface EnvironmentOptions {
   /**
    * If true, the environment will be set as the scene's background.
@@ -61,6 +63,34 @@ export interface EnvironmentOptions {
    * @default Infinity
    */
   frames?: number
+  /**
+   * The intensity of the background.
+   *
+   * @type {number}
+   * @default 1
+   */
+  backgroundIntensity?: number
+  /**
+   * The rotation of the background.
+   *
+   * @type {VectorFlexibleParams}
+   * @default [0, 0, 0]
+   */
+  backgroundRotation?: VectorFlexibleParams
+  /**
+   * The intensity of the environment.
+   *
+   * @type {number}
+   * @default 1
+   */
+  environmentIntensity?: number
+  /**
+   * The rotation of the environment.
+   *
+   * @type {VectorFlexibleParams}
+   * @default [0, 0, 0]
+   */
+  environmentRotation?: VectorFlexibleParams
 }
 
 export const environmentPresets = {

src/core/staging/useEnvironment/index.ts

@@ -3,6 +3,8 @@ import {
   CubeReflectionMapping,
   CubeTextureLoader,
   EquirectangularReflectionMapping,
+  Euler,
+  Vector3,
 } from 'three'
 import { RGBELoader } from 'three-stdlib'
 import { computed, ref, toRefs, unref, watch } from 'vue'
@@ -28,7 +30,11 @@ const PRESET_ROOT = 'https://raw.githubusercontent.com/Tresjs/assets/main/textur
  *   background = false,
  *   path = undefined,
  *   preset = undefined,
- *   colorSpace = undefined,
+ *   colorSpace = 'srgb',
+ *   backgroundIntensity = 1,
+ *   environmentIntensity = 1,
+ *   backgroundRotation = [0, 0, 0],
+ *   environmentRotation = [0, 0, 0],
  * @param {Ref<WebGLCubeRenderTarget | null>} fbo - The framebuffer object
  * @return {Promise<Ref<Texture | CubeTexture | null>>} The loaded texture
  */
@@ -44,6 +50,10 @@ export async function useEnvironment(
     files = ref([]),
     path = ref(''),
     background,
+    backgroundIntensity = ref(1),
+    environmentIntensity = ref(1),
+    backgroundRotation = ref([0, 0, 0]),
+    environmentRotation = ref([0, 0, 0]),
   } = toRefs(options)
 
   watch(options, () => {
@@ -105,6 +115,67 @@ export async function useEnvironment(
     immediate: true,
   })
 
+  watch(() => backgroundIntensity?.value, (value) => {
+    if (scene.value && value) {
+      scene.value.backgroundIntensity = value
+    }
+  }, {
+    immediate: true,
+  })
+
+  watch(() => environmentIntensity?.value, (value) => {
+    if (scene.value && value) {
+      scene.value.environmentIntensity = value
+    }
+  }, {
+    immediate: true,
+  })
+
+  watch(() => backgroundRotation?.value, (value) => {
+    if (scene.value && value) {
+      // TODO: would be nice to abstract this to a function on @tresjs/core
+      if (value instanceof Euler) {
+        scene.value.backgroundRotation = value
+      }
+      else if (Array.isArray(value)) {
+        scene.value.backgroundRotation = new Euler(value[0], value[1], value[2])
+      }
+      else if (typeof value === 'number') {
+        scene.value.backgroundRotation = new Euler(value, value, value)
+      }
+      else if (value instanceof Vector3) {
+        scene.value.backgroundRotation = new Euler(value.x, value.y, value.z)
+      }
+      else if (typeof value === 'object' && 'x' in value && 'y' in value && 'z' in value) {
+        scene.value.backgroundRotation = new Euler(value.x, value.y, value.z)
+      }
+    }
+  }, {
+    immediate: true,
+  })
+
+  watch(() => environmentRotation?.value, (value) => {
+    if (scene.value && value) {
+      if (value instanceof Euler) {
+        scene.value.environmentRotation = value
+      }
+      else if (Array.isArray(value)) {
+        scene.value.environmentRotation = new Euler(value[0], value[1], value[2])
+      }
+      else if (typeof value === 'number') {
+        scene.value.environmentRotation = new Euler(value, value, value)
+      }
+      else if (value instanceof Vector3) {
+        scene.value.environmentRotation = new Euler(value.x, value.y, value.z)
+      }
+      else if (typeof value === 'object' && 'x' in value && 'y' in value && 'z' in value) {
+        scene.value.environmentRotation = new Euler(value.x, value.y, value.z)
+      }
+    }
+  }, {
+    immediate: true,
+  })
+
   watch(() => preset?.value, async (value) => {
     if (value && value in environmentPresets) {
       const _path = PRESET_ROOT