diff --git a/playground/src/pages/staging/EnvironmentDemo.vue b/playground/src/pages/staging/EnvironmentDemo.vue
index 97813cb8..eec9456d 100644
--- a/playground/src/pages/staging/EnvironmentDemo.vue
+++ b/playground/src/pages/staging/EnvironmentDemo.vue
@@ -42,7 +42,7 @@ const { background, blur, preset, lightformers } = useControls({
],
value: 'sunset',
},
- lightformers: false
+ lightformers: false,
})
const environmentRef = ref(null)
@@ -89,12 +89,31 @@ const { progress, hasFinishLoading } = await useProgress()
+ :preset="preset.value"
+ >
-
-
-
-
+
+
+
+
diff --git a/src/core/staging/useEnvironment/component.vue b/src/core/staging/useEnvironment/component.vue
index 7658b246..381d5ef1 100644
--- a/src/core/staging/useEnvironment/component.vue
+++ b/src/core/staging/useEnvironment/component.vue
@@ -25,7 +25,7 @@ defineExpose({ texture })
const { extend, renderer, scene } = useTresContext()
let slots = null as any
-let fbo = ref(null as null | WebGLCubeRenderTarget)
+const fbo = ref(null as null | WebGLCubeRenderTarget)
let cubeCamera = null as null | CubeCamera
const envSence = ref(null)
@@ -50,7 +50,8 @@ const setTextureEnvAndBG = (fbo: WebGLCubeRenderTarget) => {
if (props.background) {
scene.value.background = fbo.texture
}
- } else {
+ }
+ else {
scene.value.environment = useEnvironmentTexture.value
if (props.background) {
scene.value.background = useEnvironmentTexture.value
@@ -66,7 +67,7 @@ watch(useEnvironmentTexture, (value) => {
watch(useSlots().default, (value) => {
if (value) {
slots = value
- if (Array.isArray(slots)&&slots.length>0) {
+ if (Array.isArray(slots) && slots.length > 0) {
if (typeof slots[0]?.type !== 'symbol') {
extend({ EnvSence })
fbo.value = new WebGLCubeRenderTarget(props.resolution)
@@ -85,7 +86,10 @@ texture.value = useEnvironmentTexture
-
+
diff --git a/src/core/staging/useEnvironment/index.ts b/src/core/staging/useEnvironment/index.ts
index 105f07e4..84a2b8db 100644
--- a/src/core/staging/useEnvironment/index.ts
+++ b/src/core/staging/useEnvironment/index.ts
@@ -2,7 +2,7 @@ import { useLoader, useTresContext } from '@tresjs/core'
import type {
CubeTexture,
Texture,
- WebGLCubeRenderTarget
+ WebGLCubeRenderTarget,
} from 'three'
import {
CubeReflectionMapping,
@@ -32,7 +32,10 @@ import { environmentPresets } from './const'
// eslint-disable-next-line max-len
const PRESET_ROOT = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/hdr/'
-export async function useEnvironment(options: Partial, fbo: Ref): Promise {
+export async function useEnvironment(
+ options: Partial,
+ fbo: Ref,
+): Promise {
const { scene } = useTresContext()
const {
@@ -83,7 +86,7 @@ export async function useEnvironment(options: Partial, fbo:
watch(() => [background.value, texture.value], ([_background, _texture]) => {
if (scene.value) {
- let bTexture = fbo?.value? fbo.value.texture : _texture
+ const bTexture = fbo?.value ? fbo.value.texture : _texture
scene.value.background = _background ? bTexture : undefined as unknown as Texture
}
}, {