LunchboxJS
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.