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

Environment ^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.



You can also pass the .hdr file directly:

<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.

<script setup lang="ts">
import { Environment } from '@tresjs/cientos'

let envMap = null

const environmentTexture = shallowRef()

watch(environmentTexture, ({ getTexture }) => {
  envMap = getTexture()

  <Environment ref="environmentTexture" />
    <TresSphereGeometry />
    <TresMeshStandardMaterial :env-map="envMap" />


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