Basic Demo

Open Sandbox

Based on React Three Fiber - Basic Demo.

---

index.ts

/**
 * Basic demo.
 * Based on [React Three Fiber - Basic Demo](https://codesandbox.io/s/rrppl0y8l4).
 */
import { createThreeApp } from '@slzr/three-app'
import { useOrbitControls } from '@slzr/three-app/extras'
// Components
import { box } from './box'
import { lights } from './lights'

(async () => {
  const threeApp = await createThreeApp({
    container: document.getElementById('three-app')!,
    onInit({ scene }) {
      useOrbitControls()

      scene.add(
        lights(),

        box({ position: [-1.2, 0, 0] }),
        box({ position: [1.2, 0, 0] }),
      )
    },
  })

  threeApp.start()
})()

box.ts

import { BoxGeometry, Mesh, MeshStandardMaterial } from 'three'
import type { ThreeAppProps } from '@slzr/three-app'
import { applyProps, onClick, onPointerEnter, onPointerLeave, useRender } from '@slzr/three-app'

/** Creates an animated box */
export function box(props: ThreeAppProps<Mesh>) {
  const geometry = new BoxGeometry(1, 1, 1)
  const material = new MeshStandardMaterial({ color: 'orange' })
  const cube = new Mesh(geometry, material)
  let clicked = false

  applyProps(cube, props)

  useRender(() => cube.rotation.x += 0.01)

  onClick(cube, () => {
    clicked = !clicked

    cube.scale.setScalar(clicked ? 1.5 : 1)
  })

  onPointerEnter(cube, () => {
    material.color.set('hotpink')
  })

  onPointerLeave(cube, () => {
    material.color.set('orange')
  })

  return cube
}

lights.ts

import { AmbientLight, Group, PointLight, SpotLight } from 'three'
import { applyProps } from '@slzr/three-app'

/** Setup scene lights as a `Group`  */
export function lights() {
  return new Group().add(
    applyProps(new AmbientLight(), { intensity: Math.PI / 2 }),
    applyProps(new SpotLight(), { position: [10, 10, 10], angle: 0.15, penumbra: 1, decay: 0, intensity: Math.PI }),
    applyProps(new PointLight(), { position: [-10, -10, -10], decay: 0, intensity: Math.PI }),
  )
}