TargetedOrbitCamera.re.ts 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. import * as RE from 'rogue-engine'
  2. import * as THREE from 'three'
  3. export default class TargetedOrbitCamera extends RE.Component {
  4. @RE.props.object3d() target
  5. @RE.props.checkbox() enableRotate = true
  6. @RE.props.num() rotateSpeed = 1.0
  7. // How far you can orbit horizontally, upper and lower limits.
  8. // If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
  9. @RE.props.num() minAzimuthAngle = - 6.28 // radians
  10. @RE.props.num() maxAzimuthAngle = 6.28 // radians
  11. // How far you can orbit vertically, upper and lower limits.
  12. // Range is 0 to Math.PI radians.
  13. @RE.props.num() minPolarAngle = 0 // radians
  14. @RE.props.num() maxPolarAngle = Math.PI // radians
  15. @RE.props.checkbox() enableDolly = true
  16. @RE.props.num() dollySpeed = 1.0
  17. @RE.props.num() minDistance = 1
  18. @RE.props.num() maxDistance = 50
  19. @RE.props.vector3() offset = new THREE.Vector3()
  20. @RE.props.num() rotateMouseButton = 2
  21. // @RE.props.checkbox() useCameraLock: boolean = false
  22. rotateStart = new THREE.Vector2()
  23. rotateEnd = new THREE.Vector2()
  24. rotateDelta = new THREE.Vector2()
  25. scale = 1
  26. EPS = 0.000001
  27. twoPI = 2 * Math.PI
  28. spherical = new THREE.Spherical()
  29. sphericalDelta = new THREE.Spherical()
  30. quat = new THREE.Quaternion().setFromUnitVectors( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 1, 0 ) )
  31. quatInverse = this.quat.clone().invert()
  32. lastPosition = new THREE.Vector3()
  33. lastQuaternion = new THREE.Quaternion()
  34. initialOffset = new THREE.Vector3()
  35. awake() {
  36. const container = document.getElementById(RE.Runtime.containerId)
  37. container?.addEventListener("mousedown", this.lock, false)
  38. container?.addEventListener("touchstart", this.lock, false)
  39. RE.Runtime.onStop(this.dispose)
  40. }
  41. start() {
  42. if(!this.target) {
  43. RE.Debug.logError("Orbit controls not set to an Object3D Target.")
  44. return
  45. }
  46. RE.Runtime.rogueDOMContainer.addEventListener('contextmenu', event => { event.preventDefault() })
  47. // so camera.up is the orbit axis
  48. this.quat = new THREE.Quaternion().setFromUnitVectors( this.object3d.up, new THREE.Vector3( 0, 1, 0 ) )
  49. this.quatInverse = this.quat.clone().invert()
  50. this.initialOffset.copy(this.object3d.position).sub(this.target.position)
  51. this.offset.copy(this.initialOffset)
  52. }
  53. update() {
  54. if(!this.target) {
  55. return
  56. }
  57. const useCameraLock = true//this.useCameraLock
  58. if(useCameraLock && !!document.pointerLockElement) {
  59. if(this.enableRotate && RE.Input.mouse.isMoving) {
  60. let normalizedScreenMovement = new THREE.Vector2(0,0)
  61. this.normalizeScreenMovement({x: RE.Input.mouse.movementX, y: RE.Input.mouse.movementY}, normalizedScreenMovement)
  62. this.rotateLeft(this.twoPI * normalizedScreenMovement.x)
  63. this.rotateUp(this.twoPI * -normalizedScreenMovement.y)
  64. }
  65. } else {
  66. let normalizedScreenPosition = new THREE.Vector2(0,0)
  67. this.normalizeScreenInput(RE.Input.mouse, normalizedScreenPosition)
  68. if(this.enableRotate && RE.Input.mouse.getButtonDown(this.rotateMouseButton)) {
  69. this.rotateStart.set( normalizedScreenPosition.x, normalizedScreenPosition.y )
  70. }
  71. if(this.enableRotate && RE.Input.mouse.getButtonPressed(this.rotateMouseButton)) {
  72. this.rotateEnd.set( normalizedScreenPosition.x, normalizedScreenPosition.y )
  73. this.rotateDelta.subVectors( this.rotateEnd, this.rotateStart ).multiplyScalar( this.rotateSpeed )
  74. this.rotateLeft(this.twoPI * this.rotateDelta.x)
  75. this.rotateUp(this.twoPI * -this.rotateDelta.y)
  76. this.rotateStart.copy( this.rotateEnd )
  77. }
  78. }
  79. if(this.enableDolly && RE.Input.mouse.wheelY > 0) {
  80. this.dollyOut()
  81. }
  82. if(this.enableDolly && RE.Input.mouse.wheelY < 0) {
  83. this.dollyIn()
  84. }
  85. this.updateCamera()
  86. if(useCameraLock && RE.Input.keyboard.getKeyPressed("Escape")) {
  87. this.unlock()
  88. }
  89. }
  90. dispose() {
  91. const container = document.getElementById(RE.Runtime.containerId)
  92. container?.removeEventListener("mousedown", this.lock, false)
  93. container?.removeEventListener("touchstart", this.lock, false)
  94. }
  95. rotateLeft(angle) {
  96. this.sphericalDelta.theta -= angle
  97. }
  98. rotateUp(angle) {
  99. this.sphericalDelta.phi -= angle
  100. }
  101. updateCamera() {
  102. // rotate offset to "y-axis-is-up" space
  103. this.offset.applyQuaternion(this.quat)
  104. // angle from z-axis around y-axis
  105. this.spherical.setFromVector3(this.offset)
  106. this.spherical.theta += this.sphericalDelta.theta
  107. this.spherical.phi += this.sphericalDelta.phi
  108. // restrict theta to be between desired limits
  109. let min = this.minAzimuthAngle
  110. let max = this.maxAzimuthAngle
  111. if ( isFinite(min) && isFinite(max) ) {
  112. if (min < -Math.PI) {
  113. min += this.twoPI
  114. } else if (min > Math.PI) {
  115. min -= this.twoPI
  116. }
  117. if (max < - Math.PI) {
  118. max += this.twoPI
  119. } else if (max > Math.PI) {
  120. max -= this.twoPI
  121. }
  122. if (min <= max) {
  123. this.spherical.theta = Math.max(min, Math.min(max, this.spherical.theta))
  124. } else {
  125. this.spherical.theta = (this.spherical.theta > (min + max) / 2 ) ?
  126. Math.max( min, this.spherical.theta ) :
  127. Math.min( max, this.spherical.theta )
  128. }
  129. }
  130. // restrict phi to be between desired limits
  131. this.spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.spherical.phi))
  132. this.spherical.makeSafe()
  133. this.spherical.radius *= this.scale
  134. // restrict radius to be between desired limits
  135. this.spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, this.spherical.radius))
  136. this.offset.setFromSpherical(this.spherical)
  137. // rotate offset back to "camera-up-vector-is-up" space
  138. this.offset.applyQuaternion(this.quatInverse)
  139. this.object3d.position.copy(this.target.position).add(this.offset)
  140. this.object3d.lookAt(this.target.position)
  141. this.sphericalDelta.set(0, 0, 0)
  142. this.scale = 1
  143. // update condition is:
  144. // min(camera displacement, camera rotation in radians)^2 > EPS
  145. // using small-angle approximation cos(x/2) = 1 - x^2 / 8
  146. if (this.lastPosition.distanceToSquared(this.object3d.position) > this.EPS ||
  147. 8 * (1 - this.lastQuaternion.dot(this.object3d.quaternion)) > this.EPS) {
  148. this.lastPosition.copy(this.object3d.position)
  149. this.lastQuaternion.copy(this.object3d.quaternion)
  150. }
  151. }
  152. dollyOut() {
  153. this.scale /= Math.pow(0.95, this.dollySpeed)
  154. }
  155. dollyIn() {
  156. this.scale *= Math.pow(0.95, this.dollySpeed)
  157. }
  158. normalizeScreenInput(browserVector, gameVector) {
  159. const bounds = RE.Runtime.rogueDOMContainer.getBoundingClientRect()
  160. gameVector.x = ((browserVector.x - bounds.left) / bounds.width) * 2 - 1
  161. gameVector.y = -((browserVector.y - bounds.top) / bounds.height) * 2 + 1
  162. }
  163. normalizeScreenMovement(browserVector, gameVector) {
  164. const bounds = RE.Runtime.rogueDOMContainer.getBoundingClientRect()
  165. gameVector.x = (browserVector.x / bounds.width)
  166. gameVector.y = -(browserVector.y / bounds.height)
  167. }
  168. lock() {
  169. const useCameraLock = true//this.useCameraLock
  170. console.log("attempting camera lock", useCameraLock)
  171. if(!useCameraLock) {
  172. return
  173. }
  174. console.log("locking camera")
  175. RE.Input.mouse.lock()
  176. }
  177. unlock() {
  178. const useCameraLock = true//this.useCameraLock
  179. if(!useCameraLock) {
  180. return
  181. }
  182. RE.Input.mouse.unlock()
  183. }
  184. }
  185. RE.registerComponent(TargetedOrbitCamera)