You are reading Tres v1 docs. Head over tresjs.org for V2 docs.
Skip to content
On this page

Environment ^1.7.0

Environment

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" />

Environment

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

PropDescriptionDefault
filesArray of 6 urls to images, one for each side of the CubeTexture.undefined
pathPath to the environment map files.undefined
encodingEncoding of the environment map.sRGBEncoding for an array of files and LinearEncoding for a single texture
backgroundIf true, the environment map will be used as the scene background.false
blurBlur factor between 0 and 1. (only works with three 0.146 and up)0
presetPreset environment map.undefined