threlte logo
@threlte/extras

<PerfMonitor>

Utility component for monitoring basic rendering statistics using three-perf.

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

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

<style>
  div {
    height: 100%;
  }
</style>
<script lang="ts">
  import { T } from '@threlte/core'
  import { OrbitControls } from '@threlte/extras'
  import { DoubleSide } from 'three'
  import { DEG2RAD } from 'three/src/math/MathUtils.js'
</script>

<T.PerspectiveCamera
  makeDefault
  position={[45, 40, -45]}
  fov={90}
>
  <OrbitControls
    autoRotate
    autoRotateSpeed={0.1}
    target.y={-10}
  />
</T.PerspectiveCamera>

<T.AmbientLight intensity={1} />

<T.DirectionalLight position={[10, 5, 0]} />

<T.Mesh
  rotation.x={DEG2RAD * -90}
  castShadow
  receiveShadow
>
  <T.PlaneGeometry args={[1000, 1000]} />
  <T.MeshStandardMaterial color={'#fa992a'} />
</T.Mesh>

<T.Mesh>
  <T.SphereGeometry args={[400]} />
  <T.MeshBasicMaterial
    color="#0057fa"
    side={DoubleSide}
  />
</T.Mesh>

{#each { length: 120 } as _, x}
  {@const distance = Math.abs(Math.sin(x)) * 50 + 10}
  {@const height = Math.abs((30 - distance) / 2)}
  {@const posX = distance * Math.cos(DEG2RAD * ((360 / 120) * x))}
  {@const posY = distance * Math.sin(DEG2RAD * ((360 / 120) * x))}
  <T.Mesh
    castShadow
    receiveShadow
    position.x={posX}
    position.y={height / 2}
    position.z={posY}
  >
    <T.CapsuleGeometry args={[3, height, 12, 32]} />
    <T.MeshStandardMaterial color={'#45c1ff'} />
  </T.Mesh>
{/each}

Usage

Simply drop in the <PerfMonitor> component as a child of Threlte <Canvas>. The component starts measuring before mainStage and ends after renderStage. Learn more about tasks in threlte here

<Canvas>
  <PerfMonitor
    anchorX={'right'}
    logsPerSecond={30}
  />
  <Scene />
</Canvas>

Component Signature

Props

name
type
required
default
description

actionToCallUI
string
no
If set and given characters are typed in the the tab window, the three-perf dev gui will be shown. Disabled by default (empty string).

anchorX
'left' | 'right'
no
'left'
Stats html element horizontal anchor.

anchorY
'top' | 'bottom'
no
'top'
Stats html element vertical anchor.

backgroundOpacity
number
no
0.7
Stats block background opacity level.

domElement
HTMLElement
no
document.body
Dom element to which stats block will be attached to.

enabled
boolean
no
true
Toggles stats collection.

guiVisible
boolean
no
false
Toggles Three-perf dev gui visiblity.

logsPerSecond
number
no
10
Refresh rate of the logs.

memory
boolean
no
true
Toggles memory info visiblity (geometries, textures, shaders)

scale
number
no
1
Scale of the stats block html element.

showGraph
boolean
no
true
Toggles cpu/gpu/fps graphs rendering.

visible
boolean
no
true
Toggles visibility of the monitor html element. Setting `false` does not stop collection of the stats.