@threlte/extras
<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.
<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}
/>
</T.PerspectiveCamera>
<Gizmo
horizontalPlacement="left"
paddingX={20}
paddingY={20}
/>
<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, slot props, bindings and events.