Skip to content

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

vue
<Suspense>
  <Environment
    :files="[
      '/px.jpg',
      '/nx.jpg',
      '/py.jpg',
      '/ny.jpg',
      '/pz.jpg',
      '/nz.jpg'
  ]"
  />
</Suspense>

You can also pass the .hdr file directly:

vue
<Suspense>
   <Environment files="/sunset.hdr" />
</Suspense>

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'

const environmentRef = shallowRef()

watch(environmentRef, texture => {
  console.log(texture)
})
</script>

<template>
  <Environment ref="environmentRef" />
  <TresMesh>
    <TresSphereGeometry />
    <TresMeshStandardMaterial :env-map="envMap" />
  </TresMesh>
</template>

Presets

You can use one of the available presets by passing the preset prop:

html
<Environment preset="city" />

Lightformer

You can incorporate Lightformer into the environment just like a slot.

html
<script setup>
  import { Enviroment, LightFormer } from '@tres/cientos'
</script>

<template>
  <Environment>
    <Lightformer :intensity="0.75" :position="[0, 5, -9]" />
    <Lightformer from="ring" :rotation-y="-Math.PI / 2" :scale="[10, 10, 1]" />
  </Environment>
</template>

Props for Lightformer

Lightformer inherits from mesh, and its extension parameters include:

PropDescriptionDefault
from'circle' , 'ring' , 'rect' , any:other Mesh.The type of Lightformerrect
intensitynumber : the intensity of the light.1
colorthe color of the light.0xffffff
argsthe arguments of the GeometryWhen using other geometries, set the corresponding arguments.

Props

PropDescriptionDefault
filesArray of 6 urls to images, one for each side of the CubeTexture. or and HDRundefined
pathPath to the environment map files.undefined
encodingEncoding of the environment map.SRGBColorSpace 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
resolutionThe resolution of the WebGLCubeRenderTarget.256
nearThe near of the CubeCamera.1
farThe far of the CubeCamera.1000
framesThe frames of the cubeCamera.update.Infinity