Skip to content
This repository was archived by the owner on Feb 1, 2026. It is now read-only.

Commit e2f380e

Browse files
alvarosabualvarosabu
committed
Merge branch 'next' into feature/616-adapt-code-to-core-ctx-renderer-state-breaking-change
2 parents cc00a91 + d765798 commit e2f380e

File tree

9 files changed

+1488
-1093
lines changed

9 files changed

+1488
-1093
lines changed

‎CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# Changelog
22

3+
## [4.3.1](https://github.com/Tresjs/cientos/compare/4.3.0...4.3.1) (2025-05-16)
4+
5+
### Bug Fixes
6+
7+
* **deps:** update @tresjs/core and @types/three to latest versions ([#619](https://github.com/Tresjs/cientos/issues/619)) ([9a94785](https://github.com/Tresjs/cientos/commit/9a94785f8242b10df3a1c579e54f04814716552a))
8+
9+
## [4.3.0](https://github.com/Tresjs/cientos/compare/4.2.0...4.3.0) (2025-03-25)
10+
11+
### Features
12+
13+
* **environment:** enhance environment and background props ([#590](https://github.com/Tresjs/cientos/issues/590)) ([7e96136](https://github.com/Tresjs/cientos/commit/7e96136ad4f9da046ad14eb31a69a7ff67649010))
14+
315
## [4.2.0](https://github.com/Tresjs/cientos/compare/4.1.1...4.2.0) (2025-03-07)
416

517
### Features

‎docs/guide/staging/environment.md‎

Lines changed: 62 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<EnvironmentDemo />
55
</DocsDemo>
66

7-
Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`,
7+
Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`.
88

99
It uses the composable [useEnvironment](/guide/staging/use-environment) under the hood to load the cubemap.
1010

@@ -20,7 +20,7 @@ It uses the composable [useEnvironment](/guide/staging/use-environment) under th
2020
'/ny.jpg',
2121
'/pz.jpg',
2222
'/nz.jpg'
23-
]"
23+
]"
2424
/>
2525
</Suspense>
2626
```
@@ -37,7 +37,7 @@ You can also pass the `.hdr` file directly:
3737

3838
## Texture reference
3939

40-
You can access the model reference by pasing a `ref` to the `<Environment />` prop and then using the method `getTexture()` to get the object.
40+
You can access the model reference by passing a `ref` to the `<Environment />` prop and then using the method `getTexture()` to get the object.
4141

4242
```vue{4,6,9,14,17}
4343
<script setup lang="ts">
@@ -84,27 +84,67 @@ import { Enviroment, LightFormer } from '@tres/cientos'
8484
</template>
8585
```
8686

87-
### Props for Lightformer
87+
## Environment Rotation
8888

89-
Lightformer inherits from mesh, and its extension parameters include:
90-
| Prop | Description | Default |
91-
| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
92-
| `from` | 'circle' , 'ring' , 'rect' , any:other Mesh.The type of Lightformer | `rect` |
93-
| `intensity` | number : the intensity of the light. | 1 |
94-
| `color` | the color of the light. | `0xffffff` |
95-
| `args` | the arguments of the Geometry | When using other geometries, set the corresponding arguments. |
89+
The environment component supports both background and environment rotation. You can control them independently or sync them together:
90+
91+
```vue
92+
<template>
93+
<Environment
94+
preset="sunset"
95+
:background="true"
96+
:background-rotation="[0, Math.PI / 2, 0]"
97+
:environment-rotation="[0, Math.PI / 4, 0]"
98+
/>
99+
</template>
100+
```
101+
102+
### Syncing Rotations
103+
104+
You can sync the environment rotation with the background rotation using the `syncMaterials` prop:
105+
106+
```vue
107+
<template>
108+
<Environment
109+
preset="sunset"
110+
:background="true"
111+
:sync-materials="true"
112+
:background-rotation="[0, Math.PI / 2, 0]"
113+
/>
114+
</template>
115+
```
116+
117+
When `syncMaterials` is enabled:
118+
- The environment rotation will automatically match the background rotation
119+
- All materials in the scene will update to reflect the new rotation
120+
- This ensures visual consistency between the background and environment reflections
96121

97122
## Props
98123

99-
| Prop | Description | Default |
124+
| Prop | Description | Default |
100125
| :----------- | :-------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
101-
| `files` | Array of 6 urls to images, one for each side of the CubeTexture. or and HDR | `undefined` |
102-
| `path` | Path to the environment map files. | `undefined` |
103-
| `encoding` | Encoding of the environment map. | `SRGBColorSpace` for an array of files and `LinearEncoding` for a single texture |
104-
| `background` | If `true`, the environment map will be used as the scene background. | `false` |
105-
| `blur` | Blur factor between 0 and 1. (only works with three 0.146 and up) | 0 |
106-
| `preset` | Preset environment map. | `undefined` |
107-
| `resolution` | The resolution of the WebGLCubeRenderTarget. | 256 |
108-
| `near` | The near of the CubeCamera. | 1 |
109-
| `far` | The far of the CubeCamera. | 1000 |
110-
| `frames` | The frames of the cubeCamera.update. | Infinity |
126+
| `files` | Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file | `undefined` |
127+
| `path` | Path to the environment map files | `undefined` |
128+
| `encoding` | Encoding of the environment map | `SRGBColorSpace` for array files, `LinearEncoding` for single texture |
129+
| `background` | If `true`, the environment map will be used as the scene background | `false` |
130+
| `blur` | Blur factor between 0 and 1 (only works with three 0.146 and up) | 0 |
131+
| `preset` | Preset environment map | `undefined` |
132+
| `resolution` | The resolution of the WebGLCubeRenderTarget | 256 |
133+
| `near` | The near of the CubeCamera | 1 |
134+
| `far` | The far of the CubeCamera | 1000 |
135+
| `frames` | The frames of the cubeCamera.update | Infinity |
136+
| `backgroundIntensity` | Intensity of the background | 1 |
137+
| `environmentIntensity` | Intensity of the environment | 1 |
138+
| `backgroundRotation` | Rotation of the background (in radians) | [0, 0, 0] |
139+
| `environmentRotation` | Rotation of the environment (in radians) | [0, 0, 0] |
140+
| `syncMaterials` | If true, environment rotation will sync with background rotation | false |
141+
142+
### Props for Lightformer
143+
144+
Lightformer inherits from mesh, and its extension parameters include:
145+
| Prop | Description | Default |
146+
| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
147+
| `from` | 'circle', 'ring', 'rect', or any other Mesh type | `rect` |
148+
| `intensity` | The intensity of the light | 1 |
149+
| `color` | The color of the light | `0xffffff` |
150+
| `args` | The arguments of the Geometry | When using other geometries, set the corresponding arguments |

‎docs/guide/staging/use-environment.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,7 @@ const texture = await useEnvironment({
6262
| **background** | `boolean` | `false` | If `true` the texture will be used as the scene background. |
6363
| **blur** | `number` | `0` | Blur factor between 0 and 1. (only works with three 0.146 and up) |
6464
| **preset** | `string` | `undefined` | Preset environment map. |
65+
| **backgroundIntensity** | `number` | `1` | Intensity of the background. |
66+
| **environmentIntensity** | `number` | `1` | Intensity of the environment. |
67+
| **backgroundRotation** | `VectorFlexibleParams` | `[0, 0, 0]` | Rotation of the background. |
68+
| **environmentRotation** | `VectorFlexibleParams` | `[0, 0, 0]` | Rotation of the environment. |

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "@tresjs/cientos",
33
"type": "module",
4-
"version": "4.2.0",
5-
"packageManager": "pnpm@9.15.0",
4+
"version": "4.3.1",
5+
"packageManager": "pnpm@10.11.0",
66
"description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
77
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
88
"license": "MIT",

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Environment, Lightformer, OrbitControls, Sphere, useProgress } from '@t
44
import { TresCanvas } from '@tresjs/core'
55
import Lightformers from './Lightformers.vue'
66
import { TresLeches, useControls } from '@tresjs/leches'
7-
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
7+
import { BasicShadowMap, NoToneMapping, SRGBColorSpace, Vector3 } from 'three'
88
import '@tresjs/leches/styles'
99
1010
/* const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg'] */
@@ -18,7 +18,7 @@ const gl = {
1818
toneMapping: NoToneMapping,
1919
}
2020
21-
const { background, blur, preset } = useControls({
21+
const { background, blur, preset, backgroundIntensity, environmentIntensity, backgroundRotation, environmentRotation, syncMaterials } = useControls({
2222
background: true,
2323
blur: {
2424
value: 0,
@@ -43,6 +43,25 @@ const { background, blur, preset } = useControls({
4343
],
4444
value: 'sunset',
4545
},
46+
backgroundIntensity: {
47+
value: 1,
48+
min: 0,
49+
max: 1,
50+
step: 0.1,
51+
},
52+
environmentIntensity: {
53+
value: 1,
54+
min: 0,
55+
max: 1,
56+
step: 0.1,
57+
},
58+
backgroundRotation: {
59+
value: new Vector3(0, 0, 0),
60+
},
61+
environmentRotation: {
62+
value: new Vector3(0, 0, 0),
63+
},
64+
syncMaterials: false,
4665
})
4766
4867
const environmentRef = ref(null)
@@ -91,6 +110,11 @@ const { progress, hasFinishLoading } = await useProgress()
91110
:blur="blur.value"
92111
:preset="preset.value"
93112
:frames="Infinity"
113+
:background-intensity="backgroundIntensity.value"
114+
:environment-intensity="environmentIntensity.value"
115+
:background-rotation="[backgroundRotation.value.x, backgroundRotation.value.y, backgroundRotation.value.z]"
116+
:environment-rotation="[environmentRotation.value.x, environmentRotation.value.y, environmentRotation.value.z]"
117+
:sync-materials="syncMaterials.value"
94118
>
95119
<Lightformer
96120
:intensity="0.75"

0 commit comments

Comments
 (0)