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