Three App

Appearance

🚀 Getting Started ​

📝 Overview ​

Three App is a set of utility functions that makes using three.js more declarative and functional. It enhances the developer experience by providing an easy and solid starting point for any 3D project, reducing boilerplate code and helping you better organize your codebase.

🚀

Using Three App you don't have to worry about manually setting up the renderer, camera, commons events, or the most complex part, the render loop.

🌐 Trying it online ​

You can try Three App online on StackBlitz or CodeSandbox. It runs directly in the browser, and it is almost identical to the local setup but doesn't require installing anything on your machine.

Stackblitz template uses the official Vite + ts template

CodeSandBox template uses a basic Parcel setup

📂 Scaffolding your project ​

You can setup your project following the Parcel instructions or scaffold it using Create Vite tool with a vanilla template.

bash
$ npm create vite@latest my-three-app -- --template vanilla-ts

The Create Vite tool offers multiple templates, including vanilla and vanilla-ts.

📥 Installation ​

sh
npm i three @slzr/three-app

Three App is compatible and tested with three.js r169.

🔷 Typescript Support ​

Three App is type-safe out of the box since it's written in TypeScript. However, three.js doesn’t include type declarations, so you’ll need to install them separately

bash
npm i -D @types/three

🚦 Before you start ​

WARNING

In order to use three app you should have some experience or at least basic knowledge of how three.js works.

📚 Useful material ​

🌟 Inspiration ​