Open Sandbox

index.ts

import { AmbientLight, PointLight, SpotLight } from 'three'
import { applyProps, createThreeApp } from '@slzr/three-app'
import { useOrbitControls } from '@slzr/three-app/extras'
//
import { box } from './box'

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

      scene.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 }),

        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'

/** */
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
}

Based on React Three Fiber - Basic Demo.