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:
Name | Type | Notes |
---|---|---|
background | String | Background color of the renderer. |
cameraArgs | Array | Props to pass to the auto-created camera. Ignored if you provide your own camera. Defaults: PerspectiveCamera: [45, 0.5625, 1, 1000] , OrthographicCamera: [] |
cameraLook | Array | [x, y, z] coordinates to pass to camera.lookAt . |
cameraLookAt | Array | Alias for cameraLook . |
cameraPosition | Array | [x, y, z] coordinates where the camera should be placed. |
dpr | Number | Device pixel ratio. Defaults to current display's DPR. |
ortho | Boolean | Add or set to true to use an orthographic camera. Ignored if you provide your own camera. |
orthographic | Boolean | Alias of ortho . |
r3f | Boolean | Match 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. |
rendererProperties | Object | Object containing properties to set on renderer. |
shadow | Boolean or Object | Add or set to true to enable shadows. Pass an object with property type to set shadow type. |
sizePolicy | String | Set to 'container' to make lunchbox fill its containing element instead of forcing fullscreen. See this PR for more details. |
transparent | Boolean | Add or set to true to make the renderer's background transparent. |
updateSource | Object | Set to only rerender when this value changes. See this PR for more details. |
zoom | Number | Set 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>