1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>FluxViewport.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">FluxViewport.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 | import EdgesHelper from './EdgesHelper.js';
|
45 | import FluxRenderer from './FluxRenderer.js';
|
46 | import FluxCameras from './FluxCameras.js';
|
47 | import * as FluxJsonToThree from 'flux-json-to-three';
|
48 | import {scene} from 'flux-modelingjs';
|
49 | import * as constants from './controls/constants.js';
|
50 | import * as print from './utils/debugPrint.js';
|
51 |
|
52 | /**
|
53 | * UI widget to render 3D geometry.
|
54 | * This class provides all the interface you need to add the flux web
|
55 | * viewer to your SDK app. This allows you to interpret Flux json data
|
56 | * and render that geometry. You may also create any number of viewports
|
57 | * and they will share the finite number of WebGL contexts available
|
58 | * from the browser.<br>
|
59 | * The most commonly used functions are <a href="#setGeometryEntity">setGeometryEntity</a> (to set geometry to render)
|
60 | * and <a href="#.isKnownGeom">isKnownGeom</a> (determine if JSON is geometry) so you might want to start reading there. <br>
|
61 | * Note: If you are using <a href="https://community.flux.io/content/kbentry/2718/materials-1.html">Flux materials</a> that have the parameter roughness
|
62 | * set then you will need to configure your server to have a <a href="https://content-security-policy.com">content security
|
63 | * policy</a> that allows content from https://object-library.storage.googleapis.com
|
64 | * so that our environment texture images can be loaded.
|
65 | * @class FluxViewport
|
66 | * @param {Element} domParent The div container for the canvas
|
67 | * @param {Object} optionalParams Object containing all other parameters
|
68 | * @param {Number} optionalParams.width The width of the canvas
|
69 | * @param {Number} optionalParams.height The height of the canvas
|
70 | * @param {String} optionalParams.tessUrl The url for making brep tessellation requests (overrides projectId) (Used when server is not flux.io)
|
71 | * @param {Enumeration} optionalParams.selection Whether to enable user selection
|
72 | * @param {String} optionalParams.projectId Id of a flux project (required to render breps)
|
73 | * @param {String} optionalParams.token The current flux auth token (required to render breps)
|
74 | */
|
75 | export default function FluxViewport (domParent, optionalParams) {
|
76 | var width;
|
77 | var height;
|
78 | var tessUrl;
|
79 | var token;
|
80 | var selection = constants.Selection.NONE;
|
81 | if (optionalParams) {
|
82 | width = optionalParams.width;
|
83 | height = optionalParams.height;
|
84 | if (optionalParams.tessUrl) {
|
85 | tessUrl = optionalParams.tessUrl;
|
86 | } else if (optionalParams.projectId) {
|
87 | tessUrl = _getTessUrl(optionalParams.projectId);
|
88 | }
|
89 | token = optionalParams.token;
|
90 | if (optionalParams.selection) {
|
91 | selection = optionalParams.selection;
|
92 | }
|
93 | }
|
94 |
|
95 | var renderWidth = 100;//px
|
96 | if (width == null) {
|
97 | renderWidth = domParent.clientWidth;
|
98 | } else {
|
99 | renderWidth = Math.max(renderWidth, width);
|
100 | }
|
101 |
|
102 | var renderHeight = 100;//px
|
103 | if (height == null) {
|
104 | renderHeight = domParent.clientHeight;
|
105 | } else {
|
106 | renderHeight = Math.max(renderHeight, height);
|
107 | }
|
108 |
|
109 | if (!domParent) {
|
110 | throw new Error('domParent must be specified to FluxViewport');
|
111 | }
|
112 |
|
113 | this._sceneBuilder = new FluxJsonToThree.SceneBuilder(tessUrl, token);
|
114 | // Only allow merging when selection is disabled
|
115 | this._sceneBuilder.setAllowMerge(constants.Selection.NONE === selection);
|
116 |
|
117 | this._renderer = new FluxRenderer(domParent, renderWidth, renderHeight, selection);
|
118 | this._initCallback();
|
119 |
|
120 | // Make sure to render on mouse over in case the renderer has swapped contexts
|
121 | var _this = this;
|
122 | domParent.addEventListener('mouseenter', function(){
|
123 | _this.render();
|
124 | });
|
125 |
|
126 | // Cache of the Flux entity objects for downloading
|
127 | this._entities = null;
|
128 |
|
129 | this._latestSceneResults = null;
|
130 |
|
131 | // Track the last blob that was downloaded for memory cleanup
|
132 | this._downloadUrl = null;
|
133 |
|
134 | // Whether the viewport is locked on the current geometry and will automatically focus on new geometry when updating the entities
|
135 | this._autoFocus = true;
|
136 |
|
137 | // Track whether geometry is being converted, so we don't try two at once
|
138 | this.running = false;
|
139 | }
|
140 |
|
141 | FluxViewport.prototype = Object.create( THREE.EventDispatcher.prototype );
|
142 | FluxViewport.prototype.constructor = FluxViewport;
|
143 |
|
144 | /**
|
145 | * Build the url to use for tessellation requests to flux.
|
146 | * @private
|
147 | * @param {String} projectId Hashed project id to use in url
|
148 | * @return {String} Url to use for tessellation requests
|
149 | */
|
150 | function _getTessUrl(projectId) {
|
151 | return 'https://flux.io/p/'+projectId+
|
152 | '/api/blockexec?block=flux-internal/parasolid/Parasolid';
|
153 | }
|
154 |
|
155 | /**
|
156 | * @summary Enumeration of edges rendering modes.
|
157 | * This determines whether edges will be shown when rendering the front face, back face or both.
|
158 | * Front edge rendering can be used to achieve hidden line rendering.<br>
|
159 | * Options are NONE, FRONT, BACK, BOTH
|
160 | * @return {Object} enumeration
|
161 | */
|
162 | FluxViewport.getEdgesModes = function () {
|
163 | return EdgesHelper.EDGES_MODES;
|
164 | };
|
165 |
|
166 | /**
|
167 | * @summary Enumeration of selection modes.
|
168 | * This determines when selection events occur in response to mouse events.
|
169 | * Options are NONE, CLICK, HOVER
|
170 | * @return {Object} enumeration
|
171 | */
|
172 | FluxViewport.getSelectionModes = function () {
|
173 | return constants.Selection;
|
174 | };
|
175 |
|
176 | /**
|
177 | * Name of the event fired when the camera changes
|
178 | *
|
179 | * This can be used to observe those changes and register a callback.<br>
|
180 | * For example:
|
181 | * fluxViewport.addEventListener(FluxViewport.getChangeEvent(), function() {});
|
182 | * @return {String} Event name
|
183 | */
|
184 | FluxViewport.getChangeEvent = function () {
|
185 | return constants.Events.CHANGE;
|
186 | };
|
187 |
|
188 | /**
|
189 | * Enumeration of different event types
|
190 | * This can be used to differentiate events in the EventListener.
|
191 | * fluxViewport.addEventListener(FluxViewport.getChangeEvent(), function(e) {
|
192 | * FluxViewport.getEvents().SELECT === e.event;});
|
193 | * @return {Object} Enumeration object
|
194 | */
|
195 | FluxViewport.getEvents = function () {
|
196 | return constants.Events;
|
197 | };
|
198 |
|
199 | /**
|
200 | * Determines whether the entity or list of entities contains geometry
|
201 | * @param {Array.<Object>|Object} entities Geometry data
|
202 | * @return {Boolean} True for objects/lists containing geometry
|
203 | */
|
204 | FluxViewport.isKnownGeom = function (entities) {
|
205 | return scene.isGeometry(entities);
|
206 | };
|
207 |
|
208 | //---- Class member functions
|
209 |
|
210 | /**
|
211 | * Set up the callback to render when the camera changes
|
212 | * @private
|
213 | */
|
214 | FluxViewport.prototype._initCallback = function() {
|
215 | var _this = this;
|
216 | this._renderer.addEventListener(constants.Events.CHANGE, function(event) {
|
217 | _this.dispatchEvent(event);
|
218 | _this.render();
|
219 | });
|
220 | };
|
221 |
|
222 | /**
|
223 | * Add a new plugin for user interaction controls.
|
224 | * See ViewportControls.js for more information.
|
225 | * @param {ViewportControls} CustomControls A constructor that implements the controls interface.
|
226 | * @return {CustomControls} The new instance
|
227 | */
|
228 | FluxViewport.prototype.addControls = function(CustomControls) {
|
229 | return this._renderer.addControls(CustomControls);
|
230 | };
|
231 |
|
232 |
|
233 | /**
|
234 | * Get an object that maps from id string to Three.Object3D in the current scene
|
235 | * @return {Object} Id to object scene map
|
236 | */
|
237 | FluxViewport.prototype.getObjectMap = function() {
|
238 | return this._latestSceneResults.getObjectMap();
|
239 | };
|
240 |
|
241 | /**
|
242 | * Get the currently selected geometry as a list of id strings
|
243 | * @return {Array.<String>} Current selection
|
244 | */
|
245 | FluxViewport.prototype.getSelection = function() {
|
246 | var selectionMap = this._renderer.getSelection();
|
247 | var keys = Object.keys(selectionMap);
|
248 | var selection = [];
|
249 | for (var i=0;i<keys.length;i++) {
|
250 | var obj = selectionMap[keys[i]];
|
251 | if (obj != null) {
|
252 | selection.push(obj.userData.id);
|
253 | }
|
254 | }
|
255 | return selection;
|
256 | };
|
257 |
|
258 | /**
|
259 | * Define the material that is applied on selected objects
|
260 | * @param {Object} data Flux json description of a material
|
261 | */
|
262 | FluxViewport.prototype.setSelectionMaterial = function(data) {
|
263 | this._renderer.setSelectionMaterial(data);
|
264 | };
|
265 |
|
266 | /**
|
267 | * Set the currently selected geometry
|
268 | * @param {Array.<String>} ids New selection
|
269 | */
|
270 | FluxViewport.prototype.setSelection = function(ids) {
|
271 | if (ids == null || ids.constructor !== Array) return;
|
272 | var map = this._latestSceneResults.getObjectMap();
|
273 | var objects = ids.map(function (id) { return map[id];});
|
274 | this._renderer.setSelection(objects);
|
275 | };
|
276 |
|
277 | /**
|
278 | * Get the JSON representation of the objects with the given ids
|
279 | * @param {Array.<String>} ids List of object ids
|
280 | * @return {Array.<Object>} List of Flux JSON objects
|
281 | */
|
282 | FluxViewport.prototype.getJson = function(ids) {
|
283 | if (ids == null || ids.constructor !== Array) return [];
|
284 | var map = this._latestSceneResults.getObjectMap();
|
285 | return ids.map(function (id) { return map[id].userData.data;});
|
286 | };
|
287 |
|
288 | /**
|
289 | * Actually render the geometry!<br>
|
290 | * This is called automatically when the camera changes.
|
291 | * You may call it on demand as needed when changing properties.
|
292 | * @memberOf FluxViewport
|
293 | */
|
294 | FluxViewport.prototype.render = function() {
|
295 | this._renderer.doRender();
|
296 | };
|
297 |
|
298 | /**
|
299 | * Focus the camera on the current geometry
|
300 | * @param {THREE.Object3D} [obj] Object to focus on
|
301 | */
|
302 | FluxViewport.prototype.focus = function(obj) {
|
303 | this._renderer.focus(obj);
|
304 | };
|
305 |
|
306 | /**
|
307 | * Restore the camera to a default location
|
308 | */
|
309 | FluxViewport.prototype.homeCamera = function() {
|
310 | this._renderer.homeCamera();
|
311 | };
|
312 |
|
313 | /**
|
314 | * Whether to draw helpers (axis and grid)
|
315 | *
|
316 | * @param {Boolean} visible False to hide them
|
317 | */
|
318 | FluxViewport.prototype.setHelpersVisible = function(visible) {
|
319 | this._renderer.setHelpersVisible(visible);
|
320 | };
|
321 |
|
322 | /**
|
323 | * Set the viewport geomtery from a JSON string
|
324 | * @param {String} dataString The geometry to render formatted as JSON containing Flux entities
|
325 | * @return {Object} Promise to resolve after geometry is created
|
326 | */
|
327 | FluxViewport.prototype.setGeometryJson = function(dataString) {
|
328 | var dataObj = JSON.parse(dataString);
|
329 | return this.setGeometryEntity(dataObj);
|
330 | };
|
331 |
|
332 | /**
|
333 | * Set the viewport geometry from a data object containing Flux entities.
|
334 | * See documentation for more explanation of <a href="https://community.flux.io/content/kbentry/2579/geometric-primitives.html">entities</a>
|
335 | * and <a href="https://community.flux.io/content/kbentry/3087/what-is-a-scene.html">scene primitives</a>
|
336 | * @param {Object} data The geometry entities to render
|
337 | * @return {Object} Promise to resolve after geometry is created
|
338 | */
|
339 | FluxViewport.prototype.setGeometryEntity = function(data) {
|
340 | var _this = this;
|
341 | // The flow sends the same value twice, so we assume that requests
|
342 | // sent while there is already one pending are redundant
|
343 | // TODO(Kyle): This is a hack that we can remove once there are not always duplicate requests
|
344 | return new Promise(function (resolve, reject) {
|
345 | if (!_this.running) {
|
346 | _this.running = true;
|
347 | return _this._sceneBuilder.convert(data).then(function (results) {
|
348 | var object = results.getObject();
|
349 | _this._entities = object ? data : null;
|
350 | _this._updateModel(object);
|
351 | _this._latestSceneResults = results;
|
352 | _this.running = false;
|
353 | resolve(results);
|
354 | }).catch(function (err) {
|
355 | console.warn(err); // eslint-disable-line no-console
|
356 | _this.running = false;
|
357 | });
|
358 | } else {
|
359 | reject(new Error('Already running. You can only convert one entity at a time.'));
|
360 | }
|
361 | }).catch(function (err) {
|
362 | if (err.message.indexOf('running') === -1) {
|
363 | console.log(err); // eslint-disable-line no-console
|
364 | }
|
365 | throw err;
|
366 | });
|
367 | };
|
368 |
|
369 | /**
|
370 | * Change the geometry being rendered
|
371 | * @private
|
372 | * @param {THREE.Object3D} newModel The new model to render
|
373 | * @param {THREE.Object3D} oldModel The old model to remove
|
374 | */
|
375 | FluxViewport.prototype._updateModel = function(newModel) {
|
376 | this._renderer.setModel(newModel);
|
377 | if (this._autoFocus) {
|
378 | this.focus(); // changing the controls will trigger a render
|
379 | this._autoFocus = false;
|
380 | } else {
|
381 | this.render();
|
382 | }
|
383 | };
|
384 |
|
385 | /**
|
386 | * Make serializable by pruning all references and building an object property tree
|
387 | * @return {Object} Data to stringify
|
388 | */
|
389 | FluxViewport.prototype.toJSON = function() {
|
390 | var serializableState = {
|
391 | entities: this._entities,
|
392 | renderer: this._renderer.toJSON(),
|
393 | autoFocus: this._autoFocus
|
394 | };
|
395 | return serializableState;
|
396 | };
|
397 |
|
398 | /**
|
399 | * Take a data object and use it to update the viewport's internal state<br>
|
400 | * Warning this is async when it sets entities
|
401 | * @param {Object} state The properties to set
|
402 | * @return {Promise} Completion promise
|
403 | */
|
404 | FluxViewport.prototype.fromJSON = function(state) {
|
405 | if (!state) return Promise.resolve();
|
406 | var _this = this;
|
407 | if (state.entities) {
|
408 | return this.setGeometryEntity(state.entities).then(function () {
|
409 | _this._fromJSONHelper(state);
|
410 | });
|
411 | } else {
|
412 | this._fromJSONHelper(state);
|
413 | return Promise.resolve();
|
414 | }
|
415 | };
|
416 |
|
417 | /**
|
418 | * Rehydrate everything but the entities.
|
419 | * @private
|
420 | * @param {Object} state Parameter data
|
421 | */
|
422 | FluxViewport.prototype._fromJSONHelper = function(state) {
|
423 | if (state.renderer != null) {
|
424 | this._renderer.fromJSON(state.renderer);
|
425 | }
|
426 | if (state.autoFocus != null) {
|
427 | this._autoFocus = state.autoFocus;
|
428 | }
|
429 | };
|
430 |
|
431 | /**
|
432 | * Download all the geometry settings and raster image that are the state of this viewport.
|
433 | * Used for QA testing.
|
434 | * @param {String} prefix File name prefix for download path
|
435 | */
|
436 | FluxViewport.prototype.downloadState = function(prefix) {
|
437 | this._downloadJson(this.toJSON(), prefix);
|
438 | this._download(this._renderer.getGlCanvas().toDataURL('image/png'), prefix+'.png');
|
439 | };
|
440 |
|
441 | /**
|
442 | * Helper function to download some data from a url
|
443 | * @private
|
444 | * @param {DOMString} dataUrl The url containing the data to download
|
445 | * @param {String} filename The name of the file when it downloads
|
446 | */
|
447 | FluxViewport.prototype._download = function(dataUrl, filename) {
|
448 | var a = document.createElement('a');
|
449 | a.href = dataUrl;
|
450 | a.download = filename;
|
451 | a.click();
|
452 | };
|
453 |
|
454 | /**
|
455 | * Create a link and a temporary blob url to use to download from.
|
456 | * @private
|
457 | * @param {Object} data The serializable data to write as JSON
|
458 | * @param {String} prefix The file name prefix
|
459 | */
|
460 | FluxViewport.prototype._downloadJson = function(data, prefix) {
|
461 | if (this._downloadUrl) {
|
462 | window.URL.revokeObjectURL(this._downloadUrl);
|
463 | }
|
464 | var jsonString = JSON.stringify(data, null, 2);
|
465 | this._downloadUrl = window.URL.createObjectURL(new Blob([jsonString]), {type: 'text/json'});
|
466 | this._download(this._downloadUrl, prefix+'.json');
|
467 | };
|
468 |
|
469 | /**
|
470 | * Create a default 3 light rig on the renderer's scene.
|
471 | */
|
472 | FluxViewport.prototype.setupDefaultLighting = function() {
|
473 | var lighting = new THREE.Object3D();
|
474 | lighting.name = 'Lights';
|
475 |
|
476 | //TODO(Kyle) non static lighting
|
477 | this._keyLight = new THREE.DirectionalLight();
|
478 | this._keyLight.position.set(60, 80, 50);
|
479 | this._keyLight.intensity = 2.95;
|
480 | lighting.add(this._keyLight);
|
481 |
|
482 | var backLight = new THREE.DirectionalLight();
|
483 | backLight.position.set(-250, 50, -200);
|
484 | backLight.intensity = 1.7;
|
485 | lighting.add(backLight);
|
486 |
|
487 | var fillLight = new THREE.DirectionalLight();
|
488 | fillLight.position.set(-500, -500, 0);
|
489 | fillLight.intensity = 0.9;
|
490 | lighting.add(fillLight);
|
491 |
|
492 | this._renderer.setLights(lighting);
|
493 | };
|
494 |
|
495 | //---- Pass through functions
|
496 |
|
497 | /**
|
498 | * Set the size of the render canvas
|
499 | * @param {Number} width Pixels
|
500 | * @param {Number} height Pixels
|
501 | */
|
502 | FluxViewport.prototype.setSize = function(width, height) {
|
503 | this._renderer.setSize(width, height);
|
504 | };
|
505 |
|
506 | /**
|
507 | * Set the background color of the render canvas
|
508 | * @param {THREE.color} color Background color
|
509 | * @param {Number} alpha Opacity
|
510 | */
|
511 | FluxViewport.prototype.setClearColor = function(color, alpha) {
|
512 | this._renderer.setClearColor(color, alpha);
|
513 | };
|
514 |
|
515 | /**
|
516 | * Set which camera view to use (ex perspective, top etc.).
|
517 | * @param {FluxCameras.VIEWS} view The new view mode
|
518 | */
|
519 | FluxViewport.prototype.setView = function(view) {
|
520 | this._renderer.setView(view);
|
521 | this.focus();
|
522 | };
|
523 |
|
524 | /**
|
525 | * Return the views enumeration.
|
526 | * Allows you to change the view to perspective, top, etc.
|
527 | * @return {Object} Enumeration of view options for cameras
|
528 | */
|
529 | FluxViewport.getViews = function() {
|
530 | return FluxCameras.VIEWS;
|
531 | };
|
532 |
|
533 | /**
|
534 | * Set the density of the exponential fog. Generally on the order of 0.0001
|
535 | * @param {Number} density How much fog
|
536 | */
|
537 | FluxViewport.prototype.setFogDensity = function(density) {
|
538 | this._renderer._fog.density = density;
|
539 | };
|
540 |
|
541 | /**
|
542 | * Set the url of the tessellation service.
|
543 | * This can be used to replace the value if you did not set it on the constructor.
|
544 | * @param {String} newUrl The url of the tessellation server
|
545 | */
|
546 | FluxViewport.prototype.setTessUrl = function(newUrl) {
|
547 | this._sceneBuilder.setTessUrl(newUrl);
|
548 | };
|
549 |
|
550 | /**
|
551 | * Set whether the viewport should focus the geometry when it is changed
|
552 | * @param {Boolean} focus Whether to auto focus
|
553 | */
|
554 | FluxViewport.prototype.setAutoFocus = function(focus) {
|
555 | this._autoFocus = focus;
|
556 | };
|
557 |
|
558 | /**
|
559 | * Get whether the viewport will focus the geometry when it is changed
|
560 | * @return {Boolean} Whether to auto focus
|
561 | */
|
562 | FluxViewport.prototype.getAutoFocus = function() {
|
563 | return this._autoFocus;
|
564 | };
|
565 |
|
566 | /**
|
567 | * Set the edges rendering mode for hidden line rendering
|
568 | * @param {FluxViewport.EDGES_MODES} mode Whether to render front, back, both or none
|
569 | */
|
570 | FluxViewport.prototype.setEdgesMode = function(mode) {
|
571 | this._renderer.setEdgesMode(mode);
|
572 | };
|
573 |
|
574 | /**
|
575 | * Get the canvas for use in QA scripts
|
576 | * @return {Canvas} WebGL canvas dom element
|
577 | */
|
578 | FluxViewport.prototype.getGlCanvas = function() {
|
579 | return this._renderer.getGlCanvas();
|
580 | };
|
581 |
|
582 | /**
|
583 | * Turn on shadow rendering (not implemented)
|
584 | */
|
585 | FluxViewport.prototype.activateShadows = function() {
|
586 | print.warn('Shadows are not implemented yet');
|
587 | // https://vannevar.atlassian.net/browse/LIB3D-97
|
588 | };
|
589 | </code></pre>
|
590 | </article>
|
591 | </section>
|
592 |
|
593 |
|
594 |
|
595 |
|
596 | </div>
|
597 |
|
598 | <br class="clear">
|
599 |
|
600 | <footer>
|
601 | 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.
|
602 | </footer>
|
603 |
|
604 | <script>prettyPrint();</script>
|
605 | <script src="scripts/linenumber.js"></script>
|
606 | </body>
|
607 | </html>
|