camera-controls

<script>
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
  import { Pane, Button, Separator } from 'svelte-tweakpane-ui'
  import { cameraControls, mesh } from './stores'
  import { DEG2RAD } from 'three/src/math/MathUtils.js'

  let camera

  $: if ($cameraControls) {
    camera = $cameraControls._camera
  }
</script>

<Pane
  title="Camera Controls"
  position="fixed"
>
  <Button
    title="rotate theta 45deg"
    on:click={() => {
      $cameraControls.rotate(45 * DEG2RAD, 0, true)
    }}
  />
  <Button
    title="rotate theta -90deg"
    on:click={() => {
      $cameraControls.rotate(-90 * DEG2RAD, 0, true)
    }}
  />
  <Button
    title="rotate theta 360deg"
    on:click={() => {
      $cameraControls.rotate(360 * DEG2RAD, 0, true)
    }}
  />
  <Button
    title="rotate phi 20deg"
    on:click={() => {
      $cameraControls.rotate(0, 20 * DEG2RAD, true)
    }}
  />
  <Separator />
  <Button
    title="truck(1, 0)"
    on:click={() => {
      $cameraControls.truck(1, 0, true)
    }}
  />
  <Button
    title="truck(0, 1)"
    on:click={() => {
      $cameraControls.truck(0, 1, true)
    }}
  />
  <Button
    title="truck(-1, -1)"
    on:click={() => {
      $cameraControls.truck(-1, -1, true)
    }}
  />
  <Separator />
  <Button
    title="dolly 1"
    on:click={() => {
      $cameraControls.dolly(1, true)
    }}
  />
  <Button
    title="dolly -1"
    on:click={() => {
      $cameraControls.dolly(-1, true)
    }}
  />
  <Separator />
  <Button
    title="zoom `camera.zoom / 2`"
    on:click={() => {
      $cameraControls.zoom(camera.zoom / 2, true)
    }}
  />
  <Button
    title="zoom `- camera.zoom / 2`"
    on:click={() => {
      $cameraControls.zoom(-camera.zoom / 2, true)
    }}
  />
  <Separator />
  <Button
    title="move to ( 3, 5, 2)"
    on:click={() => {
      $cameraControls.moveTo(3, 5, 2, true)
    }}
  />
  <Button
    title="fit to the bounding box of the mesh"
    on:click={() => {
      $cameraControls.fitToBox($mesh, true)
    }}
  />
  <Separator />
  <Button
    title="move to ( -5, 2, 1 )"
    on:click={() => {
      $cameraControls.setPosition(-5, 2, 1, true)
    }}
  />
  <Button
    title="look at ( 3, 0, -3 )"
    on:click={() => {
      $cameraControls.setTarget(3, 0, -3, true)
    }}
  />
  <Button
    title="move to ( 1, 2, 3 ), look at ( 1, 1, 0 )"
    on:click={() => {
      $cameraControls.setLookAt(1, 2, 3, 1, 1, 0, true)
    }}
  />
  <Separator />
  <Button
    title="move to somewhere between ( -2, 0, 0 ) -> ( 1, 1, 0 ) and ( 0, 2, 5 ) -> ( -1, 0, 0 )"
    on:click={() => {
      $cameraControls.lerpLookAt(-2, 0, 0, 1, 1, 0, 0, 2, 5, -1, 0, 0, Math.random(), true)
    }}
  />
  <Separator />
  <Button
    title="reset"
    on:click={() => {
      $cameraControls.reset(true)
    }}
  />
  <Button
    title="saveState"
    on:click={() => {
      $cameraControls.saveState(true)
    }}
  />
  <Separator />
  <Button
    title="disable mouse/touch controls"
    on:click={() => {
      $cameraControls.enabled = false
    }}
  />
  <Button
    title="enable mouse/touch controls"
    on:click={() => {
      $cameraControls.enabled = true
    }}
  />
</Pane>

<div>
  <Canvas>
    <Scene />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script
  context="module"
  lang="ts"
>
  import { T, useTask, useParent, useThrelte, type Props } from '@threlte/core'
  import {
    Box3,
    Matrix4,
    Quaternion,
    Raycaster,
    Sphere,
    Spherical,
    Vector2,
    Vector3,
    Vector4,
    type PerspectiveCamera,
    MathUtils
  } from 'three'
  import CameraControls from 'camera-controls'

  CameraControls.install({
    THREE: {
      Vector2,
      Vector3,
      Vector4,
      Quaternion,
      Matrix4,
      Spherical,
      Box3,
      Sphere,
      Raycaster
    }
  })
</script>

<script lang="ts">
  interface CameraControlsProps extends Props<CameraControls> {
    ref: CameraControls
    autoRotate?: boolean
    autoRotateSpeed?: number
  }

  let {
    autoRotate = false,
    autoRotateSpeed = 1,
    ref = $bindable(),
    ...props
  }: CameraControlsProps = $props()

  const parent = useParent()

  if (!$parent) {
    throw new Error('CameraControls must be a child of a ThreeJS camera')
  }

  const { renderer, invalidate } = useThrelte()

  const controls = new CameraControls($parent as PerspectiveCamera, renderer.domElement)

  let disableAutoRotate = false

  useTask(
    (delta) => {
      if (autoRotate && !disableAutoRotate) {
        controls.azimuthAngle += 4 * delta * MathUtils.DEG2RAD * autoRotateSpeed
      }
      const updated = controls.update(delta)
      if (updated) invalidate()
    },
    {
      autoInvalidate: false
    }
  )
</script>

<T
  is={controls}
  bind:ref
  oncontrolstart={() => {
    disableAutoRotate = true
  }}
  onzoom={(event) => {
    console.log('zoomstart', event)
  }}
  oncontrolend={() => {
    disableAutoRotate = false
  }}
  {...props}
>
  <slot {ref} />
</T>

<script>
  import { T, useTask } from '@threlte/core'
  import { Grid } from '@threlte/extras'
  import CameraControls from './CameraControls.svelte'
  import { cameraControls, mesh } from './stores'
</script>

<T.PerspectiveCamera
  makeDefault
  position={[10, 10, 10]}
  oncreate={(ref) => {
    ref.lookAt(0, 1, 0)
  }}
>
  <CameraControls
    oncreate={(ref) => {
      $cameraControls = ref
    }}
  />
</T.PerspectiveCamera>

<T.DirectionalLight position={[3, 10, 7]} />

<T.Mesh
  position.y={1}
  oncreate={(ref) => {
    $mesh = ref
  }}
>
  <T.BoxGeometry args={[1, 1, 1]} />
  <T.MeshBasicMaterial
    color="red"
    wireframe={true}
  />
</T.Mesh>

<Grid
  sectionColor={'#ff3e00'}
  sectionThickness={1}
  cellColor={'#cccccc'}
  gridSize={40}
/>

import { writable } from 'svelte/store'

export const cameraControls = writable(undefined)
export const mesh = writable(undefined)

import { useThrelteUserContext } from '@threlte/core'
import { writable, type Writable } from 'svelte/store'
import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

type ControlsContext = {
  orbitControls: Writable<OrbitControls | undefined>
}

/**
 * ### `useControlsContext`
 *
 * This hook is used to register the `OrbitControls` instance with the
 * `ControlsContext`. We're using this context to enable and disable the
 * controls when the user is interacting with the TransformControls.
 */
export const useControlsContext = (): ControlsContext => {
  return useThrelteUserContext<ControlsContext>('threlte-controls', {
    orbitControls: writable<OrbitControls | undefined>(undefined)
  })
}