Three App

ThreeJs but functional and declarative.

Warning

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

🚀 Features

ThreeApp is simply a set of functions and helpers designed to speed up your ThreeJs development

• 🍦 Vanilla and framework agnostic
• 🔑 Type Safe
• ⚡ Batteries included (Default Camera and Renderer, render loop and common event handling)
• 📦 Lightweight
• 🔌 ESM & CommonJs compatible

🚨 Limitations

The way all hooks were written limit the amount of instances that can be created to one by page.

⭐ Heavily inspired on

• React Three Fiber
• Tresjs
• Threlte
• Spline

📚 References

Tutorials

Library/NPM Package

• 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

Github Projects

• Using Projects for feature planning

• TABLEROS DE PROYECTOS | GITHUB BÁSICO | GITHUB PROJECTS | EPPR CLASE 205

• GitHub Projects: finding clarity in the chaos - Universe 2022

• Web.dev - Sandboxed Iframes

Logo

The Three App logo design was heavily inspired by Oscar Reutersvärd work.

---

🧰 Setup

Install NodeJs LTS version using fnm (RECOMMENDED)

fnm use --resolve-engines --install-if-missing

Scripts

npm run dev      # Start `core` and `docs` packages dev server
npm run dev:core # Start `core` package dev server
npm run dev:docs # Start `docs` package dev server
npm run publish  # Build and publish to npm core package

---

🛸 Getting Started

Installation

npm install three @slzr/three-app
npm install -D @types/three

Add the container element to your markup

<div id="three-app"></div>

Basic Usage

import { createThreeApp } from '@slzr/three-app'
import { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'

// It can be composed into `components`
const geometry = new BoxGeometry(1, 1, 1)
const material = new MeshBasicMaterial({ color: 0x00FF00 })
const cube = new Mesh(geometry, material)

const app = await createThreeApp({
  container: '#container',
  onInit({ scene }) {
    scene.add(cube)
  },
  onRender({ time, }) {
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
  }
})

app.start()

🗃️ Documentation

To learn more about Three App, check the documentation.