@threlte/extras
<OrbitControls>
<OrbitControls> allow the camera to orbit around a target while ensuring a
fixed camera up vector. If the camera orbits over the “north” or “south” poles,
the camera experiences a “gimbal lock” that forces the scene to rotate until it
is rightside up. This type of camera control is commonly used for showing off 3D
models of products because it prevents them from ever appearing upside down. For
an alternative camera controller, see
<TrackballControls>.
The <OrbitControls> component must be a direct child of a camera component and
will mount itself to that camera.
<script lang="ts">
import { Canvas } from '@threlte/core'
import Scene from './Scene.svelte'
import Settings from './Settings.svelte'
let autoRotate: boolean = false
let enableDamping: boolean = true
let rotateSpeed: number = 1
let zoomToCursor: boolean = false
let zoomSpeed: number = 1
let minPolarAngle: number = 0
let maxPolarAngle: number = Math.PI
let enableZoom: boolean = true
</script>
<div>
<Canvas>
<Scene
{enableDamping}
{autoRotate}
{rotateSpeed}
{zoomToCursor}
{zoomSpeed}
{minPolarAngle}
{maxPolarAngle}
{enableZoom}
/>
</Canvas>
</div>
<Settings
bind:enableDamping
bind:autoRotate
bind:rotateSpeed
bind:zoomToCursor
bind:zoomSpeed
bind:minPolarAngle
bind:maxPolarAngle
bind:enableZoom
/>
<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, OrbitControls } from '@threlte/extras'
import { BoxGeometry, MeshStandardMaterial } from 'three'
export let autoRotate: boolean
export let enableDamping: boolean
export let rotateSpeed: number
export let zoomToCursor: boolean
export let zoomSpeed: number
export let minPolarAngle: number
export let maxPolarAngle: number
export let enableZoom: boolean
</script>
<T.PerspectiveCamera
makeDefault
position={[10, 5, 10]}
lookAt.y={0.5}
>
<OrbitControls
{enableDamping}
{autoRotate}
{rotateSpeed}
{zoomToCursor}
{zoomSpeed}
{minPolarAngle}
{maxPolarAngle}
{enableZoom}
/>
</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 autoRotate: boolean
export let enableDamping: boolean
export let rotateSpeed: number
export let zoomToCursor: boolean
export let zoomSpeed: number
export let minPolarAngle: number
export let maxPolarAngle: number
export let enableZoom: boolean
</script>
<Pane
theme={ThemeUtils.presets.light}
position="fixed"
title="OrbitControls"
>
<Checkbox
bind:value={autoRotate}
label="autoRotate"
/>
<Checkbox
bind:value={enableDamping}
label="enableDamping"
/>
<Checkbox
bind:value={enableZoom}
label="enableZoom"
/>
<Checkbox
bind:value={zoomToCursor}
label="zoomToCursor"
/>
<Slider
label="rotateSpeed"
bind:value={rotateSpeed}
min={0.1}
max={2}
step={0.1}
/>
<Slider
label="zoomSpeed"
bind:value={zoomSpeed}
min={0.1}
max={2}
step={0.1}
/>
<Slider
label="minPolarAngle"
bind:value={minPolarAngle}
min={0}
max={Math.PI}
step={0.1}
/>
<Slider
label="maxPolarAngle"
bind:value={maxPolarAngle}
min={0}
max={Math.PI}
step={0.1}
/>
</Pane>This example shows off just a few of the configurable properties of
<OrbitControls>. To see all 30+ properties, consult the Three.js
docs.
Usage
<script>
import { OrbitControls } from '@threlte/extras'
import { T } from '@threlte/core'
</script>
<T.PerspectiveCamera
makeDefault
fov={50}
>
<OrbitControls enableDamping />
</T.PerspectiveCamera><OrbitControls> 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 pointer events.
Component Signature
<OrbitControls> extends
<T.OrbitControls>
and supports all its props, slot props, bindings and events.