Core Concepts


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

    <!-- Your code -->

In a .vue single file component, this will be inside the <template> tag.

See the Wrapper page for more information and available props.

Three.js and Lunchbox

Almost all Lunchbox components are direct translations of Three.js concepts. Let's look at meshes as an example.

A standard Three.js mesh requires a geometry and a material. Three.js code to create and add a yellow cube to the scene might look like this:

// create geometry with sides of length 1
const geometry = new THREE.BoxGeometry(1, 1, 1)
// create yellow basic material
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// combine geometry + material in mesh
const mesh = new THREE.Mesh(geometry, material)

// create a scene...
const scene = new THREE.Scene()
// ... and add the mesh to the scene

In Lunchbox, this produces the same result:

        <boxGeometry :args="[1, 1 ,1]" />
        <meshBasicMaterial :color="0xffff00" />

A few points to note:

  • Lunchbox creates a Scene, Camera, and Renderer automatically. Adding children to your Lunchbox wrapper adds them to the Scene by default. (There's also support for overriding defaults for more advanced use cases.)

  • Lunchbox component names match camelCased Three.js class names.

// three.js
new THREE.Mesh()

<!-- Lunchbox -->

// three.js
new THREE.BoxGeometry()

<!-- Lunchbox -->
  • Every component can accept an args prop that take an array of arguments to pass to class constructors. This in Three.js:
new THREE.BoxGeometry(1, 2, 3)

would map to this in Lunchbox:

<boxGeometry :args="[1, 2, 3]" />
  • Any property you can add to a Three.js object (for example, the color property of a MeshBasicMaterial) can be added as a reactive prop on a Lunchbox component. For example, this yellow material:
const material = new THREE.MeshBasicMaterial()
material.color = 0xffff00

would map to this in Lunchbox:

<meshBasicMaterial :color="0xffff00" />
  • Any property without a value will be set to true by default:
<meshBasicMaterial wireframe />
<!-- is the same as: -->
<meshBasicMaterial :wireframe="true" />
  • You can set a property that would normally use dot notation with a dash in the prop name. For example, this in Three.js:
const mesh = new THREE.Mesh()
mesh.position.z = 5

would map to this in Lunchbox:

<mesh :position-z="5" />


You can use the most common Three.js classes in Lunchbox right away, such as:

  • Group
  • Mesh
  • Geometries (box, icosahedron, plane, etc)
  • Materials (standard, basic, points, shader, etc)
  • Lights (spotlights, point lights, directional, etc)

For more information, see Components.

To add any features not in that list, see the instructions under Extend.