Skip to content

Stars

<Stars /> is a component that renders a stars in the sky of your scene. It is an abstraction that use Points, PointsMaterial and BufferGeometry to create a beautiful stars effect

Usage

You can use <Stars /> component without passing any props,

vue
<template>
  <TresCanvas>
    ...
    <Stars />
    ...
  </TresCanvas>
</template>

But still if you want you can tweak the props to find the best setup for you.

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

const yRotation = shallowRef(0)
useRenderLoop().onLoop(({ delta }) => {
  yRotation.value += 0.02 * delta
})
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Stars
      :rotation="[0, yRotation, 0]"
      :radius="50"
      :depth="50"
      :count="5000"
      :size="0.3"
      :size-attenuation="true"
    />
    <TresGridHelper :args="[4, 4]" />
    <OrbitControls />
  </TresCanvas>
</template>

Notice that you can pass a texture as an alphaMap to personalize the star shape

vue
<template>
  <TresCanvas>
    ...
    <Stars
      :radius="50"
      :depth="20"
      :count="3000"
      :alpha-map="alphaMap"
    />
    ...
  </TresCanvas>
</template>

Props

PropDescriptionDefault
sizeThe size of the stars0.1
sizeAttenuationkeep the same size regardless distance.true
transparentshow transparency on the stars texturetrue
alphaTestenables the WebGL to know when not to render the pixeltext.0.01
alphaMaptexture of the starsnull
countnumber of stars5000
depthdepth of star's shape50
radiusRadius of star's shape100