LunchboxJS

source for this demo

LunchboxJS (or just Lunchbox) is a Vue 3 custom renderer for Three.js. Think of it like react-three-fiber for Vue. You can write Three scenes in Vue components like this:

<template>
    <Lunchbox background="white">
        <mesh position-z="-5">
            <boxGeometry />
            <meshBasicMaterial color="green" />
        </mesh>
    </Lunchbox>
</template>

From there, you can add interactivity and reactivity:

<template>
    <!-- click the box to change colors -->
    <Lunchbox background="white">
        <mesh @click="colorIndex++" position-z="-5">
            <boxGeometry />
            <meshBasicMaterial :color="color" />
        </mesh>
    </Lunchbox>
</template>

<script>
    export default {
        data() {
            return {
                colors: ['green', 'blue', 'yellow', '#ccc'],
                colorIndex: 0,
            }
        },
        computed: {
            color() {
                return this.colors[this.colorIndex % this.colors.length]
            },
        },
    }
</script>

Lunchbox is a full custom renderer for Vue 3 and Three.js, which differentiates it from other projects like the excellent TroisJS. It's still early in development but is ready for production, with several examples available.

LunchboxJS #

LunchboxJS