Camera.d.ts 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. import EventEmitter from 'eventemitter3';
  2. import type { vec2 } from 'gl-matrix';
  3. import { mat4, vec3 } from 'gl-matrix';
  4. import type { Canvas } from '../Canvas';
  5. import { Frustum } from '../shapes';
  6. import type { TypeEasingFunction } from '../types';
  7. import type { ICamera } from './interfaces';
  8. import { CameraProjectionMode, CameraTrackingMode, CameraType } from './interfaces';
  9. import type { Landmark } from './Landmark';
  10. /**
  11. * 参考「WebGL Insights - 23.Designing Cameras for WebGL Applications」,基于 Responsible Camera 思路设计
  12. * @see https://github.com/d13g0/nucleo.js/blob/master/source/camera/Camera.js
  13. *
  14. * 保存相机参数,定义相机动作:
  15. * 1. dolly 沿 n 轴移动
  16. * 2. pan 沿 u v 轴移动
  17. * 3. rotate 以方位角旋转
  18. * 4. 移动到 Landmark,具有平滑的动画效果,其间禁止其他用户交互
  19. */
  20. export declare class Camera implements ICamera {
  21. canvas: Canvas;
  22. eventEmitter: EventEmitter<string | symbol, any>;
  23. /**
  24. * 相机矩阵
  25. */
  26. protected matrix: mat4;
  27. /**
  28. * u 轴
  29. * @see http://learnwebgl.brown37.net/07_cameras/camera_introduction.html#a-camera-definition
  30. */
  31. protected right: vec3;
  32. /**
  33. * v 轴 +Y is down
  34. */
  35. protected up: vec3;
  36. /**
  37. * n 轴 +Z is inside
  38. */
  39. protected forward: vec3;
  40. /**
  41. * 相机位置
  42. */
  43. protected position: vec3;
  44. /**
  45. * 视点位置
  46. */
  47. protected focalPoint: vec3;
  48. /**
  49. * 视点到相机位置的向量
  50. * focalPoint - position
  51. */
  52. protected distanceVector: vec3;
  53. /**
  54. * 相机位置到视点距离
  55. * length(focalPoint - position)
  56. */
  57. protected distance: number;
  58. /**
  59. * @see https://en.wikipedia.org/wiki/Azimuth
  60. */
  61. protected azimuth: number;
  62. protected elevation: number;
  63. protected roll: number;
  64. protected relAzimuth: number;
  65. protected relElevation: number;
  66. protected relRoll: number;
  67. /**
  68. * 沿 n 轴移动时,保证移动速度从快到慢
  69. */
  70. protected dollyingStep: number;
  71. protected maxDistance: number;
  72. protected minDistance: number;
  73. /**
  74. * zoom factor of the camera, default is 1
  75. * eg. https://threejs.org/docs/#api/en/cameras/OrthographicCamera.zoom
  76. */
  77. protected zoom: number;
  78. /**
  79. * invert the horizontal coordinate system HCS
  80. */
  81. protected rotateWorld: boolean;
  82. /**
  83. * 投影矩阵参数
  84. */
  85. /**
  86. * field of view [0-360]
  87. * @see http://en.wikipedia.org/wiki/Angle_of_view
  88. */
  89. protected fov: number;
  90. protected near: number;
  91. protected far: number;
  92. protected aspect: number;
  93. protected left: number;
  94. protected rright: number;
  95. protected top: number;
  96. protected bottom: number;
  97. protected projectionMatrix: mat4;
  98. protected projectionMatrixInverse: mat4;
  99. protected jitteredProjectionMatrix: mat4 | undefined;
  100. protected view: {
  101. enabled: boolean;
  102. fullWidth: number;
  103. fullHeight: number;
  104. offsetX: number;
  105. offsetY: number;
  106. width: number;
  107. height: number;
  108. } | undefined;
  109. protected enableUpdate: boolean;
  110. protected type: CameraType;
  111. protected trackingMode: CameraTrackingMode;
  112. protected projectionMode: CameraProjectionMode;
  113. /**
  114. * for culling use
  115. */
  116. protected frustum: Frustum;
  117. /**
  118. * ortho matrix for Canvas2D & SVG
  119. */
  120. protected orthoMatrix: mat4;
  121. isOrtho(): boolean;
  122. getProjectionMode(): CameraProjectionMode;
  123. getPerspective(): mat4;
  124. getPerspectiveInverse(): mat4;
  125. getFrustum(): Frustum;
  126. getPosition(): vec3;
  127. getFocalPoint(): vec3;
  128. getDollyingStep(): number;
  129. getNear(): number;
  130. getFar(): number;
  131. getZoom(): number;
  132. getOrthoMatrix(): mat4;
  133. getView(): {
  134. enabled: boolean;
  135. fullWidth: number;
  136. fullHeight: number;
  137. offsetX: number;
  138. offsetY: number;
  139. width: number;
  140. height: number;
  141. };
  142. setEnableUpdate(enabled: boolean): void;
  143. setType(type: CameraType, trackingMode?: CameraTrackingMode): this;
  144. setProjectionMode(projectionMode: CameraProjectionMode): this;
  145. setTrackingMode(trackingMode: CameraTrackingMode): this;
  146. /**
  147. * If flag is true, it reverses the azimuth and elevation angles.
  148. * Subsequent calls to rotate, setAzimuth, setElevation,
  149. * changeAzimuth or changeElevation will cause the inverted effect.
  150. * setRoll or changeRoll is not affected by this method.
  151. *
  152. * This inversion is useful when one wants to simulate that the world
  153. * is moving, instead of the camera.
  154. *
  155. * By default the camera angles are not reversed.
  156. * @param {Boolean} flag the boolean flag to reverse the angles.
  157. */
  158. setWorldRotation(flag: boolean): this;
  159. /**
  160. * 计算 MV 矩阵,为相机矩阵的逆矩阵
  161. */
  162. getViewTransform(): mat4;
  163. getWorldTransform(): mat4;
  164. jitterProjectionMatrix(x: number, y: number): void;
  165. clearJitterProjectionMatrix(): void;
  166. /**
  167. * 设置相机矩阵
  168. */
  169. setMatrix(matrix: mat4): this;
  170. setFov(fov: number): this;
  171. setAspect(aspect: number): this;
  172. setNear(near: number): this;
  173. setFar(far: number): this;
  174. /**
  175. * Sets an offset in a larger frustum, used in PixelPicking
  176. */
  177. setViewOffset(fullWidth: number, fullHeight: number, x: number, y: number, width: number, height: number): this;
  178. clearViewOffset(): this;
  179. setZoom(zoom: number): this;
  180. /**
  181. * Zoom by specified point in viewport coordinates.
  182. */
  183. setZoomByViewportPoint(zoom: number, viewportPoint: vec2): this;
  184. setPerspective(near: number, far: number, fov: number, aspect: number): this;
  185. setOrthographic(l: number, r: number, t: number, b: number, near: number, far: number): this;
  186. /**
  187. * Move the camera in world coordinates.
  188. * It will keep looking at the current focal point.
  189. *
  190. * support scalars or vectors.
  191. * @example
  192. * setPosition(1, 2, 3);
  193. * setPosition([1, 2, 3]);
  194. */
  195. setPosition(x: number | vec2 | vec3, y?: number, z?: number): this;
  196. /**
  197. * Sets the focal point of this camera in world coordinates.
  198. *
  199. * support scalars or vectors.
  200. * @example
  201. * setFocalPoint(1, 2, 3);
  202. * setFocalPoint([1, 2, 3]);
  203. */
  204. setFocalPoint(x: number | vec2 | vec3, y?: number, z?: number): this;
  205. getDistance(): number;
  206. getDistanceVector(): vec3;
  207. /**
  208. * Moves the camera towards/from the focal point.
  209. */
  210. setDistance(d: number): this;
  211. setMaxDistance(d: number): this;
  212. setMinDistance(d: number): this;
  213. /**
  214. * 设置相机方位角,不同相机模式下需要重新计算相机位置或者是视点位置
  215. * the azimuth in degrees
  216. */
  217. setAzimuth(az: number): this;
  218. getAzimuth(): number;
  219. /**
  220. * 设置相机方位角,不同相机模式下需要重新计算相机位置或者是视点位置
  221. */
  222. setElevation(el: number): this;
  223. getElevation(): number;
  224. /**
  225. * 设置相机方位角,不同相机模式下需要重新计算相机位置或者是视点位置
  226. */
  227. setRoll(angle: number): this;
  228. getRoll(): number;
  229. /**
  230. * 根据相机矩阵重新计算各种相机参数
  231. */
  232. protected _update(): void;
  233. /**
  234. * 计算相机矩阵
  235. */
  236. protected computeMatrix(): void;
  237. /**
  238. * Sets the camera position in the camera matrix
  239. */
  240. protected _setPosition(x: number | vec3, y?: number, z?: number): void;
  241. /**
  242. * Recalculates axes based on the current matrix
  243. */
  244. protected _getAxes(): void;
  245. /**
  246. * Recalculates euler angles based on the current state
  247. */
  248. protected _getAngles(): void;
  249. /**
  250. * 重新计算相机位置,只有 ORBITING 模式相机位置才会发生变化
  251. */
  252. protected _getPosition(): void;
  253. /**
  254. * 重新计算视点,只有 TRACKING 模式视点才会发生变化
  255. */
  256. protected _getFocalPoint(): void;
  257. /**
  258. * 重新计算视距
  259. */
  260. protected _getDistance(): void;
  261. protected _getOrthoMatrix(): void;
  262. protected triggerUpdate(): void;
  263. rotate(azimuth: number, elevation: number, roll: number): this;
  264. pan(tx: number, ty: number): this;
  265. dolly(value: number): this;
  266. createLandmark(name: string, params?: Partial<{
  267. position: [number, number, number] | Float32Array | [number, number];
  268. focalPoint: [number, number, number] | Float32Array | [number, number];
  269. zoom: number;
  270. roll: number;
  271. }>): Landmark;
  272. gotoLandmark(name: string | Landmark, options?: number | Partial<{
  273. easing: string;
  274. easingFunction: TypeEasingFunction;
  275. duration: number;
  276. onfinish: () => void;
  277. }>): void;
  278. cancelLandmarkAnimation(): void;
  279. }
  280. //# sourceMappingURL=Camera.d.ts.map