Three App

Appearance

✨ About the Project ​

Three App is a side project built to explore and experiment with different dev tools and tech stacks for learning purposes.

⚠️ Disclaimer

This project/package is experimental and not production-ready.

📂 Project Scope ​

Main goals of this project:

✅ Use fnm as the Node.js version manager.
✅ Use PNPM as the package manager.
    Set up a basic monorepo using PNPM Workspaces.
✅ Create a TypeScript library with type declarations using tsup.
✅ Publish on NPM under a personal scope.
✅ Write tests with Vitest.
✅ Build a documentation site with VitePress.
    Auto-generate examples using StackBlitz or CodeSandbox APIs.
✅ Implement linting with ESLint.
✅ Use semantic commits and Semver.
    Auto-generate changelogs.

📌 See the full TODO list for project progress.

🚀 Three App Library ​

Three App is a lightweight wrapper and set of utility functions that make building three.js applications simpler and more efficient. It encapsulates common concepts and delivers a developer experience similar to React Three Fiber, while staying functional, declarative, and framework-agnostic.

🌟 Main Features ​

✅ Pre-configured renderer and camera.
✅ Built-in render loop with control methods.
✅ Support for common events.
✅ Simple lifecycle "hooks".
✅ Handy utilities functions to compose 3D scenes.

📌 See Core Functionalities for more details.

🚨 Limitations ​

Three App includes a simple "hook system" inspired by React and Vue. It relies on global variables, which makes it easy to manage lifecycle events, but it limits you to running only one instance per page.

Since hooks are global, they can't tell which Three App instance triggered a callback. If multiple instances exist on the same page, all their callbacks will run together.

This isn't an issue for most SSR, SSG, or MPA setups—or for standalone apps like games or interactive scenes.

🛠️ Workaround

If you need to run multiple Three App instances on the same page, you can bundle each one separately (e.g., with tsup) and load them inside isolated iframes.

📌 See the Multiple Instances Demo

⚠️ Disclaimer

Three App is meant for single-app experiences.

If your project needs multiple instances, communication between them, or stricter security requirements (where iframes aren't ideal), consider using tools like React Three Fiber, TresJS, Threlte, Three.EZ, or other recommended wrappers/frameworks.

💡 Inspirations ​

This project was heavily inspired by React Three Fiber and Bruno Simon's Three.js Journey.

React Three Fiber bannerThree.js Journey

Also influenced by: TresJS — Threlte — Spline

📚 Resources ​

📺 Tutorials ​

📄 Docs & Guides ​

Oscar Reutersvärd

The Three App logo is a modern take on the impossible figures of Oscar Reutersvärd.

The Illustrator file is available: logo.ai

Following this project, I also created: