<TrackballControls>

<TrackballControls> allow the camera to orbit freely around a target without causing gimbal lock. This type of camera controller is commonly used when the concepts of up and down are less important than the ability to carefully inspect a model from every angle. For an alternative camera controller, see <OrbitControls>.

The component <TrackballControls> must be a direct child of a camera component and will mount itself to that camera. By default, damping is enabled. You can disable this by setting staticMoving to true.

Unlike <OrbitControls>, <TrackballControls> does not support autoRotate.

Show Code

• App.svelte
• Scene.svelte
• Settings.svelte

<script lang="ts">
  import { Canvas } from '@threlte/core'

  import Scene from './Scene.svelte'
  import Settings from './Settings.svelte'

  let staticMoving: boolean = false
  let noRotate: boolean = false
  let rotateSpeed: number = 1
  let noZoom: boolean = false
  let zoomSpeed: number = 1.2
  let noPan: boolean = false
  let panSpeed: number = 0.3
</script>

<div>
  <Canvas>
    <Scene
      {staticMoving}
      {noRotate}
      {rotateSpeed}
      {noZoom}
      {zoomSpeed}
      {noPan}
      {panSpeed}
    />
  </Canvas>
</div>

<Settings
  bind:staticMoving
  bind:noRotate
  bind:rotateSpeed
  bind:noZoom
  bind:zoomSpeed
  bind:noPan
  bind:panSpeed
/>

<style>
  div {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgb(14, 22, 37);
  }
</style>

<script lang="ts">
  import { T } from '@threlte/core'
  import { Gizmo, TrackballControls } from '@threlte/extras'

  import { BoxGeometry, MeshStandardMaterial } from 'three'

  export let staticMoving: boolean
  export let noRotate: boolean
  export let rotateSpeed: number
  export let noZoom: boolean
  export let zoomSpeed: number
  export let noPan: boolean
  export let panSpeed: number
</script>

<T.PerspectiveCamera
  makeDefault
  position={[10, 5, 10]}
  lookAt.y={0.5}
>
  <TrackballControls
    {staticMoving}
    {noRotate}
    {rotateSpeed}
    {noZoom}
    {zoomSpeed}
    {noPan}
    {panSpeed}
  >
    <Gizmo />
  </TrackballControls>
</T.PerspectiveCamera>

<T.DirectionalLight
  position.y={10}
  position.z={10}
/>
<T.AmbientLight intensity={0.3} />

<T.GridHelper args={[10, 10]} />

<T.Mesh
  position.y={1}
  geometry={new BoxGeometry(2, 2, 2)}
  material={new MeshStandardMaterial()}
/>

<script lang="ts">
  import { Checkbox, Pane, ThemeUtils, Slider } from 'svelte-tweakpane-ui'

  export let staticMoving: boolean
  export let noRotate: boolean
  export let rotateSpeed: number
  export let noZoom: boolean
  export let zoomSpeed: number
  export let noPan: boolean
  export let panSpeed: number
</script>

<Pane
  theme={ThemeUtils.presets.light}
  position="fixed"
  title="TrackballControls"
>
  <Checkbox
    bind:value={staticMoving}
    label="staticMoving"
  />
  <Checkbox
    bind:value={noRotate}
    label="noRotate"
  />
  <Checkbox
    bind:value={noPan}
    label="noPan"
  />
  <Checkbox
    bind:value={noZoom}
    label="noZoom"
  />

  <Slider
    label="rotateSpeed"
    bind:value={rotateSpeed}
    min={0.1}
    max={2}
    step={0.1}
  />
  <Slider
    label="panSpeed"
    bind:value={panSpeed}
    min={0.05}
    max={1.0}
    step={0.05}
  />
  <Slider
    label="zoomSpeed"
    bind:value={zoomSpeed}
    min={0.1}
    max={2}
    step={0.1}
  />
</Pane>

This example shows off just a few of the configurable properties of <TrackballControls>. To see all 15+ properties, consult the Three.js docs.

Usage

<script>
  import { TrackballControls } from '@threlte/extras'
  import { T } from '@threlte/core'
</script>

<T.PerspectiveCamera
  makeDefault
  fov={50}
>
  <TrackballControls />
</T.PerspectiveCamera>

<TrackballControls> is a light wrapper that will use its parent as the target camera and the DOM element the renderer is rendering to as the DOM element to listen to. It will also by demand invalidate the frame loop.

Component Signature

<TrackballControls> extends < T . TrackballControls > and supports all its props, snippets, bindings and events.