TresJSEnvironment ^1.7.0
Is a component abstraction that automatically sets up a global cubemap, which affects the default scene.environment, and optionally scene.background,
It uses the composable useEnvironment under the hood to load the cubemap.
Usage
html
<Environment
:files="[
'/px.jpg',
'/nx.jpg',
'/py.jpg',
'/ny.jpg',
'/pz.jpg',
'/nz.jpg'
]"
/>
You can also pass the .hdr file directly:
html
<Environment files="/sunset.hdr" />
Texture reference
You can access the model reference by pasing a ref to the <Environment /> prop and then using the method getTexture() to get the object.
vue
<script setup lang="ts">
import { Environment } from '@tresjs/cientos'
let envMap = null
const environmentTexture = shallowRef()
watch(environmentTexture, ({ getTexture }) => {
envMap = getTexture()
})
</script>
<template>
<Environment ref="environmentTexture" />
<TresMesh>
<TresSphereGeometry />
<TresMeshStandardMaterial :env-map="envMap" />
</TresMesh>
</template>
Props
| Prop | Description | Default |
|---|---|---|
files | Array of 6 urls to images, one for each side of the CubeTexture. | undefined |
path | Path to the environment map files. | undefined |
encoding | Encoding of the environment map. | sRGBEncoding for an array of files and LinearEncoding for a single texture |
background | If true, the environment map will be used as the scene background. | false |
blur | Blur factor between 0 and 1. (only works with three 0.146 and up) | 0 |
preset | Preset environment map. | undefined |