Skip to content

UseEnvironment

useEnvironment composable that automatically sets up a global cubemap, which affects the default scene.environment, and optionally scene.background.

It uses the CubeTextureLoader to load the cubemap

Usage

WARNING

UseEnvironment needs to be wrapped by a Suspense component

ts
import { useEnvironment } from '@tresjs/cientos'

const texture = await useEnvironment({
  files: [
    '/textures/environmentMaps/0/px.jpg',
    '/textures/environmentMaps/0/nx.jpg',
    '/textures/environmentMaps/0/py.jpg',
    '/textures/environmentMaps/0/ny.jpg',
    '/textures/environmentMaps/0/pz.jpg',
    '/textures/environmentMaps/0/nz.jpg',
  ],
  path: '',
  encoding: SRGBColorSpace,
})

Then you can use the texture in your scene:

vue
<TresMesh>
  <TresSphereGeometry />
  <TresMeshStandardMaterial :map="texture" />
</TresMesh>

You can also pass the .hdr file directly

ts
import { useEnvironment } from '@tresjs/cientos'

const texture = await useEnvironment({
  files: '/sunset.hdr',
  path: '',
  encoding: SRGBColorSpace,
})

Options

NameTypeDefaultDescription
filesArrayundefinedArray of 6 urls to images, one for each side of the CubeTexture. or and HDR
pathbooleanfalsePath to the environment map files.
encodingEncodingSRGBColorSpace for an array of files and LinearEncoding for a single textureEncoding of the environment map.
backgroundbooleanfalseIf true the texture will be used as the scene background.
blurnumber0Blur factor between 0 and 1. (only works with three 0.146 and up)
presetstringundefinedPreset environment map.