β¨ About the project β
Three App
is a side project created to explore and experiment with different development tools and tech stacks for learning purposes.
WARNING
This project/package is a Work In Progress. Do not use in production.
π Project scope β
The main goals for this project include:
β
Set up a monorepo using PNPM
β
Create a TypeScript library with type declarations using tsup
β
Publish on NPM under my personal scope
β
Test with Vitest
β
Build a documentation site using Vitepress
β β
Auto-generate examples using Stackblitz or Code Sandbox APIs
β
Implement linting with Eslint
β
Use semantic commits and Semver
β β
Auto-generate changelogs
β
Use fnm as the Node.js version manager
You can check the full TODO list to see the project's progress.
π Three App
library β
After starting Bruno Simon's Three.js Journey course, I came up with the idea of creating a wrapper or set of functions to help compose three.js
applications. The goal was to bring a developer experience similar to that of React Three Fiber, but in a framework-agnostic and native way, without relying on frameworks like React
, Vue
, or Svelte
, encapsulating concepts and minimizing the boilerplate needed to create three.js apps.
Three App includes a default rendered and camera, already pre-configured, handles common pointer events, offers "hooks" to run code at different stages of the app lifecycle, and provides useful utilities to easily compose 3D scenes.
For more details, check out the Core functionalities page in the guide.
π¨ Limitations β
One of the key features of Three App is its use of "Hooks"
(essentially, callbacks stored in global variables π¬). This was the simplest way I found to replicate the hook experience similar to React or Vue.
However, this solution isn't perfect. Once the script loads, the hooks can't distinguish which Three App instance triggered a callback. So, if you have multiple Three App instances, all callbacks stored in those global variable will triggered.
This hook setup limits you to create one instance per page. This shouldn't be an issue if you're working on an SSR
, SSG
, or MPA
project or just have only one instance.
INFO
If you need multiple three app instances running on the same page, you can overcome this limitation by compiling your code with a building tool like tsup and inject yours three apps on iframes with the srcdoc
attribute.
Check the multiple-instances demo in the source code.
β Inspired on β
This project was made possible primarily thanks to React Three Fiber and Bruno Simon's Three.js Journey course.
![React Three Fiber banner](https://github.com/pmndrs/react-three-fiber/raw/master/docs/banner-r3f.jpg)
![Three.js Journey](https://github.com/pmndrs/react-three-fiber/raw/master/docs/banner-journey.jpg)
π Resources β
Here are some of the resources I used to create this project.
Tutorials β
- Crea un monorepositorio multipaquete con npm workspaces y releases de paquetes
- π₯ Monorepo multipaquete con NPM Workspaces π¦ (FullStack Bootcamp JavaScript)
- Blazing Fast Tips: Publishing to NPM
- How to make your own NPM package (Step-by-Step) π¦
- Create a library using Vite lib mode
Guides/Docs β
π¨ Logo β
The Three App
logo design was heavily inspired by Oscar ReutersvΓ€rd's optical illusions.
The photoshop .psd file is included in the repository.
π Related projects β
Building on the momentum generated by this project, I started these related repositories.