|
@@ -8,224 +8,224 @@ import { useEventListener } from '@vueuse/core'
|
|
|
|
|
|
export interface OrbitControlsProps {
|
|
export interface OrbitControlsProps {
|
|
/**
|
|
/**
|
|
- * Whether to make this the default controls.
|
|
|
|
- *
|
|
|
|
- * @default false
|
|
|
|
- * @type {boolean}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- */
|
|
|
|
|
|
+ * Whether to make this the default controls.
|
|
|
|
+ *
|
|
|
|
+ * @default false
|
|
|
|
+ * @type {boolean}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ */
|
|
makeDefault?: boolean
|
|
makeDefault?: boolean
|
|
/**
|
|
/**
|
|
- * The camera to control.
|
|
|
|
- *
|
|
|
|
- * @type {Camera}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
|
|
|
|
- */
|
|
|
|
|
|
+ * The camera to control.
|
|
|
|
+ *
|
|
|
|
+ * @type {Camera}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
|
|
|
|
+ */
|
|
camera?: Camera
|
|
camera?: Camera
|
|
/**
|
|
/**
|
|
- * The dom element to listen to.
|
|
|
|
- *
|
|
|
|
- * @type {HTMLElement}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
|
|
|
|
- */
|
|
|
|
|
|
+ * The dom element to listen to.
|
|
|
|
+ *
|
|
|
|
+ * @type {HTMLElement}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
|
|
|
|
+ */
|
|
domElement?: HTMLElement
|
|
domElement?: HTMLElement
|
|
/**
|
|
/**
|
|
- * The target to orbit around.
|
|
|
|
- *
|
|
|
|
- * @type {TresVector3}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
|
|
|
|
- */
|
|
|
|
|
|
+ * The target to orbit around.
|
|
|
|
+ *
|
|
|
|
+ * @type {TresVector3}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
|
|
|
|
+ */
|
|
target?: TresVector3
|
|
target?: TresVector3
|
|
/**
|
|
/**
|
|
- * Whether to enable damping (inertia)
|
|
|
|
- *
|
|
|
|
- * @default false
|
|
|
|
- * @type {boolean}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
|
|
|
|
- */
|
|
|
|
|
|
+ * Whether to enable damping (inertia)
|
|
|
|
+ *
|
|
|
|
+ * @default false
|
|
|
|
+ * @type {boolean}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
|
|
|
|
+ */
|
|
enableDamping?: boolean
|
|
enableDamping?: boolean
|
|
/**
|
|
/**
|
|
- * The damping inertia used if `.enableDamping` is set to true
|
|
|
|
- *
|
|
|
|
- * @default 0.05
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
|
|
|
|
- */
|
|
|
|
|
|
+ * The damping inertia used if `.enableDamping` is set to true
|
|
|
|
+ *
|
|
|
|
+ * @default 0.05
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
|
|
|
|
+ */
|
|
dampingFactor?: number
|
|
dampingFactor?: number
|
|
/**
|
|
/**
|
|
- * Set to true to automatically rotate around the target.
|
|
|
|
- *
|
|
|
|
- * @default false
|
|
|
|
- * @type {boolean}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
|
|
|
|
- */
|
|
|
|
|
|
+ * Set to true to automatically rotate around the target.
|
|
|
|
+ *
|
|
|
|
+ * @default false
|
|
|
|
+ * @type {boolean}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
|
|
|
|
+ */
|
|
autoRotate?: boolean
|
|
autoRotate?: boolean
|
|
/**
|
|
/**
|
|
- * How fast to rotate around the target if `.autoRotate` is true.
|
|
|
|
- *
|
|
|
|
- * @default 2
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
|
|
|
|
- */
|
|
|
|
|
|
+ * How fast to rotate around the target if `.autoRotate` is true.
|
|
|
|
+ *
|
|
|
|
+ * @default 2
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
|
|
|
|
+ */
|
|
autoRotateSpeed?: number
|
|
autoRotateSpeed?: number
|
|
/**
|
|
/**
|
|
- * Whether to enable panning.
|
|
|
|
- *
|
|
|
|
- * @default true
|
|
|
|
- * @type {boolean}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
|
|
|
|
- */
|
|
|
|
|
|
+ * Whether to enable panning.
|
|
|
|
+ *
|
|
|
|
+ * @default true
|
|
|
|
+ * @type {boolean}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
|
|
|
|
+ */
|
|
enablePan?: boolean
|
|
enablePan?: boolean
|
|
/**
|
|
/**
|
|
- * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
|
|
|
|
- *
|
|
|
|
- * @default 7.0
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
|
|
|
|
- */
|
|
|
|
|
|
+ * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
|
|
|
|
+ *
|
|
|
|
+ * @default 7.0
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
|
|
|
|
+ */
|
|
keyPanSpeed?: number
|
|
keyPanSpeed?: number
|
|
/**
|
|
/**
|
|
- * This object contains references to the keycodes for controlling camera panning.
|
|
|
|
- * Default is the 4 arrow keys.
|
|
|
|
- *
|
|
|
|
- * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
|
|
|
|
- * @type Record<string, string>
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
|
|
|
|
- */
|
|
|
|
|
|
+ * This object contains references to the keycodes for controlling camera panning.
|
|
|
|
+ * Default is the 4 arrow keys.
|
|
|
|
+ *
|
|
|
|
+ * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
|
|
|
|
+ * @type Record<string, string>
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
|
|
|
|
+ */
|
|
keys?: Record<string, string>
|
|
keys?: Record<string, string>
|
|
/**
|
|
/**
|
|
- * How far you can orbit horizontally, upper limit.
|
|
|
|
- * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
|
|
|
|
- * with ( max - min < 2 PI ). Default is Infinity.
|
|
|
|
- *
|
|
|
|
- * @default Infinity
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
|
|
|
|
- */
|
|
|
|
|
|
+ * How far you can orbit horizontally, upper limit.
|
|
|
|
+ * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
|
|
|
|
+ * with ( max - min < 2 PI ). Default is Infinity.
|
|
|
|
+ *
|
|
|
|
+ * @default Infinity
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
|
|
|
|
+ */
|
|
maxAzimuthAngle?: number
|
|
maxAzimuthAngle?: number
|
|
/**
|
|
/**
|
|
- * How far you can orbit horizontally, lower limit.
|
|
|
|
- * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
|
|
|
|
- * with ( max - min < 2 PI ).
|
|
|
|
- * Default is - Infinity.
|
|
|
|
- *
|
|
|
|
- * @default -Infinity
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
|
|
|
|
- */
|
|
|
|
|
|
+ * How far you can orbit horizontally, lower limit.
|
|
|
|
+ * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
|
|
|
|
+ * with ( max - min < 2 PI ).
|
|
|
|
+ * Default is - Infinity.
|
|
|
|
+ *
|
|
|
|
+ * @default -Infinity
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
|
|
|
|
+ */
|
|
minAzimuthAngle?: number
|
|
minAzimuthAngle?: number
|
|
/**
|
|
/**
|
|
- * How far you can orbit vertically, upper limit.
|
|
|
|
- * Range is 0 to Math.PI radians, and default is Math.PI.
|
|
|
|
- *
|
|
|
|
- * @default Math.PI
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
|
|
|
|
- */
|
|
|
|
|
|
+ * How far you can orbit vertically, upper limit.
|
|
|
|
+ * Range is 0 to Math.PI radians, and default is Math.PI.
|
|
|
|
+ *
|
|
|
|
+ * @default Math.PI
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
|
|
|
|
+ */
|
|
maxPolarAngle?: number
|
|
maxPolarAngle?: number
|
|
/**
|
|
/**
|
|
- * How far you can orbit vertically, lower limit.
|
|
|
|
- * Range is 0 to Math.PI radians, and default is 0.
|
|
|
|
- *
|
|
|
|
- * @default 0
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
|
|
|
|
- */
|
|
|
|
|
|
+ * How far you can orbit vertically, lower limit.
|
|
|
|
+ * Range is 0 to Math.PI radians, and default is 0.
|
|
|
|
+ *
|
|
|
|
+ * @default 0
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
|
|
|
|
+ */
|
|
minPolarAngle?: number
|
|
minPolarAngle?: number
|
|
/**
|
|
/**
|
|
- * The minimum distance of the camera to the target.
|
|
|
|
- * Default is 0.
|
|
|
|
- *
|
|
|
|
- * @default 0
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
|
|
|
|
- */
|
|
|
|
|
|
+ * The minimum distance of the camera to the target.
|
|
|
|
+ * Default is 0.
|
|
|
|
+ *
|
|
|
|
+ * @default 0
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
|
|
|
|
+ */
|
|
minDistance?: number
|
|
minDistance?: number
|
|
/**
|
|
/**
|
|
- * The maximum distance of the camera to the target.
|
|
|
|
- * Default is Infinity.
|
|
|
|
- *
|
|
|
|
- * @default Infinity
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
|
|
|
|
- */
|
|
|
|
|
|
+ * The maximum distance of the camera to the target.
|
|
|
|
+ * Default is Infinity.
|
|
|
|
+ *
|
|
|
|
+ * @default Infinity
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
|
|
|
|
+ */
|
|
maxDistance?: number
|
|
maxDistance?: number
|
|
/**
|
|
/**
|
|
- * The minimum field of view angle, in radians.
|
|
|
|
- * Default is 0.
|
|
|
|
- *
|
|
|
|
- * @default 0
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
|
|
|
|
- */
|
|
|
|
|
|
+ * The minimum field of view angle, in radians.
|
|
|
|
+ * Default is 0.
|
|
|
|
+ *
|
|
|
|
+ * @default 0
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
|
|
|
|
+ */
|
|
minZoom?: number
|
|
minZoom?: number
|
|
/**
|
|
/**
|
|
- * The maximum field of view angle, in radians.
|
|
|
|
- * ( OrthographicCamera only ).
|
|
|
|
- * Default is Infinity.
|
|
|
|
- *
|
|
|
|
- * @default Infinity
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
|
|
|
|
- */
|
|
|
|
|
|
+ * The maximum field of view angle, in radians.
|
|
|
|
+ * ( OrthographicCamera only ).
|
|
|
|
+ * Default is Infinity.
|
|
|
|
+ *
|
|
|
|
+ * @default Infinity
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
|
|
|
|
+ */
|
|
maxZoom?: number
|
|
maxZoom?: number
|
|
touches?: {
|
|
touches?: {
|
|
ONE?: number
|
|
ONE?: number
|
|
TWO?: number
|
|
TWO?: number
|
|
}
|
|
}
|
|
/**
|
|
/**
|
|
- * Whether to enable zooming.
|
|
|
|
- *
|
|
|
|
- * @default true
|
|
|
|
- * @type {boolean}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
|
|
|
|
- */
|
|
|
|
|
|
+ * Whether to enable zooming.
|
|
|
|
+ *
|
|
|
|
+ * @default true
|
|
|
|
+ * @type {boolean}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
|
|
|
|
+ */
|
|
enableZoom?: boolean
|
|
enableZoom?: boolean
|
|
/**
|
|
/**
|
|
- * How fast to zoom in and out. Default is 1.
|
|
|
|
- *
|
|
|
|
- * @default 1
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
|
|
|
|
- */
|
|
|
|
|
|
+ * How fast to zoom in and out. Default is 1.
|
|
|
|
+ *
|
|
|
|
+ * @default 1
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
|
|
|
|
+ */
|
|
zoomSpeed?: number
|
|
zoomSpeed?: number
|
|
/**
|
|
/**
|
|
- * Whether to enable rotating.
|
|
|
|
- *
|
|
|
|
- * @default true
|
|
|
|
- * @type {boolean}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
|
|
|
|
- */
|
|
|
|
|
|
+ * Whether to enable rotating.
|
|
|
|
+ *
|
|
|
|
+ * @default true
|
|
|
|
+ * @type {boolean}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
|
|
|
|
+ */
|
|
enableRotate?: boolean
|
|
enableRotate?: boolean
|
|
/**
|
|
/**
|
|
- * How fast to rotate around the target. Default is 1.
|
|
|
|
- *
|
|
|
|
- * @default 1
|
|
|
|
- * @type {number}
|
|
|
|
- * @memberof OrbitControlsProps
|
|
|
|
- * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
|
|
|
|
- */
|
|
|
|
|
|
+ * How fast to rotate around the target. Default is 1.
|
|
|
|
+ *
|
|
|
|
+ * @default 1
|
|
|
|
+ * @type {number}
|
|
|
|
+ * @memberof OrbitControlsProps
|
|
|
|
+ * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
|
|
|
|
+ */
|
|
rotateSpeed?: number
|
|
rotateSpeed?: number
|
|
}
|
|
}
|
|
|
|
|
|
@@ -285,11 +285,6 @@ onUnmounted(() => {
|
|
controls.value.dispose()
|
|
controls.value.dispose()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
-
|
|
|
|
-watchEffect(() => {
|
|
|
|
- console.log('activeCamera', activeCamera.value)
|
|
|
|
- console.log('renderer', renderer.value)
|
|
|
|
-})
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|