Three App

Appearance

✨ About the project ​

Three App is a side project aimed at learning and experimenting with various development tools and tech stacks.

WARNING

This project/package is a Work In Progress and was created only for learning purposes. Do not use in production.

📂 Project scope ​

The main tasks and goals for this project include:

  • Set up a monorepo using NPM Workspaces
  • 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
  • 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 ​

If you've used the Spline Design tool before, you'll notice that even the most basic scene looks smooth and visually appealing by default. Achieving a similar look with vanilla three.js requires knowledge of advanced concepts, as three.js doesn't enforce an opinionated way of doing things.

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 this global variable will run on shared events like onRender or onClick.

This hook setup limits you to creating just one instance per page. This shouldn't be an issue if you're working on an SSR, SSG, or MPA project.

For more details, check out the 🪝 "Hooks" page in the guide.

⭐ 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.