1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>FluxCameras.js - Documentation</title>
|
6 |
|
7 | <script src="scripts/prettify/prettify.js"></script>
|
8 | <script src="scripts/prettify/lang-css.js"></script>
|
9 | |
10 |
|
11 |
|
12 | <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
13 | <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
14 | <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
15 | </head>
|
16 | <body>
|
17 |
|
18 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
|
19 | <label for="nav-trigger" class="navicon-button x">
|
20 | <div class="navicon"></div>
|
21 | </label>
|
22 |
|
23 | <label for="nav-trigger" class="overlay"></label>
|
24 |
|
25 | <nav>
|
26 | <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EdgesHelper.html">EdgesHelper</a><ul class='methods'><li data-type='method'><a href="EdgesHelper.html#.AddEdges">AddEdges</a></li></ul></li><li><a href="FluxCameras.html">FluxCameras</a><ul class='methods'><li data-type='method'><a href="FluxCameras.html#.cameraFromJSON">cameraFromJSON</a></li><li data-type='method'><a href="FluxCameras.html#.cameraToJSON">cameraToJSON</a></li><li data-type='method'><a href="FluxCameras.html#fromJSON">fromJSON</a></li><li data-type='method'><a href="FluxCameras.html#getCamera">getCamera</a></li><li data-type='method'><a href="FluxCameras.html#setView">setView</a></li><li data-type='method'><a href="FluxCameras.html#toJSON">toJSON</a></li><li data-type='method'><a href="FluxCameras.html#updateCamera">updateCamera</a></li></ul></li><li><a href="FluxRenderContext.html">FluxRenderContext</a><ul class='methods'><li data-type='method'><a href="FluxRenderContext.html#.getNextContext">getNextContext</a></li></ul></li><li><a href="FluxRenderer.html">FluxRenderer</a><ul class='methods'><li data-type='method'><a href="FluxRenderer.html#addControls">addControls</a></li><li data-type='method'><a href="FluxRenderer.html#anyValidPrims">anyValidPrims</a></li><li data-type='method'><a href="FluxRenderer.html#detach">detach</a></li><li data-type='method'><a href="FluxRenderer.html#doRender">doRender</a></li><li data-type='method'><a href="FluxRenderer.html#focus">focus</a></li><li data-type='method'><a href="FluxRenderer.html#fromJSON">fromJSON</a></li><li data-type='method'><a href="FluxRenderer.html#getGlCanvas">getGlCanvas</a></li><li data-type='method'><a href="FluxRenderer.html#getSelection">getSelection</a></li><li data-type='method'><a href="FluxRenderer.html#homeCamera">homeCamera</a></li><li data-type='method'><a href="FluxRenderer.html#setClearColor">setClearColor</a></li><li data-type='method'><a href="FluxRenderer.html#setEdgesMode">setEdgesMode</a></li><li data-type='method'><a href="FluxRenderer.html#setHelpersVisible">setHelpersVisible</a></li><li data-type='method'><a href="FluxRenderer.html#setLights">setLights</a></li><li data-type='method'><a href="FluxRenderer.html#setModel">setModel</a></li><li data-type='method'><a href="FluxRenderer.html#setSelection">setSelection</a></li><li data-type='method'><a href="FluxRenderer.html#setSelectionMaterial">setSelectionMaterial</a></li><li data-type='method'><a href="FluxRenderer.html#setSize">setSize</a></li><li data-type='method'><a href="FluxRenderer.html#setView">setView</a></li><li data-type='method'><a href="FluxRenderer.html#toJSON">toJSON</a></li></ul></li><li><a href="FluxViewport.html">FluxViewport</a><ul class='methods'><li data-type='method'><a href="FluxViewport.html#.getChangeEvent">getChangeEvent</a></li><li data-type='method'><a href="FluxViewport.html#.getEdgesModes">getEdgesModes</a></li><li data-type='method'><a href="FluxViewport.html#.getEvents">getEvents</a></li><li data-type='method'><a href="FluxViewport.html#.getSelectionModes">getSelectionModes</a></li><li data-type='method'><a href="FluxViewport.html#.getViews">getViews</a></li><li data-type='method'><a href="FluxViewport.html#.isKnownGeom">isKnownGeom</a></li><li data-type='method'><a href="FluxViewport.html#activateShadows">activateShadows</a></li><li data-type='method'><a href="FluxViewport.html#addControls">addControls</a></li><li data-type='method'><a href="FluxViewport.html#downloadState">downloadState</a></li><li data-type='method'><a href="FluxViewport.html#focus">focus</a></li><li data-type='method'><a href="FluxViewport.html#fromJSON">fromJSON</a></li><li data-type='method'><a href="FluxViewport.html#getAutoFocus">getAutoFocus</a></li><li data-type='method'><a href="FluxViewport.html#getGlCanvas">getGlCanvas</a></li><li data-type='method'><a href="FluxViewport.html#getJson">getJson</a></li><li data-type='method'><a href="FluxViewport.html#getObjectMap">getObjectMap</a></li><li data-type='method'><a href="FluxViewport.html#getSelection">getSelection</a></li><li data-type='method'><a href="FluxViewport.html#homeCamera">homeCamera</a></li><li data-type='method'><a href="FluxViewport.html#render">render</a></li><li data-type='method'><a href="FluxViewport.html#setAutoFocus">setAutoFocus</a></li><li data-type='method'><a href="FluxViewport.html#setClearColor">setClearColor</a></li><li data-type='method'><a href="FluxViewport.html#setEdgesMode">setEdgesMode</a></li><li data-type='method'><a href="FluxViewport.html#setFogDensity">setFogDensity</a></li><li data-type='method'><a href="FluxViewport.html#setGeometryEntity">setGeometryEntity</a></li><li data-type='method'><a href="FluxViewport.html#setGeometryJson">setGeometryJson</a></li><li data-type='method'><a href="FluxViewport.html#setHelpersVisible">setHelpersVisible</a></li><li data-type='method'><a href="FluxViewport.html#setSelection">setSelection</a></li><li data-type='method'><a href="FluxViewport.html#setSelectionMaterial">setSelectionMaterial</a></li><li data-type='method'><a href="FluxViewport.html#setSize">setSize</a></li><li data-type='method'><a href="FluxViewport.html#setTessUrl">setTessUrl</a></li><li data-type='method'><a href="FluxViewport.html#setupDefaultLighting">setupDefaultLighting</a></li><li data-type='method'><a href="FluxViewport.html#setView">setView</a></li><li data-type='method'><a href="FluxViewport.html#toJSON">toJSON</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#_deleteFromScene">_deleteFromScene</a></li><li><a href="global.html#_removeGeometries">_removeGeometries</a></li></ul>
|
27 | </nav>
|
28 |
|
29 | <div id="main">
|
30 |
|
31 | <h1 class="page-title">FluxCameras.js</h1>
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | <section>
|
40 | <article>
|
41 | <pre class="prettyprint source linenums"><code>'use strict';
|
42 |
|
43 | import * as THREE from 'three';
|
44 |
|
45 | /**
|
46 | * Class for managing multiple cameras used in a viewport.
|
47 | * @class FluxCameras
|
48 | * @param {Number} width Width of the viewport
|
49 | * @param {Number} height Height of the viewport
|
50 | */
|
51 | export default function FluxCameras(width, height) {
|
52 | // Initialize default cameras and frustums.
|
53 | this._perspCamera = new THREE.PerspectiveCamera(30, width/height, 0.1, 100000);
|
54 | // Flux is Z up
|
55 | this._perspCamera.up = new THREE.Vector3( 0, 0, 1 );
|
56 |
|
57 | this._orthoCamera = new THREE.OrthographicCamera(100, -100, 100, -100, -1000, 1000);
|
58 |
|
59 | this.setView(FluxCameras.VIEWS.perspective);
|
60 | this.updateCamera(width, height);
|
61 | }
|
62 |
|
63 | /**
|
64 | * Enumeration of all possible views for the camera.
|
65 | * Values are perspective, top, bottom, front, back, right, left.
|
66 | * @type {Object}
|
67 | */
|
68 | FluxCameras.VIEWS = {
|
69 | perspective: 0,
|
70 | top: 1,
|
71 | bottom: 2,
|
72 | front: 3,
|
73 | back: 4,
|
74 | right: 5,
|
75 | left: 6,
|
76 | END: 7
|
77 | };
|
78 |
|
79 | /**
|
80 | * Get the current camera object
|
81 | * @return {THREE.Camera} The current camera
|
82 | */
|
83 | FluxCameras.prototype.getCamera = function () {
|
84 | if (this._view === FluxCameras.VIEWS.perspective) {
|
85 | return this._perspCamera;
|
86 | }
|
87 | return this._orthoCamera;
|
88 | };
|
89 |
|
90 | FluxCameras.DEFAULT_POSITIONS = [
|
91 | [25, 10, 13], // perspective
|
92 | [0, 0, -100], // top
|
93 | [0, 0, 100], // bottom
|
94 | [0, 0, 0], // front
|
95 | [0, 0, 0], // back
|
96 | [0, 0, 0], // right
|
97 | [0, 0, 0] // left
|
98 | ];
|
99 |
|
100 | FluxCameras.DEFAULT_ROTATIONS = [
|
101 | [0, 0, 0], // perspective
|
102 | [0, 0, 0], // top
|
103 | [0, Math.PI, 0], // bottom
|
104 | [Math.PI/2, 0, 0], // front
|
105 | [Math.PI/2, Math.PI, 0], // back
|
106 | [Math.PI/2, Math.PI/2, 0], // right
|
107 | [Math.PI/2, -Math.PI/2, 0] // left
|
108 | ];
|
109 |
|
110 | FluxCameras.isValidView = function (view) {
|
111 | return view != null && view.constructor === Number && view > -1 && view < FluxCameras.VIEWS.END;
|
112 | };
|
113 |
|
114 | /**
|
115 | * Set which camera view to use (ex perspective, top etc.).
|
116 | * @param {FluxCameras.VIEWS} view The new view mode
|
117 | */
|
118 | FluxCameras.prototype.setView = function (view) {
|
119 | if (!FluxCameras.isValidView(view)) return;
|
120 | this._view = view;
|
121 |
|
122 | var camera = this.getCamera();
|
123 | camera.position.set(FluxCameras.DEFAULT_POSITIONS[view][0],
|
124 | FluxCameras.DEFAULT_POSITIONS[view][1],
|
125 | FluxCameras.DEFAULT_POSITIONS[view][2]);
|
126 |
|
127 | camera.rotation.set(FluxCameras.DEFAULT_ROTATIONS[view][0],
|
128 | FluxCameras.DEFAULT_ROTATIONS[view][1],
|
129 | FluxCameras.DEFAULT_ROTATIONS[view][2]);
|
130 | };
|
131 |
|
132 | /**
|
133 | * Recompute derived state when the camera is changed.
|
134 | * @param {Number} width Width of the viewport (used to calculate aspect ratio)
|
135 | * @param {Number} height Height of the viewport (used to calculate aspect ratio)
|
136 | */
|
137 | FluxCameras.prototype.updateCamera = function(width, height) {
|
138 | this._perspCamera.aspect = width / height;
|
139 | this._perspCamera.updateProjectionMatrix();
|
140 |
|
141 | var a = width / height;
|
142 | var h = this._orthoCamera.top - this._orthoCamera.bottom;
|
143 | this._orthoCamera.top = h / 2;
|
144 | this._orthoCamera.bottom = - h / 2;
|
145 | this._orthoCamera.right = h / 2 * a;
|
146 | this._orthoCamera.left = - h / 2 * a;
|
147 | this._orthoCamera.updateProjectionMatrix();
|
148 | };
|
149 |
|
150 | /**
|
151 | * Extract only relevant properties from a camera
|
152 | * @param {THREE.Camera} camera The camera source
|
153 | * @return {Object} The camera data
|
154 | */
|
155 | FluxCameras.cameraToJSON = function(camera) {
|
156 | var serializableCamera = {
|
157 | px: camera.position.x,
|
158 | py: camera.position.y,
|
159 | pz: camera.position.z,
|
160 | rx: camera.rotation.x,
|
161 | ry: camera.rotation.y,
|
162 | rz: camera.rotation.z,
|
163 | near: camera.near,
|
164 | far: camera.far
|
165 | };
|
166 | // Handle extra OrthographicCamera properties
|
167 | if (camera instanceof THREE.OrthographicCamera) {
|
168 | serializableCamera.top = camera.top;
|
169 | serializableCamera.right = camera.right;
|
170 | serializableCamera.bottom = camera.bottom;
|
171 | serializableCamera.left = camera.left;
|
172 | serializableCamera.type = 'orthographic';
|
173 | } else {
|
174 | serializableCamera.type = 'perspective';
|
175 | }
|
176 | return serializableCamera;
|
177 | };
|
178 |
|
179 | /**
|
180 | * Check if something is anumber
|
181 | * @param {Number} num The value
|
182 | * @returns {boolean} True for numbers
|
183 | * @private
|
184 | */
|
185 | function _isNumber(num) {
|
186 | return num != null && num.constructor === Number;
|
187 | }
|
188 |
|
189 | /**
|
190 | * Check whether a set of properties are valid numbers
|
191 | * @param {Array.<string>} schema The list of properties
|
192 | * @param {Object} data The object with properties
|
193 | * @returns {boolean} True if all numbers
|
194 | * @private
|
195 | */
|
196 | function _checkNumbers(schema, data) {
|
197 | // Make sure all the properties are valid and exist
|
198 | for (var i=0;i<schema.length;i++) {
|
199 | if (!_isNumber(data[schema[i]])) {
|
200 | return false;
|
201 | }
|
202 | }
|
203 | return true;
|
204 | }
|
205 |
|
206 | /**
|
207 | * Rehydrate camera instance from an object property tree.
|
208 | * @param {THREE.camera} camera The camera to receive data
|
209 | * @param {Object} data The data to parse and apply
|
210 | */
|
211 | FluxCameras.cameraFromJSON = function(camera, data) {
|
212 | var schema = ['px', 'py', 'pz', 'rx', 'ry', 'rz', 'near', 'far'];
|
213 | if (!_checkNumbers(schema, data)) return;
|
214 | camera.position.x = data.px;
|
215 | camera.position.y = data.py;
|
216 | camera.position.z = data.pz;
|
217 | camera.rotation.x = data.rx;
|
218 | camera.rotation.y = data.ry;
|
219 | camera.rotation.z = data.rz;
|
220 | camera.near = data.near;
|
221 | camera.far = data.far;
|
222 |
|
223 | // Handle extra OrthographicCamera properties
|
224 | if (camera.constructor === THREE.OrthographicCamera) {
|
225 | schema = ['top', 'right', 'bottom', 'left'];
|
226 | if (!_checkNumbers(schema, data)) return;
|
227 | camera.top = data.top;
|
228 | camera.right = data.right;
|
229 | camera.bottom = data.bottom;
|
230 | camera.left = data.left;
|
231 | }
|
232 | };
|
233 |
|
234 | /**
|
235 | * Make serializable by pruning all references and building an object property tree
|
236 | * @return {Object} The simplified model
|
237 | */
|
238 | FluxCameras.prototype.toJSON = function() {
|
239 | var serializableCameras = {
|
240 | perspective: FluxCameras.cameraToJSON(this._perspCamera),
|
241 | orthographic: FluxCameras.cameraToJSON(this._orthoCamera),
|
242 | view: this._view
|
243 | };
|
244 | return serializableCameras;
|
245 | };
|
246 |
|
247 | /**
|
248 | * Update the corresponding cameras in this object from a serialized object.
|
249 | * @param {Object} serializableCameras The camera data to use.
|
250 | */
|
251 | FluxCameras.prototype.fromJSON = function(serializableCameras) {
|
252 | this.setView(serializableCameras.view);
|
253 | FluxCameras.cameraFromJSON(this._perspCamera, serializableCameras.perspective);
|
254 | FluxCameras.cameraFromJSON(this._orthoCamera, serializableCameras.orthographic);
|
255 | };
|
256 | </code></pre>
|
257 | </article>
|
258 | </section>
|
259 |
|
260 |
|
261 |
|
262 |
|
263 | </div>
|
264 |
|
265 | <br class="clear">
|
266 |
|
267 | <footer>
|
268 | Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on Thu Jan 05 2017 16:26:56 GMT-0800 (PST) using the Minami theme.
|
269 | </footer>
|
270 |
|
271 | <script>prettyPrint();</script>
|
272 | <script src="scripts/linenumber.js"></script>
|
273 | </body>
|
274 | </html>
|