ScreenSpace

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

Additionally, the top, bottom, left, right props can be used to position them similarly to CSS position: absolute property when using a PerspectiveCamera or an OrtographicCamera.

Usage

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

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera />
    <OrbitControls />

    <!-- By default, children are centrered -->
    <ScreenSpace :depth="5">
      <TresMesh>
        <TresTorusGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </ScreenSpace>

    <ScreenSpace :depth="8" :left="0.1" :top="0.2">
      <TresMesh>
        <TresTorusGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </ScreenSpace>

    <ScreenSpace :depth="10" :right="0" :bottom="0">
      <TresMesh>
        <TresTorusGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </ScreenSpace>

    <ScreenSpace :depth="25" :left="0.25" :bottom="0.25">
      <TresMesh>
        <TresTorusGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </ScreenSpace>

    <ScreenSpace :depth="15" :right="0.25">
      <TresMesh>
        <TresTorusGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </ScreenSpace>

    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>

Props

Prop	Description	Default
depth	Distance from the camera	-1
top	Similar to CSS top property. Cannot be used with bottom	0.5 (vertical center of the screen)
bottom	Similar to CSS bottom property. Cannot be used with top
left	Similar to CSS left property. Cannot be used with right	0.5 (horizontal center of the screen)
right	Similar to CSS right property. Cannot be used with left