Concepts

Viewport Awareness

Open the viewport awareness example in a Svelte REPL

Additionally, most Objects (Lights, Cameras, Meshes, …) can be made viewport aware. Use it to lazily load textures, models and more.

<script lang="ts">
  import { PointLight } from 'threlte'
  import type { Object3D } from 'three'

  let inViewport

  const onViewportEnter = (e: CustomEvent<Object3D>) => {
    console.log('PointLight entered the viewport.')
  }
  const onViewportLeave = (e: CustomEvent<Object3D>) => {
    console.log('PointLight left the viewport.')
  }
</script>

<PointLight
  viewportAware
  bind:inViewport
  on:viewportenter={onViewportEnter}
  on:viewportleave={onViewportLeave}
/>

These events are supported:

viewportenter
viewportleave

Bind inViewport if you wish to not use events.

INFO

You must add viewportAware to your component to make it viewport aware