Skip to content
Threlte

<Stars>

This component is a port of drei’s <Stars> component, which adds a blinking shader-based starfield to your scene.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>


<div>
  <Canvas>
    <Scene />
  </Canvas>
</div>


<style>
  div {
    height: 100%;
  }
</style>
<script lang="ts">
  import { T } from '@threlte/core'
  import { OrbitControls, Grid, Stars } from '@threlte/extras'
</script>


<Stars />


<T.PerspectiveCamera
  makeDefault
  position.y={1}
  position.z={8}
  fov={90}
>
  <OrbitControls
    enableDamping
    enablePan={false}
    enableZoom={false}
    autoRotate
  />
</T.PerspectiveCamera>


<Grid
  sectionThickness={0}
  infiniteGrid
  cellColor="#dddddd"
  cellSize={2}
/>

Examples

Section titled “Examples”

Basic Example

Section titled “Basic Example”
Billboard.svelte
<script lang="ts">
  import { Stars } from '@threlte/extras'
</script>


<Stars />

Component Signature

Section titled “Component Signature”

<Stars> extends < T . Points > and supports all its props, snippets, bindings and events.

Props

name
type
required
default
description
count
number
no
5000
Number of stars
depth
number
no
50
Radius + depth = maximum distance of points from center
factor
number
no
6
Size of stars
fade
boolean
no
true
If stars should fade at the edges (shows blurry circles instead of squares)
lightness
number
no
0.8
opacity
number
no
1.0
radius
number
no
50
Minimum distance of points to center
saturation
number
no
1.0
speed
number
no
0
Speed of blinking animation