feat(environment): enhance environment and background props #590
Conversation
- Added new properties for background and environment intensity, as well as their rotations, to improve scene customization. - Updated `useEnvironment` and related components to support the new properties, ensuring better control over lighting and background effects. - Refactored `EnvironmentDemo` to utilize the new properties, enhancing the demo's interactivity and visual fidelity. - Improved type definitions in `EnvironmentOptions` to include the new parameters for better TypeScript support.
✅ Deploy Preview for cientos-tresjs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
commit: |
| }) | ||
|
|
||
| watch(() => environmentRotation?.value, (value) => { | ||
| if (scene.value && value) { |
There was a problem hiding this comment.
value can be a number. 0 is a valid value, but will cause this predicate to be false.
| scene.value.environmentRotation = new Euler(value, value, value) | ||
| } | ||
| else if (value instanceof Vector3) { | ||
| scene.value.environmentRotation = new Euler(value.x, value.y, value.z) |
There was a problem hiding this comment.
(non-blocking)
This branch could be removed. The next predicate will match Vector3 and set the value accordingly.
| scene.value.backgroundRotation = new Euler(value, value, value) | ||
| } | ||
| else if (value instanceof Vector3) { | ||
| scene.value.backgroundRotation = new Euler(value.x, value.y, value.z) |
There was a problem hiding this comment.
(non-blocking)
This branch could be removed. The next predicate will match Vector3 and set the value accordingly.
| }) | ||
|
|
||
| watch(() => backgroundRotation?.value, (value) => { | ||
| if (scene.value && value) { |
There was a problem hiding this comment.
value can be a number. 0 is a valid value, but will cause this predicate to be false.
| @@ -105,6 +115,67 @@ export async function useEnvironment( | |||
| immediate: true, | |||
| }) | |||
|
|
|||
| watch(() => backgroundIntensity?.value, (value) => { | |||
| if (scene.value && value) { | |||
There was a problem hiding this comment.
0 will make this predicate false.
| immediate: true, | ||
| }) | ||
|
|
||
| watch(() => environmentIntensity?.value, (value) => { |
There was a problem hiding this comment.
0 will make this predicate false.
| backgroundIntensity = ref(1), | ||
| environmentIntensity = ref(1), | ||
| backgroundRotation = ref([0, 0, 0]), | ||
| environmentRotation = ref([0, 0, 0]), |
There was a problem hiding this comment.
In the playground, changing environmentRotation doesn't seem to have an effect.
I was expecting that changing environmentRotation would rotate the material map similar to this THREE demo, when backgroundRotationX and syncMaterial are checked (though not in sync with the background rotation).
useEnvironmentand related components to support the new properties, ensuring better control over lighting and background effects.EnvironmentDemoto utilize the new properties, enhancing the demo's interactivity and visual fidelity.EnvironmentOptionsto include the new parameters for better TypeScript support.