Lunchbox Wrapper

A Lunchbox app needs to be wrapped in a Lunchbox wrapper:

<Lunchbox>
    <!-- Your code -->
</Lunchbox>

Props

The Lunchbox component comes with several shortcut props:

NameTypeNotes
backgroundStringBackground color of the renderer.
cameraArgsArrayProps to pass to the auto-created camera. Ignored if you provide your own camera. Defaults: PerspectiveCamera: [45, 0.5625, 1, 1000], OrthographicCamera: []
cameraLookArray[x, y, z] coordinates to pass to camera.lookAt.
cameraLookAtArrayAlias for cameraLook.
cameraPositionArray[x, y, z] coordinates where the camera should be placed.
dprNumberDevice pixel ratio. Defaults to current display's DPR.
orthoBooleanAdd or set to true to use an orthographic camera. Ignored if you provide your own camera.
orthographicBooleanAlias of ortho.
r3fBooleanMatch react-three-fiber's color settings. (In practice, this usually means softer colors and shadows.) This uses sRGB space and ACESFilmicToneMapping, and sets ColorManagement.legacyMode to false. See here for more information.
rendererPropertiesObjectObject containing properties to set on renderer.
shadowBoolean or ObjectAdd or set to true to enable shadows. Pass an object with property type to set shadow type.
sizePolicyStringSet to 'container' to make lunchbox fill its containing element instead of forcing fullscreen. See this PR for more details.
transparentBooleanAdd or set to true to make the renderer's background transparent.
updateSourceObjectSet to only rerender when this value changes. See this PR for more details.
zoomNumberSet to change an orthographic camera's zoom.

Examples

  • A renderer with a blue background:
<Lunchbox background="#0000ff">
    <!-- Your code -->
</Lunchbox>
  • A renderer with a transparent background:
<Lunchbox transparent>
    <!-- Your code -->
</Lunchbox>
  • Soft shadows enabled:
<template>
    <Lunchbox :shadow="{ type: THREE.PCFSoftShadowMap }">
        <!-- Your code -->
    </Lunchbox>
</template>

<script setup>
    import * as THREE from 'three'
</script>