UNPKG

6.21 kBTypeScriptView Raw
1import { JSONMeta, Object3DJSON, Object3DJSONObject } from "../core/Object3D.js";
2import { Camera } from "./Camera.js";
3
4export interface OrthographicCameraJSONObject extends Object3DJSONObject {
5 zoom: number;
6 left: number;
7 right: number;
8 top: number;
9 bottom: number;
10 near: number;
11 far: number;
12
13 view?: {
14 enabled: boolean;
15 fullWidth: number;
16 fullHeight: number;
17 offsetX: number;
18 offsetY: number;
19 width: number;
20 height: number;
21 };
22}
23
24export interface OrthographicCameraJSON extends Object3DJSON {
25 object: OrthographicCameraJSONObject;
26}
27
28/**
29 * Camera that uses {@link https://en.wikipedia.org/wiki/Orthographic_projection | orthographic projection}.
30 * In this projection mode, an object's size in the rendered image stays constant regardless of its distance from the camera.
31 * This can be useful for rendering 2D scenes and UI elements, amongst other things.
32 * @example
33 * ```typescript
34 * const camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
35 * scene.add(camera);
36 * ```
37 * @see Example: {@link https://threejs.org/examples/#webgl_camera | camera }
38 * @see Example: {@link https://threejs.org/examples/#webgl_interactive_cubes_ortho | interactive / cubes / ortho }
39 * @see Example: {@link https://threejs.org/examples/#webgl_materials_cubemap_dynamic | materials / cubemap / dynamic }
40 * @see Example: {@link https://threejs.org/examples/#webgl_postprocessing_advanced | postprocessing / advanced }
41 * @see Example: {@link https://threejs.org/examples/#webgl_postprocessing_dof2 | postprocessing / dof2 }
42 * @see Example: {@link https://threejs.org/examples/#webgl_postprocessing_godrays | postprocessing / godrays }
43 * @see Example: {@link https://threejs.org/examples/#webgl_rtt | rtt }
44 * @see Example: {@link https://threejs.org/examples/#webgl_shaders_tonemapping | shaders / tonemapping }
45 * @see Example: {@link https://threejs.org/examples/#webgl_shadowmap | shadowmap }
46 * @see {@link https://threejs.org/docs/index.html#api/en/cameras/OrthographicCamera | Official Documentation}
47 * @see {@link https://github.com/mrdoob/three.js/blob/master/src/cameras/OrthographicCamera.js | Source}
48 */
49export class OrthographicCamera extends Camera {
50 /**
51 * Creates a new {@link OrthographicCamera}.
52 * @remarks Together these define the camera's {@link https://en.wikipedia.org/wiki/Viewing_frustum | viewing frustum}.
53 * @param left Camera frustum left plane. Default `-1`.
54 * @param right Camera frustum right plane. Default `1`.
55 * @param top Camera frustum top plane. Default `1`.
56 * @param bottom Camera frustum bottom plane. Default `-1`.
57 * @param near Camera frustum near plane. Default `0.1`.
58 * @param far Camera frustum far plane. Default `2000`.
59 */
60 constructor(left?: number, right?: number, top?: number, bottom?: number, near?: number, far?: number);
61
62 /**
63 * Read-only flag to check if a given object is of type {@link OrthographicCamera}.
64 * @remarks This is a _constant_ value
65 * @defaultValue `true`
66 */
67 readonly isOrthographicCamera: true;
68
69 /**
70 * @override
71 * @defaultValue `OrthographicCamera`
72 */
73 override readonly type: string | "OrthographicCamera";
74
75 /**
76 * Gets or sets the zoom factor of the camera.
77 * @defaultValue `1`
78 */
79 zoom: number;
80
81 /**
82 * Set by {@link setViewOffset | .setViewOffset()}.
83 * @defaultValue `null`
84 */
85 view: null | {
86 enabled: boolean;
87 fullWidth: number;
88 fullHeight: number;
89 offsetX: number;
90 offsetY: number;
91 width: number;
92 height: number;
93 };
94
95 /**
96 * Camera frustum left plane.
97 * @remarks Expects a `Float`
98 * @defaultValue `-1`
99 */
100 left: number;
101
102 /**
103 * Camera frustum right plane.
104 * @remarks Expects a `Float`
105 * @defaultValue `1`
106 */
107 right: number;
108
109 /**
110 * Camera frustum top plane.
111 * @remarks Expects a `Float`
112 * @defaultValue `1`
113 */
114 top: number;
115
116 /**
117 * Camera frustum bottom plane.
118 * @remarks Expects a `Float`.
119 * @defaultValue `-1`
120 */
121 bottom: number;
122
123 /**
124 * Camera frustum near plane.`.
125 * @remarks The valid range is between `0` and the current value of the {@link far | .far} plane.
126 * @remarks Note that, unlike for the {@link THREE.PerspectiveCamera | PerspectiveCamera}, `0` is a valid value for an {@link THREE.OrthographicCamera | OrthographicCamera's} near plane.
127 * @remarks Expects a `Float`
128 * @defaultValue `0.1`
129 */
130 near: number;
131
132 /**
133 * Camera frustum far plane.
134 * @remarks Must be greater than the current value of {@link near | .near} plane.
135 * @remarks Expects a `Float`
136 * @defaultValue `2000`
137 */
138 far: number;
139
140 /**
141 * Updates the camera projection matrix
142 * @remarks Must be called after any change of parameters.
143 */
144 updateProjectionMatrix(): void;
145
146 /**
147 * Sets an offset in a larger {@link https://en.wikipedia.org/wiki/Viewing_frustum | viewing frustum}
148 * @remarks
149 * This is useful for multi-window or multi-monitor/multi-machine setups
150 * For an example on how to use it see {@link PerspectiveCamera.setViewOffset | PerspectiveCamera}.
151 * @see {@link THREE.PerspectiveCamera.setViewOffset | PerspectiveCamera}.
152 * @param fullWidth Full width of multiview setup Expects a `Float`.
153 * @param fullHeight Full height of multiview setup Expects a `Float`.
154 * @param x Horizontal offset of subcamera Expects a `Float`.
155 * @param y Vertical offset of subcamera Expects a `Float`.
156 * @param width Width of subcamera Expects a `Float`.
157 * @param height Height of subcamera Expects a `Float`.
158 */
159 setViewOffset(
160 fullWidth: number,
161 fullHeight: number,
162 offsetX: number,
163 offsetY: number,
164 width: number,
165 height: number,
166 ): void;
167
168 /**
169 * Removes any offset set by the {@link setViewOffset | .setViewOffset} method.
170 */
171 clearViewOffset(): void;
172
173 toJSON(meta?: JSONMeta): OrthographicCameraJSON;
174}