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,

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

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

<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

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

Props

Prop	Description	Default
size	The size of the stars	0.1
sizeAttenuation	keep the same size regardless distance.	true
transparent	show transparency on the stars texture	true
alphaTest	enables the WebGL to know when not to render the pixeltext.	0.01
alphaMap	texture of the stars	null
count	number of stars	5000
depth	depth of star's shape	50
radius	Radius of star's shape	100