Lunchboxjs

Lunchbox 2 lets you write ThreeJS scenes using web components. You can use it in any (or no) framework.

<three-lunchbox>
  <three-mesh position-z="-5">
    <torus-knot-geometry></torus-knot-geometry>
    <mesh-normal-material></mesh-normal-material>
  </three-mesh>
</three-lunchbox>

Docs

Install

Full docs

About

Lunchbox started as a Vue + ThreeJS custom renderer, but from version 2 on is focused on web components built into browsers.

Local Dev

npm install, then npm run dev to run dev server. From there, edit source code in the LunchboxJS package's /src/... and examples in /index.html/... to build and test features.

With the dev server still running and accessible via localhost:5173, run npm run test to run headless tests, npm run cy:open to open Cypress test suites.

npm run docs:dev to run docs locally.

Publishing

npm run test to make sure all tests pass, then npm run publish.