CientosCameraControls ^3.2.0
CameraControls is a camera controller similar to OrbitControls yet supports smooth transitions and more features.
However, it is thirty party library for ThreeJS. So to use it you would need to install and import using npm.
Here is where the fancy part begins. ✨ The cientos package provides a component called <CameraControls /> that is a wrapper of the CameraControls from the camera-controls module.
The nicest part? You don't need to extend the catalog or pass any arguments. It just works. 💯
Usage
vue
<script setup lang="ts">
import { reactive } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { CameraControls, Box } from '@tresjs/cientos'
const controlsState = reactive({
minDistance: 0,
maxDistance: 100,
})
</script>
<template>
<TresCanvas clear-color="#82DBC5">
<TresPerspectiveCamera :position="[5, 5, 5]" />
<CameraControls
v-bind="controlsState"
make-default
/>
<TresGridHelper :position="[0, -1, 0]" />
<Box :scale="2">
<TresMeshToonMaterial color="orange" />
</Box>
<TresAmbientLight />
<TresDirectionalLight :position="[0, 2, 4]" />
</TresCanvas>
</template><script setup lang="ts">
import { reactive } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { CameraControls, Box } from '@tresjs/cientos'
const controlsState = reactive({
minDistance: 0,
maxDistance: 100,
})
</script>
<template>
<TresCanvas clear-color="#82DBC5">
<TresPerspectiveCamera :position="[5, 5, 5]" />
<CameraControls
v-bind="controlsState"
make-default
/>
<TresGridHelper :position="[0, -1, 0]" />
<Box :scale="2">
<TresMeshToonMaterial color="orange" />
</Box>
<TresAmbientLight />
<TresDirectionalLight :position="[0, 2, 4]" />
</TresCanvas>
</template>WARNING
Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
Props
Certainly! Here's the properties of the object in raw markdown table format:
| Prop | Description | Default |
|---|---|---|
| makeDefault | Whether to make this the default controls. | false |
| camera | The camera to control. | undefined |
| domElement | The DOM element to listen to. | undefined |
| minPolarAngle | Minimum vertical angle in radians. | 0 |
| maxPolarAngle | Maximum vertical angle in radians. | Math.PI |
| minAzimuthAngle | Minimum horizontal angle in radians. | -Infinity |
| maxAzimuthAngle | Maximum horizontal angle in radians. | Infinity |
| distance | Current distance. | camera.position.z |
| minDistance | Minimum distance for dolly. PerspectiveCamera only. | Number.EPSILON |
| maxDistance | Maximum distance for dolly. PerspectiveCamera only. | Infinity |
| infinityDolly | true to enable Infinity Dolly for wheel and pinch. | false |
| minZoom | Minimum camera zoom. | 0.01 |
| maxZoom | Maximum camera zoom. | Infinity |
| smoothTime | Approximate time in seconds to reach the target. A smaller value will reach the target faster. | 0.25 |
| draggingSmoothTime | The smoothTime while dragging. | 0.125 |
| maxSpeed | Max transition speed in units per second. | Infinity |
| azimuthRotateSpeed | Speed of azimuth (horizontal) rotation. | 1.0 |
| polarRotateSpeed | Speed of polar (vertical) rotation. | 1.0 |
| dollySpeed | Speed of mouse-wheel dollying. | 1.0 |
| dollyDragInverted | true to invert direction when dollying or zooming via drag. | false |
| truckSpeed | Speed of drag for truck and pedestal. | 2.0 |
| dollyToCursor | true to enable Dolly-in to the mouse cursor coords. | false |
| dragToOffset | Whether to drag to offset. | false |
| verticalDragToForward | The same as .screenSpacePanning in three.js's OrbitControls. | false |
| boundaryFriction | Friction ratio of the boundary. | 0.0 |
| restThreshold | Controls how soon the rest event fires as the camera slows. | 0.01 |
| colliderMeshes | An array of Meshes to collide with the camera. Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners. | [] |
Events
vue
<CameraControls @change="onChange" @start="onStart" @end="onEnd" /><CameraControls @change="onChange" @start="onStart" @end="onEnd" />| Event | Description |
|---|---|
| start | Dispatched when the control starts to change. |
| change | Dispatched when the control changes. |
| end | Dispatched when the control ends to change. |