Lunchbox comes with several built-in composables and other utility functions to make development easier.

onBeforeRender and onAfterRender

Provide a function to be called every frame before or after render. That function accepts an object with the following properties:

    app // Lunch.App
    scene // THREE.Scene or null
    renderer // THREE.Renderer or null
    camera // THREE.Camera or null

For example:

import { onBeforeRender } from 'lunchboxjs'

onBeforeRender((data) => {

offBeforeRender and offAfterRender

Remove an already-added before/after render function. For example:

import { onBeforeRender, offBeforeRender } from 'lunchboxjs'

// create and add the function
const update = () => {

// later, when you're ready to remove that function:


Provide a function to be called when the scene has initialized. The function accepts the same parameters as onBefore/AfterRender.

import { onStart } from 'lunchboxjs'

onStart(({ scene }) => {

useCamera, useRenderer, and useScene

The current camera, renderer, and scene are all available as composables:

<script setup>
    import { useCamera } from 'lunchboxjs'

    const camera = useCamera()
    // `camera.value` available to work with

Note that when your code runs, these may be null or undefined, so the onXReadyversion of these might be easier to use.

onCameraReady, onRendererReady, and onSceneReady

Provide a function to be called when the camera, renderer, or scene is available. Accepts the primary camera, renderer, or scene as an argument.

import { onCameraReady, onRendererReady, onSceneReady } from '../../src'

// run every camera/renderer/scene change
onCameraReady((cam) => console.log(cam))
onRendererReady((renderer) => console.log(renderer))
onSceneReady((scene) => console.log(scene))

Note that in TypeScript, onCameraReady and onRendererReady can support generic types:

import { onCameraReady, onRendererReady } from '../../src'

onCameraReady<THREE.OrthographicCamera>((cam) => {
    // `cam` is an instance of OrthographicCamera
onRendererReady</* any type inheriting from THREE.Renderer */>((renderer) =>