123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
- import * as RE from 'rogue-engine'
- import * as THREE from 'three'
- export default class TargetedOrbitCamera extends RE.Component {
- @RE.props.object3d() target
- @RE.props.checkbox() enableRotate = true
- @RE.props.num() rotateSpeed = 1.0
- // How far you can orbit horizontally, upper and lower limits.
- // If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
- @RE.props.num() minAzimuthAngle = - 6.28 // radians
- @RE.props.num() maxAzimuthAngle = 6.28 // radians
- // How far you can orbit vertically, upper and lower limits.
- // Range is 0 to Math.PI radians.
- @RE.props.num() minPolarAngle = 0 // radians
- @RE.props.num() maxPolarAngle = Math.PI // radians
- @RE.props.checkbox() enableDolly = true
- @RE.props.num() dollySpeed = 1.0
- @RE.props.num() minDistance = 1
- @RE.props.num() maxDistance = 50
- @RE.props.vector3() offset = new THREE.Vector3()
- @RE.props.num() rotateMouseButton = 2
- // @RE.props.checkbox() useCameraLock: boolean = false
- rotateStart = new THREE.Vector2()
- rotateEnd = new THREE.Vector2()
- rotateDelta = new THREE.Vector2()
- scale = 1
- EPS = 0.000001
- twoPI = 2 * Math.PI
- spherical = new THREE.Spherical()
- sphericalDelta = new THREE.Spherical()
- quat = new THREE.Quaternion().setFromUnitVectors( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 1, 0 ) )
- quatInverse = this.quat.clone().invert()
- lastPosition = new THREE.Vector3()
- lastQuaternion = new THREE.Quaternion()
- initialOffset = new THREE.Vector3()
-
- awake() {
- const container = document.getElementById(RE.Runtime.containerId)
- container?.addEventListener("mousedown", this.lock, false)
- container?.addEventListener("touchstart", this.lock, false)
- RE.Runtime.onStop(this.dispose)
- }
- start() {
- if(!this.target) {
- RE.Debug.logError("Orbit controls not set to an Object3D Target.")
- return
- }
- RE.Runtime.rogueDOMContainer.addEventListener('contextmenu', event => { event.preventDefault() })
-
- // so camera.up is the orbit axis
- this.quat = new THREE.Quaternion().setFromUnitVectors( this.object3d.up, new THREE.Vector3( 0, 1, 0 ) )
- this.quatInverse = this.quat.clone().invert()
- this.initialOffset.copy(this.object3d.position).sub(this.target.position)
- this.offset.copy(this.initialOffset)
- }
- update() {
- if(!this.target) {
- return
- }
- const useCameraLock = true//this.useCameraLock
-
- if(useCameraLock && !!document.pointerLockElement) {
- if(this.enableRotate && RE.Input.mouse.isMoving) {
- let normalizedScreenMovement = new THREE.Vector2(0,0)
- this.normalizeScreenMovement({x: RE.Input.mouse.movementX, y: RE.Input.mouse.movementY}, normalizedScreenMovement)
- this.rotateLeft(this.twoPI * normalizedScreenMovement.x)
-
- this.rotateUp(this.twoPI * -normalizedScreenMovement.y)
- }
- } else {
- let normalizedScreenPosition = new THREE.Vector2(0,0)
- this.normalizeScreenInput(RE.Input.mouse, normalizedScreenPosition)
- if(this.enableRotate && RE.Input.mouse.getButtonDown(this.rotateMouseButton)) {
- this.rotateStart.set( normalizedScreenPosition.x, normalizedScreenPosition.y )
- }
-
- if(this.enableRotate && RE.Input.mouse.getButtonPressed(this.rotateMouseButton)) {
- this.rotateEnd.set( normalizedScreenPosition.x, normalizedScreenPosition.y )
-
- this.rotateDelta.subVectors( this.rotateEnd, this.rotateStart ).multiplyScalar( this.rotateSpeed )
-
- this.rotateLeft(this.twoPI * this.rotateDelta.x)
-
- this.rotateUp(this.twoPI * -this.rotateDelta.y)
-
- this.rotateStart.copy( this.rotateEnd )
- }
- }
- if(this.enableDolly && RE.Input.mouse.wheelY > 0) {
- this.dollyOut()
- }
- if(this.enableDolly && RE.Input.mouse.wheelY < 0) {
- this.dollyIn()
- }
- this.updateCamera()
-
- if(useCameraLock && RE.Input.keyboard.getKeyPressed("Escape")) {
- this.unlock()
- }
- }
- dispose() {
- const container = document.getElementById(RE.Runtime.containerId)
- container?.removeEventListener("mousedown", this.lock, false)
- container?.removeEventListener("touchstart", this.lock, false)
- }
- rotateLeft(angle) {
- this.sphericalDelta.theta -= angle
- }
- rotateUp(angle) {
- this.sphericalDelta.phi -= angle
- }
- updateCamera() {
- // rotate offset to "y-axis-is-up" space
- this.offset.applyQuaternion(this.quat)
- // angle from z-axis around y-axis
- this.spherical.setFromVector3(this.offset)
- this.spherical.theta += this.sphericalDelta.theta
- this.spherical.phi += this.sphericalDelta.phi
- // restrict theta to be between desired limits
- let min = this.minAzimuthAngle
- let max = this.maxAzimuthAngle
- if ( isFinite(min) && isFinite(max) ) {
- if (min < -Math.PI) {
- min += this.twoPI
- } else if (min > Math.PI) {
- min -= this.twoPI
- }
- if (max < - Math.PI) {
- max += this.twoPI
- } else if (max > Math.PI) {
- max -= this.twoPI
- }
- if (min <= max) {
- this.spherical.theta = Math.max(min, Math.min(max, this.spherical.theta))
- } else {
- this.spherical.theta = (this.spherical.theta > (min + max) / 2 ) ?
- Math.max( min, this.spherical.theta ) :
- Math.min( max, this.spherical.theta )
- }
- }
- // restrict phi to be between desired limits
- this.spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.spherical.phi))
- this.spherical.makeSafe()
- this.spherical.radius *= this.scale
- // restrict radius to be between desired limits
- this.spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, this.spherical.radius))
- this.offset.setFromSpherical(this.spherical)
- // rotate offset back to "camera-up-vector-is-up" space
- this.offset.applyQuaternion(this.quatInverse)
- this.object3d.position.copy(this.target.position).add(this.offset)
- this.object3d.lookAt(this.target.position)
- this.sphericalDelta.set(0, 0, 0)
- this.scale = 1
- // update condition is:
- // min(camera displacement, camera rotation in radians)^2 > EPS
- // using small-angle approximation cos(x/2) = 1 - x^2 / 8
- if (this.lastPosition.distanceToSquared(this.object3d.position) > this.EPS ||
- 8 * (1 - this.lastQuaternion.dot(this.object3d.quaternion)) > this.EPS) {
- this.lastPosition.copy(this.object3d.position)
- this.lastQuaternion.copy(this.object3d.quaternion)
- }
- }
- dollyOut() {
- this.scale /= Math.pow(0.95, this.dollySpeed)
- }
- dollyIn() {
- this.scale *= Math.pow(0.95, this.dollySpeed)
- }
- normalizeScreenInput(browserVector, gameVector) {
- const bounds = RE.Runtime.rogueDOMContainer.getBoundingClientRect()
- gameVector.x = ((browserVector.x - bounds.left) / bounds.width) * 2 - 1
- gameVector.y = -((browserVector.y - bounds.top) / bounds.height) * 2 + 1
- }
- normalizeScreenMovement(browserVector, gameVector) {
- const bounds = RE.Runtime.rogueDOMContainer.getBoundingClientRect()
- gameVector.x = (browserVector.x / bounds.width)
- gameVector.y = -(browserVector.y / bounds.height)
- }
- lock() {
- const useCameraLock = true//this.useCameraLock
- console.log("attempting camera lock", useCameraLock)
- if(!useCameraLock) {
- return
- }
- console.log("locking camera")
- RE.Input.mouse.lock()
- }
- unlock() {
- const useCameraLock = true//this.useCameraLock
- if(!useCameraLock) {
- return
- }
- RE.Input.mouse.unlock()
- }
- }
- RE.registerComponent(TargetedOrbitCamera)
|