import * as RE from 'rogue-engine' import * as THREE from 'three' export default class OrbitCamera extends RE.Component { @RE.Prop("Object3D") target rotateStart = new THREE.Vector2() rotateEnd = new THREE.Vector2() rotateDelta = new THREE.Vector2() @RE.Prop("Boolean") enableRotate = true @RE.Prop("Number") 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.Prop("Number") minAzimuthAngle = - Infinity // radians @RE.Prop("Number") maxAzimuthAngle = Infinity // radians // How far you can orbit vertically, upper and lower limits. // Range is 0 to Math.PI radians. @RE.Prop("Number") minPolarAngle = 0 // radians @RE.Prop("Number") maxPolarAngle = Math.PI // radians @RE.Prop("Boolean") enableDolly = true @RE.Prop("Number") dollySpeed = 1.0 @RE.Prop("Number") minDistance = 1 @RE.Prop("Number") maxDistance = 50 scale = 1 EPS = 0.000001 twoPI = 2 * Math.PI spherical = new THREE.Spherical() sphericalDelta = new THREE.Spherical() @RE.Prop("Vector3") offset = new THREE.Vector3() @RE.Prop("Number") rotateMouseButton = 2 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() { } start() { 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() { 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() } 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 } } RE.registerComponent(OrbitCamera)