UNPKG

13.7 kBHTMLView Raw
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 <!--[if lt IE 9]>
10 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11 <![endif]-->
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
43import * 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 */
51export 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 */
68FluxCameras.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 */
83FluxCameras.prototype.getCamera = function () {
84 if (this._view === FluxCameras.VIEWS.perspective) {
85 return this._perspCamera;
86 }
87 return this._orthoCamera;
88};
89
90FluxCameras.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
100FluxCameras.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
110FluxCameras.isValidView = function (view) {
111 return view != null &amp;&amp; view.constructor === Number &amp;&amp; view > -1 &amp;&amp; view &lt; 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 */
118FluxCameras.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 */
137FluxCameras.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 */
155FluxCameras.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 */
185function _isNumber(num) {
186 return num != null &amp;&amp; num.constructor === Number;
187}
188
189/**
190 * Check whether a set of properties are valid numbers
191 * @param {Array.&lt;string>} schema The list of properties
192 * @param {Object} data The object with properties
193 * @returns {boolean} True if all numbers
194 * @private
195 */
196function _checkNumbers(schema, data) {
197 // Make sure all the properties are valid and exist
198 for (var i=0;i&lt;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 */
211FluxCameras.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 */
238FluxCameras.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*/
251FluxCameras.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>