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
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: sRGBEncoding,
})
Then you can use the texture
in your scene:
<TresMesh>
<TresSphereGeometry />
<TresMeshStandardMaterial :map="texture" />
</TresMesh>
Name | Type | Default | Description |
---|---|---|---|
files | Array |
undefined |
Array of 6 urls to images, one for each side of the CubeTexture. |
path | boolean |
false |
Path to the environment map files. |
encoding | Encoding |
sRGBEncoding for an array of files and LinearEncoding for a single texture |
Encoding of the environment map. |
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. |