Three App

Appearance

✨ 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 bannerThree.js Journey

Other sources: Tresjs - Threlte - Spline

📚 Resources ​

Here are some of the resources I used to create this project.

Tutorials ​

Guides/Docs ​

Oscar Reutersvärd

The Three App logo design was heavily inspired by Oscar Reutersvärd's optical illusions.

The photoshop .psd file is included in the repository.

Building on the momentum generated by this project, I started these related repositories.