Skip to content

ScreenSpace

<ScreenSpace /> wraps its children in a <TresGroup /> and positions them in front of the active camera at :depth.

Usage

vue
<script setup lang="ts">
import { OrbitControls, ScreenSpace } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera />
    <OrbitControls />
    <ScreenSpace :depth="5">
      <TresMesh>
        <TresTorusGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </ScreenSpace>
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>

Props

PropDescriptionDefault
depthDistance from the camera1