Skip to content

Commit

Permalink
fix: use camera's z position as default distance in CameraControls
Browse files Browse the repository at this point in the history
  • Loading branch information
@notarun
notarun committed Sep 20, 2023
1 parent fe78ae1 commit 8a62a43
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 31 deletions.
58 changes: 29 additions & 29 deletions docs/guide/controls/camera-controls.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,35 +31,35 @@ Is really important that the Perspective camera is set first in the canvas. Othe

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. | `8` |
| **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. | `[]` |
| 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

Expand Down
2 changes: 1 addition & 1 deletion playground/src/pages/controls/CameraControlsDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const gl = {
}
const controlsState = reactive({
distance: 8,
distance: 5,
minDistance: 0,
maxDistance: 100,
})
Expand Down
3 changes: 2 additions & 1 deletion src/core/controls/CameraControls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ const props = withDefaults(defineProps<CameraControlsProps>(), {
maxPolarAngle: Math.PI,
minAzimuthAngle: -Infinity,
maxAzimuthAngle: Infinity,
distance: 8,
distance: () => useTresContext().camera.value!.position.z,
minDistance: Number.EPSILON,
maxDistance: Infinity,
infinityDolly: false,
Expand Down Expand Up @@ -374,6 +374,7 @@ const subsetOfTHREE = {
CameraControls.install({ THREE: subsetOfTHREE })
const { camera: activeCamera, renderer, extend, controls } = useTresContext()
const controlsRef = ref<CameraControls | null>(null)
extend({ CameraControls })
Expand Down

0 comments on commit 8a62a43

Please sign in to comment.