Core Concepts
Lunchbox
A Lunchbox app needs to be wrapped in a Lunchbox
wrapper:
<Lunchbox>
<!-- Your code -->
</Lunchbox>
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
scene.add(mesh)
In Lunchbox, this produces the same result:
<Lunchbox>
<mesh>
<boxGeometry :args="[1, 1 ,1]" />
<meshBasicMaterial :color="0xffff00" />
</mesh>
</Lunchbox>
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 -->
<mesh/>
// three.js
new THREE.BoxGeometry()
<!-- Lunchbox -->
<boxGeometry/>
- 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 aMeshBasicMaterial
) 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" />
Components
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.