Your Own Vite Plugin? That's as easy as 1 2 3(D)
summary
Creates a Vite plugin that pre-processes GLTF assets at build time by running threejs in Node to generate runtime objects, then emits generated code and type-safe TypeScript objects so property access and missing-node errors surface at compile time. Implements GLTF file preprocessing and codegen via Handlebars, patches a cloned threejs runtime, and wraps everything with unplugin for build-tool agnostic distribution. Faces esbuild watcher and asset-hashing quirks, is published on GitHub, and is used in a working Vue demo.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:31glTF files and use cases
- 4:20glTF structure and scene graphs
- 6:073D rendering with WebGL/Three.js
- 7:14Loading glTF in Three.js/TresJS
- 8:17Runtime-only glTF loading problems
- 9:41Solution: Type generation for glTF
- 11:28API design: usability vs bundle size
- 13:37Implementation: types and helpers
- 15:24Example: island scene types and code
- 16:49Solutions to runtime loading issues
- 17:52Making plugin bundle-agnostic with unplugin
- 18:56Challenges with unplugin and bundlers
- 21:08Publishing plugin and open source
- 21:51Using plugin in projects
- 22:34Demo: browser game with plugin
- 23:39Takeaways and frameworks
- 24:43Q&A: Vite plugin errors
- 25:48Q&A: Testing Vite plugins
- 26:31Q&A: Dev vs production modes
related talks
20mVite - The Next Generation Frontend Tooling
52mVite Under a Lense
26mVite + Nitro: The Full Stack Era
07mBuilding with Vite's JavaScript API
21mHow to Migrate from Vue CLI to Vite
13mStreamline Your Vite dev-flow with Nx
21mHow Vite Changes the Game for Vue and Web Developers
25mThe Eternal Sunshine of the Zero Build Pipeline