shipshot/Assets/Components/TargetedOrbitCamera.re.ts

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 // 2 PI radians
	@RE.props.num() maxAzimuthAngle = 6.28 // -2 PI 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 = 1.56 // 0.5 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 = 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() {
	if(this.useCameraLock) {
		const container = document.getElementById(RE.Runtime.containerId)
		// container?.addEventListener("mousedown", this.lock.bind(this), false)
		if(container) {
			container.onmousedown = this.lock.bind(this)
			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
	}
	
	if(this.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(this.useCameraLock && RE.Input.keyboard.getKeyPressed("Escape")) {
		this.unlock()
	}
}

	dispose() {
		const container = document.getElementById(RE.Runtime.containerId)
		if(container) {
			// container?.removeEventListener("mousedown", this.lock)
			container.onmousedown = null
		}
	}

	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() {
	if(!this.useCameraLock) {
		return
	}
	RE.Input.mouse.lock()
  }

  unlock() {
	if(!this.useCameraLock) {
		return
	}
	RE.Input.mouse.unlock()
  }
}

RE.registerComponent(TargetedOrbitCamera)