Three App

Set of utility helpers to use ThreeJs in a functional and declarative way

Get started

Add the container element to your markup

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

Create components and use hooks

import { onRender } from '@slzr/three-app'

function createCube() {
  const geometry = new BoxGeometry(1, 1, 1)
  const material = new MeshBasicMaterial({ color: 0x00FF00 })
  const cube = new Mesh(geometry, material)

  onRender((_) => {
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
  })

  return cube
}

Create your ThreeJs app and add components to the scene

import { createThreeApp } from '@slzr/three-app'

const app = await createThreeApp({
  container: document.getElementById('three-app')!,
  onInit({ scene }) {
    const cube = createCube()

    scene.add(cube)
  }
})

app.start()

TODOs

• createThreeApp

  • scene
  • camera
    • aspect ratio
    • OrthographicCamera
    • PerspectiveCamera
  • renderer
  • render loop
    • render()
    • start()
    • stop()
  • initialValues
  • onResize hook
  • onRender hook
    • clock
  • ColorManagement
  • shadows
  • fullScreenMode

• applyProps

  • accept - separated props like position-y: 2 | rotation-x: -Math.PI / 2
  • Can extends ThreeProps like ThreeProps<T, { color: string }>
  • accept functions like camera.lookAt()

• handdle color, scale, vector2, rotation

• createWithProps fn

• map ColorLikeProps

• Basic Three components

  • Lights
  • Camera Controls

• onHover

• onClick

• useThreeApp

• tweakpane

• multiple threeApp instances

  • getThreeAppInstance | resolveDispatcher

• onDestroy hook

  • remove element from toRender if needed
  • remove element from toIntersect if needed

• Accept .gltf files

  https://github.com/edwinwebb/three-seed https://whsjs.readme.io/docs

• Generate documentation

• eslint + antfu

• #threejsJorney en twitter

• tests -[ ] applyProps

• test changing 1, 2 and 3 axis for

• Publish beta version