UNPKG

flux-viewport/docs/FluxViewport.html

Version:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>FluxViewport - 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">FluxViewport</h1>
32    
33
34    
35
36
37
38
39<section>
40
41<header>
42    
43        <h2>
44        FluxViewport
45        </h2>
46        
47    
48</header>
49
50<article>
51    <div class="container-overview">
52    
53        
54
55    
56
57    <h4 class="name" id="FluxViewport"><span class="type-signature"></span>new FluxViewport<span class="signature">(domParent, optionalParams)</span><span class="type-signature"></span></h4>
58
59    
60
61
62
63<div class="description">
64    UI widget to render 3D geometry.
65This class provides all the interface you need to add the flux web
66viewer to your SDK app. This allows you to interpret Flux json data
67and render that geometry. You may also create any number of viewports
68and they will share the finite number of WebGL contexts available
69from the browser.<br>
70The most commonly used functions are <a href="#setGeometryEntity">setGeometryEntity</a> (to set geometry to render)
71and <a href="#.isKnownGeom">isKnownGeom</a> (determine if JSON is geometry) so you might want to start reading there. <br>
72Note: If you are using <a href="https://community.flux.io/content/kbentry/2718/materials-1.html">Flux materials</a> that have the parameter roughness
73set then you will need to configure your server to have a <a href="https://content-security-policy.com">content security
74policy</a> that allows content from https://object-library.storage.googleapis.com
75so that our environment texture images can be loaded.
76</div>
77
78
79
80
81
82
83
84
85
86    <h5>Parameters:</h5>
87    
88
89<table class="params">
90    <thead>
91    <tr>
92        
93        <th>Name</th>
94        
95
96        <th>Type</th>
97
98        
99
100        
101
102        <th class="last">Description</th>
103    </tr>
104    </thead>
105
106    <tbody>
107    
108
109        <tr>
110            
111                <td class="name"><code>domParent</code></td>
112            
113
114            <td class="type">
115            
116                
117<span class="param-type">Element</span>
118
119
120            
121            </td>
122
123            
124
125            
126
127            <td class="description last">The div container for the canvas</td>
128        </tr>
129
130    
131
132        <tr>
133            
134                <td class="name"><code>optionalParams</code></td>
135            
136
137            <td class="type">
138            
139                
140<span class="param-type">Object</span>
141
142
143            
144            </td>
145
146            
147
148            
149
150            <td class="description last">Object containing all other parameters
151                <h6>Properties</h6>
152                
153
154<table class="params">
155    <thead>
156    <tr>
157        
158        <th>Name</th>
159        
160
161        <th>Type</th>
162
163        
164
165        
166
167        <th class="last">Description</th>
168    </tr>
169    </thead>
170
171    <tbody>
172    
173
174        <tr>
175            
176                <td class="name"><code>width</code></td>
177            
178
179            <td class="type">
180            
181                
182<span class="param-type">Number</span>
183
184
185            
186            </td>
187
188            
189
190            
191
192            <td class="description last">The width of the canvas</td>
193        </tr>
194
195    
196
197        <tr>
198            
199                <td class="name"><code>height</code></td>
200            
201
202            <td class="type">
203            
204                
205<span class="param-type">Number</span>
206
207
208            
209            </td>
210
211            
212
213            
214
215            <td class="description last">The height of the canvas</td>
216        </tr>
217
218    
219
220        <tr>
221            
222                <td class="name"><code>tessUrl</code></td>
223            
224
225            <td class="type">
226            
227                
228<span class="param-type">String</span>
229
230
231            
232            </td>
233
234            
235
236            
237
238            <td class="description last">The url for making brep tessellation requests (overrides projectId) (Used when server is not flux.io)</td>
239        </tr>
240
241    
242
243        <tr>
244            
245                <td class="name"><code>selection</code></td>
246            
247
248            <td class="type">
249            
250                
251<span class="param-type">Enumeration</span>
252
253
254            
255            </td>
256
257            
258
259            
260
261            <td class="description last">Whether to enable user selection</td>
262        </tr>
263
264    
265
266        <tr>
267            
268                <td class="name"><code>projectId</code></td>
269            
270
271            <td class="type">
272            
273                
274<span class="param-type">String</span>
275
276
277            
278            </td>
279
280            
281
282            
283
284            <td class="description last">Id of a flux project (required to render breps)</td>
285        </tr>
286
287    
288
289        <tr>
290            
291                <td class="name"><code>token</code></td>
292            
293
294            <td class="type">
295            
296                
297<span class="param-type">String</span>
298
299
300            
301            </td>
302
303            
304
305            
306
307            <td class="description last">The current flux auth token (required to render breps)</td>
308        </tr>
309
310    
311    </tbody>
312</table>
313
314            </td>
315        </tr>
316
317    
318    </tbody>
319</table>
320
321
322
323
324
325
326<dl class="details">
327
328    
329
330    
331
332    
333
334    
335
336    
337
338    
339
340    
341
342    
343
344    
345
346    
347
348    
349
350    
351
352    
353    <dt class="tag-source">Source:</dt>
354    <dd class="tag-source"><ul class="dummy"><li>
355        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line12">line 12</a>
356    </li></ul></dd>
357    
358
359    
360
361    
362
363    
364</dl>
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381    
382    </div>
383
384    
385
386    
387
388    
389
390     
391
392    
393
394    
395
396    
397        <h3 class="subsection-title">Methods</h3>
398
399        
400            
401
402    
403
404    <h4 class="name" id=".getChangeEvent"><span class="type-signature">(static) </span>getChangeEvent<span class="signature">()</span><span class="type-signature"> &rarr; {String}</span></h4>
405
406    
407
408
409
410<div class="description">
411    Name of the event fired when the camera changes
412
413This can be used to observe those changes and register a callback.<br>
414For example:
415fluxViewport.addEventListener(FluxViewport.getChangeEvent(), function() {});
416</div>
417
418
419
420
421
422
423
424
425
426
427
428
429
430<dl class="details">
431
432    
433
434    
435
436    
437
438    
439
440    
441
442    
443
444    
445
446    
447
448    
449
450    
451
452    
453
454    
455
456    
457    <dt class="tag-source">Source:</dt>
458    <dd class="tag-source"><ul class="dummy"><li>
459        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line144">line 144</a>
460    </li></ul></dd>
461    
462
463    
464
465    
466
467    
468</dl>
469
470
471
472
473
474
475
476
477
478
479
480
481
482<h5>Returns:</h5>
483
484        
485<div class="param-desc">
486    Event name
487</div>
488
489
490
491<dl class="param-type">
492    <dt>
493        Type
494    </dt>
495    <dd>
496        
497<span class="param-type">String</span>
498
499
500    </dd>
501</dl>
502
503    
504
505
506
507        
508            
509
510    
511
512    <h4 class="name" id=".getEdgesModes"><span class="type-signature">(static) </span>getEdgesModes<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
513
514    
515    <p class="summary">Enumeration of edges rendering modes.
516This determines whether edges will be shown when rendering the front face, back face or both.
517Front edge rendering can be used to achieve hidden line rendering.<br>
518Options are NONE, FRONT, BACK, BOTH</p>
519    
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535<dl class="details">
536
537    
538
539    
540
541    
542
543    
544
545    
546
547    
548
549    
550
551    
552
553    
554
555    
556
557    
558
559    
560
561    
562    <dt class="tag-source">Source:</dt>
563    <dd class="tag-source"><ul class="dummy"><li>
564        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line122">line 122</a>
565    </li></ul></dd>
566    
567
568    
569
570    
571
572    
573</dl>
574
575
576
577
578
579
580
581
582
583
584
585
586
587<h5>Returns:</h5>
588
589        
590<div class="param-desc">
591    enumeration
592</div>
593
594
595
596<dl class="param-type">
597    <dt>
598        Type
599    </dt>
600    <dd>
601        
602<span class="param-type">Object</span>
603
604
605    </dd>
606</dl>
607
608    
609
610
611
612        
613            
614
615    
616
617    <h4 class="name" id=".getEvents"><span class="type-signature">(static) </span>getEvents<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
618
619    
620
621
622
623<div class="description">
624    Enumeration of different event types
625This can be used to differentiate events in the EventListener.
626fluxViewport.addEventListener(FluxViewport.getChangeEvent(), function(e) {
627FluxViewport.getEvents().SELECT === e.event;});
628</div>
629
630
631
632
633
634
635
636
637
638
639
640
641
642<dl class="details">
643
644    
645
646    
647
648    
649
650    
651
652    
653
654    
655
656    
657
658    
659
660    
661
662    
663
664    
665
666    
667
668    
669    <dt class="tag-source">Source:</dt>
670    <dd class="tag-source"><ul class="dummy"><li>
671        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line155">line 155</a>
672    </li></ul></dd>
673    
674
675    
676
677    
678
679    
680</dl>
681
682
683
684
685
686
687
688
689
690
691
692
693
694<h5>Returns:</h5>
695
696        
697<div class="param-desc">
698    Enumeration object
699</div>
700
701
702
703<dl class="param-type">
704    <dt>
705        Type
706    </dt>
707    <dd>
708        
709<span class="param-type">Object</span>
710
711
712    </dd>
713</dl>
714
715    
716
717
718
719        
720            
721
722    
723
724    <h4 class="name" id=".getSelectionModes"><span class="type-signature">(static) </span>getSelectionModes<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
725
726    
727    <p class="summary">Enumeration of selection modes.
728This determines when selection events occur in response to mouse events.
729Options are NONE, CLICK, HOVER</p>
730    
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746<dl class="details">
747
748    
749
750    
751
752    
753
754    
755
756    
757
758    
759
760    
761
762    
763
764    
765
766    
767
768    
769
770    
771
772    
773    <dt class="tag-source">Source:</dt>
774    <dd class="tag-source"><ul class="dummy"><li>
775        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line132">line 132</a>
776    </li></ul></dd>
777    
778
779    
780
781    
782
783    
784</dl>
785
786
787
788
789
790
791
792
793
794
795
796
797
798<h5>Returns:</h5>
799
800        
801<div class="param-desc">
802    enumeration
803</div>
804
805
806
807<dl class="param-type">
808    <dt>
809        Type
810    </dt>
811    <dd>
812        
813<span class="param-type">Object</span>
814
815
816    </dd>
817</dl>
818
819    
820
821
822
823        
824            
825
826    
827
828    <h4 class="name" id=".getViews"><span class="type-signature">(static) </span>getViews<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
829
830    
831
832
833
834<div class="description">
835    Return the views enumeration.
836Allows you to change the view to perspective, top, etc.
837</div>
838
839
840
841
842
843
844
845
846
847
848
849
850
851<dl class="details">
852
853    
854
855    
856
857    
858
859    
860
861    
862
863    
864
865    
866
867    
868
869    
870
871    
872
873    
874
875    
876
877    
878    <dt class="tag-source">Source:</dt>
879    <dd class="tag-source"><ul class="dummy"><li>
880        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line489">line 489</a>
881    </li></ul></dd>
882    
883
884    
885
886    
887
888    
889</dl>
890
891
892
893
894
895
896
897
898
899
900
901
902
903<h5>Returns:</h5>
904
905        
906<div class="param-desc">
907    Enumeration of view options for cameras
908</div>
909
910
911
912<dl class="param-type">
913    <dt>
914        Type
915    </dt>
916    <dd>
917        
918<span class="param-type">Object</span>
919
920
921    </dd>
922</dl>
923
924    
925
926
927
928        
929            
930
931    
932
933    <h4 class="name" id=".isKnownGeom"><span class="type-signature">(static) </span>isKnownGeom<span class="signature">(entities)</span><span class="type-signature"> &rarr; {Boolean}</span></h4>
934
935    
936
937
938
939<div class="description">
940    Determines whether the entity or list of entities contains geometry
941</div>
942
943
944
945
946
947
948
949
950
951    <h5>Parameters:</h5>
952    
953
954<table class="params">
955    <thead>
956    <tr>
957        
958        <th>Name</th>
959        
960
961        <th>Type</th>
962
963        
964
965        
966
967        <th class="last">Description</th>
968    </tr>
969    </thead>
970
971    <tbody>
972    
973
974        <tr>
975            
976                <td class="name"><code>entities</code></td>
977            
978
979            <td class="type">
980            
981                
982<span class="param-type">Array.&lt;Object></span>
983|
984
985<span class="param-type">Object</span>
986
987
988            
989            </td>
990
991            
992
993            
994
995            <td class="description last">Geometry data</td>
996        </tr>
997
998    
999    </tbody>
1000</table>
1001
1002
1003
1004
1005
1006
1007<dl class="details">
1008
1009    
1010
1011    
1012
1013    
1014
1015    
1016
1017    
1018
1019    
1020
1021    
1022
1023    
1024
1025    
1026
1027    
1028
1029    
1030
1031    
1032
1033    
1034    <dt class="tag-source">Source:</dt>
1035    <dd class="tag-source"><ul class="dummy"><li>
1036        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line164">line 164</a>
1037    </li></ul></dd>
1038    
1039
1040    
1041
1042    
1043
1044    
1045</dl>
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059<h5>Returns:</h5>
1060
1061        
1062<div class="param-desc">
1063    True for objects/lists containing geometry
1064</div>
1065
1066
1067
1068<dl class="param-type">
1069    <dt>
1070        Type
1071    </dt>
1072    <dd>
1073        
1074<span class="param-type">Boolean</span>
1075
1076
1077    </dd>
1078</dl>
1079
1080    
1081
1082
1083
1084        
1085            
1086
1087    
1088
1089    <h4 class="name" id="activateShadows"><span class="type-signature"></span>activateShadows<span class="signature">()</span><span class="type-signature"></span></h4>
1090
1091    
1092
1093
1094
1095<div class="description">
1096    Turn on shadow rendering (not implemented)
1097</div>
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111<dl class="details">
1112
1113    
1114
1115    
1116
1117    
1118
1119    
1120
1121    
1122
1123    
1124
1125    
1126
1127    
1128
1129    
1130
1131    
1132
1133    
1134
1135    
1136
1137    
1138    <dt class="tag-source">Source:</dt>
1139    <dd class="tag-source"><ul class="dummy"><li>
1140        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line545">line 545</a>
1141    </li></ul></dd>
1142    
1143
1144    
1145
1146    
1147
1148    
1149</dl>
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166        
1167            
1168
1169    
1170
1171    <h4 class="name" id="addControls"><span class="type-signature"></span>addControls<span class="signature">(CustomControls)</span><span class="type-signature"> &rarr; {CustomControls}</span></h4>
1172
1173    
1174
1175
1176
1177<div class="description">
1178    Add a new plugin for user interaction controls.
1179See ViewportControls.js for more information.
1180</div>
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190    <h5>Parameters:</h5>
1191    
1192
1193<table class="params">
1194    <thead>
1195    <tr>
1196        
1197        <th>Name</th>
1198        
1199
1200        <th>Type</th>
1201
1202        
1203
1204        
1205
1206        <th class="last">Description</th>
1207    </tr>
1208    </thead>
1209
1210    <tbody>
1211    
1212
1213        <tr>
1214            
1215                <td class="name"><code>CustomControls</code></td>
1216            
1217
1218            <td class="type">
1219            
1220                
1221<span class="param-type">ViewportControls</span>
1222
1223
1224            
1225            </td>
1226
1227            
1228
1229            
1230
1231            <td class="description last">A constructor that implements the controls interface.</td>
1232        </tr>
1233
1234    
1235    </tbody>
1236</table>
1237
1238
1239
1240
1241
1242
1243<dl class="details">
1244
1245    
1246
1247    
1248
1249    
1250
1251    
1252
1253    
1254
1255    
1256
1257    
1258
1259    
1260
1261    
1262
1263    
1264
1265    
1266
1267    
1268
1269    
1270    <dt class="tag-source">Source:</dt>
1271    <dd class="tag-source"><ul class="dummy"><li>
1272        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line188">line 188</a>
1273    </li></ul></dd>
1274    
1275
1276    
1277
1278    
1279
1280    
1281</dl>
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295<h5>Returns:</h5>
1296
1297        
1298<div class="param-desc">
1299    The new instance
1300</div>
1301
1302
1303
1304<dl class="param-type">
1305    <dt>
1306        Type
1307    </dt>
1308    <dd>
1309        
1310<span class="param-type">CustomControls</span>
1311
1312
1313    </dd>
1314</dl>
1315
1316    
1317
1318
1319
1320        
1321            
1322
1323    
1324
1325    <h4 class="name" id="downloadState"><span class="type-signature"></span>downloadState<span class="signature">(prefix)</span><span class="type-signature"></span></h4>
1326
1327    
1328
1329
1330
1331<div class="description">
1332    Download all the geometry settings and raster image that are the state of this viewport.
1333Used for QA testing.
1334</div>
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344    <h5>Parameters:</h5>
1345    
1346
1347<table class="params">
1348    <thead>
1349    <tr>
1350        
1351        <th>Name</th>
1352        
1353
1354        <th>Type</th>
1355
1356        
1357
1358        
1359
1360        <th class="last">Description</th>
1361    </tr>
1362    </thead>
1363
1364    <tbody>
1365    
1366
1367        <tr>
1368            
1369                <td class="name"><code>prefix</code></td>
1370            
1371
1372            <td class="type">
1373            
1374                
1375<span class="param-type">String</span>
1376
1377
1378            
1379            </td>
1380
1381            
1382
1383            
1384
1385            <td class="description last">File name prefix for download path</td>
1386        </tr>
1387
1388    
1389    </tbody>
1390</table>
1391
1392
1393
1394
1395
1396
1397<dl class="details">
1398
1399    
1400
1401    
1402
1403    
1404
1405    
1406
1407    
1408
1409    
1410
1411    
1412
1413    
1414
1415    
1416
1417    
1418
1419    
1420
1421    
1422
1423    
1424    <dt class="tag-source">Source:</dt>
1425    <dd class="tag-source"><ul class="dummy"><li>
1426        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line396">line 396</a>
1427    </li></ul></dd>
1428    
1429
1430    
1431
1432    
1433
1434    
1435</dl>
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452        
1453            
1454
1455    
1456
1457    <h4 class="name" id="focus"><span class="type-signature"></span>focus<span class="signature">(obj<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
1458
1459    
1460
1461
1462
1463<div class="description">
1464    Focus the camera on the current geometry
1465</div>
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475    <h5>Parameters:</h5>
1476    
1477
1478<table class="params">
1479    <thead>
1480    <tr>
1481        
1482        <th>Name</th>
1483        
1484
1485        <th>Type</th>
1486
1487        
1488        <th>Attributes</th>
1489        
1490
1491        
1492
1493        <th class="last">Description</th>
1494    </tr>
1495    </thead>
1496
1497    <tbody>
1498    
1499
1500        <tr>
1501            
1502                <td class="name"><code>obj</code></td>
1503            
1504
1505            <td class="type">
1506            
1507                
1508<span class="param-type">THREE.Object3D</span>
1509
1510
1511            
1512            </td>
1513
1514            
1515                <td class="attributes">
1516                
1517                    &lt;optional><br>
1518                
1519
1520                
1521
1522                
1523                </td>
1524            
1525
1526            
1527
1528            <td class="description last">Object to focus on</td>
1529        </tr>
1530
1531    
1532    </tbody>
1533</table>
1534
1535
1536
1537
1538
1539
1540<dl class="details">
1541
1542    
1543
1544    
1545
1546    
1547
1548    
1549
1550    
1551
1552    
1553
1554    
1555
1556    
1557
1558    
1559
1560    
1561
1562    
1563
1564    
1565
1566    
1567    <dt class="tag-source">Source:</dt>
1568    <dd class="tag-source"><ul class="dummy"><li>
1569        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line262">line 262</a>
1570    </li></ul></dd>
1571    
1572
1573    
1574
1575    
1576
1577    
1578</dl>
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595        
1596            
1597
1598    
1599
1600    <h4 class="name" id="fromJSON"><span class="type-signature"></span>fromJSON<span class="signature">(state)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
1601
1602    
1603
1604
1605
1606<div class="description">
1607    Take a data object and use it to update the viewport's internal state<br>
1608Warning this is async when it sets entities
1609</div>
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619    <h5>Parameters:</h5>
1620    
1621
1622<table class="params">
1623    <thead>
1624    <tr>
1625        
1626        <th>Name</th>
1627        
1628
1629        <th>Type</th>
1630
1631        
1632
1633        
1634
1635        <th class="last">Description</th>
1636    </tr>
1637    </thead>
1638
1639    <tbody>
1640    
1641
1642        <tr>
1643            
1644                <td class="name"><code>state</code></td>
1645            
1646
1647            <td class="type">
1648            
1649                
1650<span class="param-type">Object</span>
1651
1652
1653            
1654            </td>
1655
1656            
1657
1658            
1659
1660            <td class="description last">The properties to set</td>
1661        </tr>
1662
1663    
1664    </tbody>
1665</table>
1666
1667
1668
1669
1670
1671
1672<dl class="details">
1673
1674    
1675
1676    
1677
1678    
1679
1680    
1681
1682    
1683
1684    
1685
1686    
1687
1688    
1689
1690    
1691
1692    
1693
1694    
1695
1696    
1697
1698    
1699    <dt class="tag-source">Source:</dt>
1700    <dd class="tag-source"><ul class="dummy"><li>
1701        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line364">line 364</a>
1702    </li></ul></dd>
1703    
1704
1705    
1706
1707    
1708
1709    
1710</dl>
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724<h5>Returns:</h5>
1725
1726        
1727<div class="param-desc">
1728    Completion promise
1729</div>
1730
1731
1732
1733<dl class="param-type">
1734    <dt>
1735        Type
1736    </dt>
1737    <dd>
1738        
1739<span class="param-type">Promise</span>
1740
1741
1742    </dd>
1743</dl>
1744
1745    
1746
1747
1748
1749        
1750            
1751
1752    
1753
1754    <h4 class="name" id="getAutoFocus"><span class="type-signature"></span>getAutoFocus<span class="signature">()</span><span class="type-signature"> &rarr; {Boolean}</span></h4>
1755
1756    
1757
1758
1759
1760<div class="description">
1761    Get whether the viewport will focus the geometry when it is changed
1762</div>
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776<dl class="details">
1777
1778    
1779
1780    
1781
1782    
1783
1784    
1785
1786    
1787
1788    
1789
1790    
1791
1792    
1793
1794    
1795
1796    
1797
1798    
1799
1800    
1801
1802    
1803    <dt class="tag-source">Source:</dt>
1804    <dd class="tag-source"><ul class="dummy"><li>
1805        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line522">line 522</a>
1806    </li></ul></dd>
1807    
1808
1809    
1810
1811    
1812
1813    
1814</dl>
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828<h5>Returns:</h5>
1829
1830        
1831<div class="param-desc">
1832    Whether to auto focus
1833</div>
1834
1835
1836
1837<dl class="param-type">
1838    <dt>
1839        Type
1840    </dt>
1841    <dd>
1842        
1843<span class="param-type">Boolean</span>
1844
1845
1846    </dd>
1847</dl>
1848
1849    
1850
1851
1852
1853        
1854            
1855
1856    
1857
1858    <h4 class="name" id="getGlCanvas"><span class="type-signature"></span>getGlCanvas<span class="signature">()</span><span class="type-signature"> &rarr; {Canvas}</span></h4>
1859
1860    
1861
1862
1863
1864<div class="description">
1865    Get the canvas for use in QA scripts
1866</div>
1867
1868
1869
1870
1871
1872
1873
1874
1875
1876
1877
1878
1879
1880<dl class="details">
1881
1882    
1883
1884    
1885
1886    
1887
1888    
1889
1890    
1891
1892    
1893
1894    
1895
1896    
1897
1898    
1899
1900    
1901
1902    
1903
1904    
1905
1906    
1907    <dt class="tag-source">Source:</dt>
1908    <dd class="tag-source"><ul class="dummy"><li>
1909        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line538">line 538</a>
1910    </li></ul></dd>
1911    
1912
1913    
1914
1915    
1916
1917    
1918</dl>
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932<h5>Returns:</h5>
1933
1934        
1935<div class="param-desc">
1936    WebGL canvas dom element
1937</div>
1938
1939
1940
1941<dl class="param-type">
1942    <dt>
1943        Type
1944    </dt>
1945    <dd>
1946        
1947<span class="param-type">Canvas</span>
1948
1949
1950    </dd>
1951</dl>
1952
1953    
1954
1955
1956
1957        
1958            
1959
1960    
1961
1962    <h4 class="name" id="getJson"><span class="type-signature"></span>getJson<span class="signature">(ids)</span><span class="type-signature"> &rarr; {Array.&lt;Object>}</span></h4>
1963
1964    
1965
1966
1967
1968<div class="description">
1969    Get the JSON representation of the objects with the given ids
1970</div>
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980    <h5>Parameters:</h5>
1981    
1982
1983<table class="params">
1984    <thead>
1985    <tr>
1986        
1987        <th>Name</th>
1988        
1989
1990        <th>Type</th>
1991
1992        
1993
1994        
1995
1996        <th class="last">Description</th>
1997    </tr>
1998    </thead>
1999
2000    <tbody>
2001    
2002
2003        <tr>
2004            
2005                <td class="name"><code>ids</code></td>
2006            
2007
2008            <td class="type">
2009            
2010                
2011<span class="param-type">Array.&lt;String></span>
2012
2013
2014            
2015            </td>
2016
2017            
2018
2019            
2020
2021            <td class="description last">List of object ids</td>
2022        </tr>
2023
2024    
2025    </tbody>
2026</table>
2027
2028
2029
2030
2031
2032
2033<dl class="details">
2034
2035    
2036
2037    
2038
2039    
2040
2041    
2042
2043    
2044
2045    
2046
2047    
2048
2049    
2050
2051    
2052
2053    
2054
2055    
2056
2057    
2058
2059    
2060    <dt class="tag-source">Source:</dt>
2061    <dd class="tag-source"><ul class="dummy"><li>
2062        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line242">line 242</a>
2063    </li></ul></dd>
2064    
2065
2066    
2067
2068    
2069
2070    
2071</dl>
2072
2073
2074
2075
2076
2077
2078
2079
2080
2081
2082
2083
2084
2085<h5>Returns:</h5>
2086
2087        
2088<div class="param-desc">
2089    List of Flux JSON objects
2090</div>
2091
2092
2093
2094<dl class="param-type">
2095    <dt>
2096        Type
2097    </dt>
2098    <dd>
2099        
2100<span class="param-type">Array.&lt;Object></span>
2101
2102
2103    </dd>
2104</dl>
2105
2106    
2107
2108
2109
2110        
2111            
2112
2113    
2114
2115    <h4 class="name" id="getObjectMap"><span class="type-signature"></span>getObjectMap<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
2116
2117    
2118
2119
2120
2121<div class="description">
2122    Get an object that maps from id string to Three.Object3D in the current scene
2123</div>
2124
2125
2126
2127
2128
2129
2130
2131
2132
2133
2134
2135
2136
2137<dl class="details">
2138
2139    
2140
2141    
2142
2143    
2144
2145    
2146
2147    
2148
2149    
2150
2151    
2152
2153    
2154
2155    
2156
2157    
2158
2159    
2160
2161    
2162
2163    
2164    <dt class="tag-source">Source:</dt>
2165    <dd class="tag-source"><ul class="dummy"><li>
2166        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line197">line 197</a>
2167    </li></ul></dd>
2168    
2169
2170    
2171
2172    
2173
2174    
2175</dl>
2176
2177
2178
2179
2180
2181
2182
2183
2184
2185
2186
2187
2188
2189<h5>Returns:</h5>
2190
2191        
2192<div class="param-desc">
2193    Id to object scene map
2194</div>
2195
2196
2197
2198<dl class="param-type">
2199    <dt>
2200        Type
2201    </dt>
2202    <dd>
2203        
2204<span class="param-type">Object</span>
2205
2206
2207    </dd>
2208</dl>
2209
2210    
2211
2212
2213
2214        
2215            
2216
2217    
2218
2219    <h4 class="name" id="getSelection"><span class="type-signature"></span>getSelection<span class="signature">()</span><span class="type-signature"> &rarr; {Array.&lt;String>}</span></h4>
2220
2221    
2222
2223
2224
2225<div class="description">
2226    Get the currently selected geometry as a list of id strings
2227</div>
2228
2229
2230
2231
2232
2233
2234
2235
2236
2237
2238
2239
2240
2241<dl class="details">
2242
2243    
2244
2245    
2246
2247    
2248
2249    
2250
2251    
2252
2253    
2254
2255    
2256
2257    
2258
2259    
2260
2261    
2262
2263    
2264
2265    
2266
2267    
2268    <dt class="tag-source">Source:</dt>
2269    <dd class="tag-source"><ul class="dummy"><li>
2270        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line205">line 205</a>
2271    </li></ul></dd>
2272    
2273
2274    
2275
2276    
2277
2278    
2279</dl>
2280
2281
2282
2283
2284
2285
2286
2287
2288
2289
2290
2291
2292
2293<h5>Returns:</h5>
2294
2295        
2296<div class="param-desc">
2297    Current selection
2298</div>
2299
2300
2301
2302<dl class="param-type">
2303    <dt>
2304        Type
2305    </dt>
2306    <dd>
2307        
2308<span class="param-type">Array.&lt;String></span>
2309
2310
2311    </dd>
2312</dl>
2313
2314    
2315
2316
2317
2318        
2319            
2320
2321    
2322
2323    <h4 class="name" id="homeCamera"><span class="type-signature"></span>homeCamera<span class="signature">()</span><span class="type-signature"></span></h4>
2324
2325    
2326
2327
2328
2329<div class="description">
2330    Restore the camera to a default location
2331</div>
2332
2333
2334
2335
2336
2337
2338
2339
2340
2341
2342
2343
2344
2345<dl class="details">
2346
2347    
2348
2349    
2350
2351    
2352
2353    
2354
2355    
2356
2357    
2358
2359    
2360
2361    
2362
2363    
2364
2365    
2366
2367    
2368
2369    
2370
2371    
2372    <dt class="tag-source">Source:</dt>
2373    <dd class="tag-source"><ul class="dummy"><li>
2374        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line269">line 269</a>
2375    </li></ul></dd>
2376    
2377
2378    
2379
2380    
2381
2382    
2383</dl>
2384
2385
2386
2387
2388
2389
2390
2391
2392
2393
2394
2395
2396
2397
2398
2399
2400        
2401            
2402
2403    
2404
2405    <h4 class="name" id="render"><span class="type-signature"></span>render<span class="signature">()</span><span class="type-signature"></span></h4>
2406
2407    
2408
2409
2410
2411<div class="description">
2412    Actually render the geometry!<br>
2413This is called automatically when the camera changes.
2414You may call it on demand as needed when changing properties.
2415</div>
2416
2417
2418
2419
2420
2421
2422
2423
2424
2425
2426
2427
2428
2429<dl class="details">
2430
2431    
2432
2433    
2434
2435    
2436
2437    
2438
2439    
2440
2441    
2442
2443    
2444
2445    
2446
2447    
2448
2449    
2450
2451    
2452
2453    
2454
2455    
2456    <dt class="tag-source">Source:</dt>
2457    <dd class="tag-source"><ul class="dummy"><li>
2458        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line254">line 254</a>
2459    </li></ul></dd>
2460    
2461
2462    
2463
2464    
2465
2466    
2467</dl>
2468
2469
2470
2471
2472
2473
2474
2475
2476
2477
2478
2479
2480
2481
2482
2483
2484        
2485            
2486
2487    
2488
2489    <h4 class="name" id="setAutoFocus"><span class="type-signature"></span>setAutoFocus<span class="signature">(focus)</span><span class="type-signature"></span></h4>
2490
2491    
2492
2493
2494
2495<div class="description">
2496    Set whether the viewport should focus the geometry when it is changed
2497</div>
2498
2499
2500
2501
2502
2503
2504
2505
2506
2507    <h5>Parameters:</h5>
2508    
2509
2510<table class="params">
2511    <thead>
2512    <tr>
2513        
2514        <th>Name</th>
2515        
2516
2517        <th>Type</th>
2518
2519        
2520
2521        
2522
2523        <th class="last">Description</th>
2524    </tr>
2525    </thead>
2526
2527    <tbody>
2528    
2529
2530        <tr>
2531            
2532                <td class="name"><code>focus</code></td>
2533            
2534
2535            <td class="type">
2536            
2537                
2538<span class="param-type">Boolean</span>
2539
2540
2541            
2542            </td>
2543
2544            
2545
2546            
2547
2548            <td class="description last">Whether to auto focus</td>
2549        </tr>
2550
2551    
2552    </tbody>
2553</table>
2554
2555
2556
2557
2558
2559
2560<dl class="details">
2561
2562    
2563
2564    
2565
2566    
2567
2568    
2569
2570    
2571
2572    
2573
2574    
2575
2576    
2577
2578    
2579
2580    
2581
2582    
2583
2584    
2585
2586    
2587    <dt class="tag-source">Source:</dt>
2588    <dd class="tag-source"><ul class="dummy"><li>
2589        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line514">line 514</a>
2590    </li></ul></dd>
2591    
2592
2593    
2594
2595    
2596
2597    
2598</dl>
2599
2600
2601
2602
2603
2604
2605
2606
2607
2608
2609
2610
2611
2612
2613
2614
2615        
2616            
2617
2618    
2619
2620    <h4 class="name" id="setClearColor"><span class="type-signature"></span>setClearColor<span class="signature">(color, alpha)</span><span class="type-signature"></span></h4>
2621
2622    
2623
2624
2625
2626<div class="description">
2627    Set the background color of the render canvas
2628</div>
2629
2630
2631
2632
2633
2634
2635
2636
2637
2638    <h5>Parameters:</h5>
2639    
2640
2641<table class="params">
2642    <thead>
2643    <tr>
2644        
2645        <th>Name</th>
2646        
2647
2648        <th>Type</th>
2649
2650        
2651
2652        
2653
2654        <th class="last">Description</th>
2655    </tr>
2656    </thead>
2657
2658    <tbody>
2659    
2660
2661        <tr>
2662            
2663                <td class="name"><code>color</code></td>
2664            
2665
2666            <td class="type">
2667            
2668                
2669<span class="param-type">THREE.color</span>
2670
2671
2672            
2673            </td>
2674
2675            
2676
2677            
2678
2679            <td class="description last">Background color</td>
2680        </tr>
2681
2682    
2683
2684        <tr>
2685            
2686                <td class="name"><code>alpha</code></td>
2687            
2688
2689            <td class="type">
2690            
2691                
2692<span class="param-type">Number</span>
2693
2694
2695            
2696            </td>
2697
2698            
2699
2700            
2701
2702            <td class="description last">Opacity</td>
2703        </tr>
2704
2705    
2706    </tbody>
2707</table>
2708
2709
2710
2711
2712
2713
2714<dl class="details">
2715
2716    
2717
2718    
2719
2720    
2721
2722    
2723
2724    
2725
2726    
2727
2728    
2729
2730    
2731
2732    
2733
2734    
2735
2736    
2737
2738    
2739
2740    
2741    <dt class="tag-source">Source:</dt>
2742    <dd class="tag-source"><ul class="dummy"><li>
2743        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line471">line 471</a>
2744    </li></ul></dd>
2745    
2746
2747    
2748
2749    
2750
2751    
2752</dl>
2753
2754
2755
2756
2757
2758
2759
2760
2761
2762
2763
2764
2765
2766
2767
2768
2769        
2770            
2771
2772    
2773
2774    <h4 class="name" id="setEdgesMode"><span class="type-signature"></span>setEdgesMode<span class="signature">(mode)</span><span class="type-signature"></span></h4>
2775
2776    
2777
2778
2779
2780<div class="description">
2781    Set the edges rendering mode for hidden line rendering
2782</div>
2783
2784
2785
2786
2787
2788
2789
2790
2791
2792    <h5>Parameters:</h5>
2793    
2794
2795<table class="params">
2796    <thead>
2797    <tr>
2798        
2799        <th>Name</th>
2800        
2801
2802        <th>Type</th>
2803
2804        
2805
2806        
2807
2808        <th class="last">Description</th>
2809    </tr>
2810    </thead>
2811
2812    <tbody>
2813    
2814
2815        <tr>
2816            
2817                <td class="name"><code>mode</code></td>
2818            
2819
2820            <td class="type">
2821            
2822                
2823<span class="param-type">FluxViewport.EDGES_MODES</span>
2824
2825
2826            
2827            </td>
2828
2829            
2830
2831            
2832
2833            <td class="description last">Whether to render front, back, both or none</td>
2834        </tr>
2835
2836    
2837    </tbody>
2838</table>
2839
2840
2841
2842
2843
2844
2845<dl class="details">
2846
2847    
2848
2849    
2850
2851    
2852
2853    
2854
2855    
2856
2857    
2858
2859    
2860
2861    
2862
2863    
2864
2865    
2866
2867    
2868
2869    
2870
2871    
2872    <dt class="tag-source">Source:</dt>
2873    <dd class="tag-source"><ul class="dummy"><li>
2874        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line530">line 530</a>
2875    </li></ul></dd>
2876    
2877
2878    
2879
2880    
2881
2882    
2883</dl>
2884
2885
2886
2887
2888
2889
2890
2891
2892
2893
2894
2895
2896
2897
2898
2899
2900        
2901            
2902
2903    
2904
2905    <h4 class="name" id="setFogDensity"><span class="type-signature"></span>setFogDensity<span class="signature">(density)</span><span class="type-signature"></span></h4>
2906
2907    
2908
2909
2910
2911<div class="description">
2912    Set the density of the exponential fog. Generally on the order of 0.0001
2913</div>
2914
2915
2916
2917
2918
2919
2920
2921
2922
2923    <h5>Parameters:</h5>
2924    
2925
2926<table class="params">
2927    <thead>
2928    <tr>
2929        
2930        <th>Name</th>
2931        
2932
2933        <th>Type</th>
2934
2935        
2936
2937        
2938
2939        <th class="last">Description</th>
2940    </tr>
2941    </thead>
2942
2943    <tbody>
2944    
2945
2946        <tr>
2947            
2948                <td class="name"><code>density</code></td>
2949            
2950
2951            <td class="type">
2952            
2953                
2954<span class="param-type">Number</span>
2955
2956
2957            
2958            </td>
2959
2960            
2961
2962            
2963
2964            <td class="description last">How much fog</td>
2965        </tr>
2966
2967    
2968    </tbody>
2969</table>
2970
2971
2972
2973
2974
2975
2976<dl class="details">
2977
2978    
2979
2980    
2981
2982    
2983
2984    
2985
2986    
2987
2988    
2989
2990    
2991
2992    
2993
2994    
2995
2996    
2997
2998    
2999
3000    
3001
3002    
3003    <dt class="tag-source">Source:</dt>
3004    <dd class="tag-source"><ul class="dummy"><li>
3005        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line497">line 497</a>
3006    </li></ul></dd>
3007    
3008
3009    
3010
3011    
3012
3013    
3014</dl>
3015
3016
3017
3018
3019
3020
3021
3022
3023
3024
3025
3026
3027
3028
3029
3030
3031        
3032            
3033
3034    
3035
3036    <h4 class="name" id="setGeometryEntity"><span class="type-signature"></span>setGeometryEntity<span class="signature">(data)</span><span class="type-signature"> &rarr; {Object}</span></h4>
3037
3038    
3039
3040
3041
3042<div class="description">
3043    Set the viewport geometry from a data object containing Flux entities.
3044See documentation for more explanation of <a href="https://community.flux.io/content/kbentry/2579/geometric-primitives.html">entities</a>
3045and <a href="https://community.flux.io/content/kbentry/3087/what-is-a-scene.html">scene primitives</a>
3046</div>
3047
3048
3049
3050
3051
3052
3053
3054
3055
3056    <h5>Parameters:</h5>
3057    
3058
3059<table class="params">
3060    <thead>
3061    <tr>
3062        
3063        <th>Name</th>
3064        
3065
3066        <th>Type</th>
3067
3068        
3069
3070        
3071
3072        <th class="last">Description</th>
3073    </tr>
3074    </thead>
3075
3076    <tbody>
3077    
3078
3079        <tr>
3080            
3081                <td class="name"><code>data</code></td>
3082            
3083
3084            <td class="type">
3085            
3086                
3087<span class="param-type">Object</span>
3088
3089
3090            
3091            </td>
3092
3093            
3094
3095            
3096
3097            <td class="description last">The geometry entities to render</td>
3098        </tr>
3099
3100    
3101    </tbody>
3102</table>
3103
3104
3105
3106
3107
3108
3109<dl class="details">
3110
3111    
3112
3113    
3114
3115    
3116
3117    
3118
3119    
3120
3121    
3122
3123    
3124
3125    
3126
3127    
3128
3129    
3130
3131    
3132
3133    
3134
3135    
3136    <dt class="tag-source">Source:</dt>
3137    <dd class="tag-source"><ul class="dummy"><li>
3138        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line299">line 299</a>
3139    </li></ul></dd>
3140    
3141
3142    
3143
3144    
3145
3146    
3147</dl>
3148
3149
3150
3151
3152
3153
3154
3155
3156
3157
3158
3159
3160
3161<h5>Returns:</h5>
3162
3163        
3164<div class="param-desc">
3165    Promise to resolve after geometry is created
3166</div>
3167
3168
3169
3170<dl class="param-type">
3171    <dt>
3172        Type
3173    </dt>
3174    <dd>
3175        
3176<span class="param-type">Object</span>
3177
3178
3179    </dd>
3180</dl>
3181
3182    
3183
3184
3185
3186        
3187            
3188
3189    
3190
3191    <h4 class="name" id="setGeometryJson"><span class="type-signature"></span>setGeometryJson<span class="signature">(dataString)</span><span class="type-signature"> &rarr; {Object}</span></h4>
3192
3193    
3194
3195
3196
3197<div class="description">
3198    Set the viewport geomtery from a JSON string
3199</div>
3200
3201
3202
3203
3204
3205
3206
3207
3208
3209    <h5>Parameters:</h5>
3210    
3211
3212<table class="params">
3213    <thead>
3214    <tr>
3215        
3216        <th>Name</th>
3217        
3218
3219        <th>Type</th>
3220
3221        
3222
3223        
3224
3225        <th class="last">Description</th>
3226    </tr>
3227    </thead>
3228
3229    <tbody>
3230    
3231
3232        <tr>
3233            
3234                <td class="name"><code>dataString</code></td>
3235            
3236
3237            <td class="type">
3238            
3239                
3240<span class="param-type">String</span>
3241
3242
3243            
3244            </td>
3245
3246            
3247
3248            
3249
3250            <td class="description last">The geometry to render formatted as JSON containing Flux entities</td>
3251        </tr>
3252
3253    
3254    </tbody>
3255</table>
3256
3257
3258
3259
3260
3261
3262<dl class="details">
3263
3264    
3265
3266    
3267
3268    
3269
3270    
3271
3272    
3273
3274    
3275
3276    
3277
3278    
3279
3280    
3281
3282    
3283
3284    
3285
3286    
3287
3288    
3289    <dt class="tag-source">Source:</dt>
3290    <dd class="tag-source"><ul class="dummy"><li>
3291        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line287">line 287</a>
3292    </li></ul></dd>
3293    
3294
3295    
3296
3297    
3298
3299    
3300</dl>
3301
3302
3303
3304
3305
3306
3307
3308
3309
3310
3311
3312
3313
3314<h5>Returns:</h5>
3315
3316        
3317<div class="param-desc">
3318    Promise to resolve after geometry is created
3319</div>
3320
3321
3322
3323<dl class="param-type">
3324    <dt>
3325        Type
3326    </dt>
3327    <dd>
3328        
3329<span class="param-type">Object</span>
3330
3331
3332    </dd>
3333</dl>
3334
3335    
3336
3337
3338
3339        
3340            
3341
3342    
3343
3344    <h4 class="name" id="setHelpersVisible"><span class="type-signature"></span>setHelpersVisible<span class="signature">(visible)</span><span class="type-signature"></span></h4>
3345
3346    
3347
3348
3349
3350<div class="description">
3351    Whether to draw helpers (axis and grid)
3352</div>
3353
3354
3355
3356
3357
3358
3359
3360
3361
3362    <h5>Parameters:</h5>
3363    
3364
3365<table class="params">
3366    <thead>
3367    <tr>
3368        
3369        <th>Name</th>
3370        
3371
3372        <th>Type</th>
3373
3374        
3375
3376        
3377
3378        <th class="last">Description</th>
3379    </tr>
3380    </thead>
3381
3382    <tbody>
3383    
3384
3385        <tr>
3386            
3387                <td class="name"><code>visible</code></td>
3388            
3389
3390            <td class="type">
3391            
3392                
3393<span class="param-type">Boolean</span>
3394
3395
3396            
3397            </td>
3398
3399            
3400
3401            
3402
3403            <td class="description last">False to hide them</td>
3404        </tr>
3405
3406    
3407    </tbody>
3408</table>
3409
3410
3411
3412
3413
3414
3415<dl class="details">
3416
3417    
3418
3419    
3420
3421    
3422
3423    
3424
3425    
3426
3427    
3428
3429    
3430
3431    
3432
3433    
3434
3435    
3436
3437    
3438
3439    
3440
3441    
3442    <dt class="tag-source">Source:</dt>
3443    <dd class="tag-source"><ul class="dummy"><li>
3444        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line278">line 278</a>
3445    </li></ul></dd>
3446    
3447
3448    
3449
3450    
3451
3452    
3453</dl>
3454
3455
3456
3457
3458
3459
3460
3461
3462
3463
3464
3465
3466
3467
3468
3469
3470        
3471            
3472
3473    
3474
3475    <h4 class="name" id="setSelection"><span class="type-signature"></span>setSelection<span class="signature">(ids)</span><span class="type-signature"></span></h4>
3476
3477    
3478
3479
3480
3481<div class="description">
3482    Set the currently selected geometry
3483</div>
3484
3485
3486
3487
3488
3489
3490
3491
3492
3493    <h5>Parameters:</h5>
3494    
3495
3496<table class="params">
3497    <thead>
3498    <tr>
3499        
3500        <th>Name</th>
3501        
3502
3503        <th>Type</th>
3504
3505        
3506
3507        
3508
3509        <th class="last">Description</th>
3510    </tr>
3511    </thead>
3512
3513    <tbody>
3514    
3515
3516        <tr>
3517            
3518                <td class="name"><code>ids</code></td>
3519            
3520
3521            <td class="type">
3522            
3523                
3524<span class="param-type">Array.&lt;String></span>
3525
3526
3527            
3528            </td>
3529
3530            
3531
3532            
3533
3534            <td class="description last">New selection</td>
3535        </tr>
3536
3537    
3538    </tbody>
3539</table>
3540
3541
3542
3543
3544
3545
3546<dl class="details">
3547
3548    
3549
3550    
3551
3552    
3553
3554    
3555
3556    
3557
3558    
3559
3560    
3561
3562    
3563
3564    
3565
3566    
3567
3568    
3569
3570    
3571
3572    
3573    <dt class="tag-source">Source:</dt>
3574    <dd class="tag-source"><ul class="dummy"><li>
3575        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line230">line 230</a>
3576    </li></ul></dd>
3577    
3578
3579    
3580
3581    
3582
3583    
3584</dl>
3585
3586
3587
3588
3589
3590
3591
3592
3593
3594
3595
3596
3597
3598
3599
3600
3601        
3602            
3603
3604    
3605
3606    <h4 class="name" id="setSelectionMaterial"><span class="type-signature"></span>setSelectionMaterial<span class="signature">(data)</span><span class="type-signature"></span></h4>
3607
3608    
3609
3610
3611
3612<div class="description">
3613    Define the material that is applied on selected objects
3614</div>
3615
3616
3617
3618
3619
3620
3621
3622
3623
3624    <h5>Parameters:</h5>
3625    
3626
3627<table class="params">
3628    <thead>
3629    <tr>
3630        
3631        <th>Name</th>
3632        
3633
3634        <th>Type</th>
3635
3636        
3637
3638        
3639
3640        <th class="last">Description</th>
3641    </tr>
3642    </thead>
3643
3644    <tbody>
3645    
3646
3647        <tr>
3648            
3649                <td class="name"><code>data</code></td>
3650            
3651
3652            <td class="type">
3653            
3654                
3655<span class="param-type">Object</span>
3656
3657
3658            
3659            </td>
3660
3661            
3662
3663            
3664
3665            <td class="description last">Flux json description of a material</td>
3666        </tr>
3667
3668    
3669    </tbody>
3670</table>
3671
3672
3673
3674
3675
3676
3677<dl class="details">
3678
3679    
3680
3681    
3682
3683    
3684
3685    
3686
3687    
3688
3689    
3690
3691    
3692
3693    
3694
3695    
3696
3697    
3698
3699    
3700
3701    
3702
3703    
3704    <dt class="tag-source">Source:</dt>
3705    <dd class="tag-source"><ul class="dummy"><li>
3706        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line222">line 222</a>
3707    </li></ul></dd>
3708    
3709
3710    
3711
3712    
3713
3714    
3715</dl>
3716
3717
3718
3719
3720
3721
3722
3723
3724
3725
3726
3727
3728
3729
3730
3731
3732        
3733            
3734
3735    
3736
3737    <h4 class="name" id="setSize"><span class="type-signature"></span>setSize<span class="signature">(width, height)</span><span class="type-signature"></span></h4>
3738
3739    
3740
3741
3742
3743<div class="description">
3744    Set the size of the render canvas
3745</div>
3746
3747
3748
3749
3750
3751
3752
3753
3754
3755    <h5>Parameters:</h5>
3756    
3757
3758<table class="params">
3759    <thead>
3760    <tr>
3761        
3762        <th>Name</th>
3763        
3764
3765        <th>Type</th>
3766
3767        
3768
3769        
3770
3771        <th class="last">Description</th>
3772    </tr>
3773    </thead>
3774
3775    <tbody>
3776    
3777
3778        <tr>
3779            
3780                <td class="name"><code>width</code></td>
3781            
3782
3783            <td class="type">
3784            
3785                
3786<span class="param-type">Number</span>
3787
3788
3789            
3790            </td>
3791
3792            
3793
3794            
3795
3796            <td class="description last">Pixels</td>
3797        </tr>
3798
3799    
3800
3801        <tr>
3802            
3803                <td class="name"><code>height</code></td>
3804            
3805
3806            <td class="type">
3807            
3808                
3809<span class="param-type">Number</span>
3810
3811
3812            
3813            </td>
3814
3815            
3816
3817            
3818
3819            <td class="description last">Pixels</td>
3820        </tr>
3821
3822    
3823    </tbody>
3824</table>
3825
3826
3827
3828
3829
3830
3831<dl class="details">
3832
3833    
3834
3835    
3836
3837    
3838
3839    
3840
3841    
3842
3843    
3844
3845    
3846
3847    
3848
3849    
3850
3851    
3852
3853    
3854
3855    
3856
3857    
3858    <dt class="tag-source">Source:</dt>
3859    <dd class="tag-source"><ul class="dummy"><li>
3860        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line462">line 462</a>
3861    </li></ul></dd>
3862    
3863
3864    
3865
3866    
3867
3868    
3869</dl>
3870
3871
3872
3873
3874
3875
3876
3877
3878
3879
3880
3881
3882
3883
3884
3885
3886        
3887            
3888
3889    
3890
3891    <h4 class="name" id="setTessUrl"><span class="type-signature"></span>setTessUrl<span class="signature">(newUrl)</span><span class="type-signature"></span></h4>
3892
3893    
3894
3895
3896
3897<div class="description">
3898    Set the url of the tessellation service.
3899This can be used to replace the value if you did not set it on the constructor.
3900</div>
3901
3902
3903
3904
3905
3906
3907
3908
3909
3910    <h5>Parameters:</h5>
3911    
3912
3913<table class="params">
3914    <thead>
3915    <tr>
3916        
3917        <th>Name</th>
3918        
3919
3920        <th>Type</th>
3921
3922        
3923
3924        
3925
3926        <th class="last">Description</th>
3927    </tr>
3928    </thead>
3929
3930    <tbody>
3931    
3932
3933        <tr>
3934            
3935                <td class="name"><code>newUrl</code></td>
3936            
3937
3938            <td class="type">
3939            
3940                
3941<span class="param-type">String</span>
3942
3943
3944            
3945            </td>
3946
3947            
3948
3949            
3950
3951            <td class="description last">The url of the tessellation server</td>
3952        </tr>
3953
3954    
3955    </tbody>
3956</table>
3957
3958
3959
3960
3961
3962
3963<dl class="details">
3964
3965    
3966
3967    
3968
3969    
3970
3971    
3972
3973    
3974
3975    
3976
3977    
3978
3979    
3980
3981    
3982
3983    
3984
3985    
3986
3987    
3988
3989    
3990    <dt class="tag-source">Source:</dt>
3991    <dd class="tag-source"><ul class="dummy"><li>
3992        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line506">line 506</a>
3993    </li></ul></dd>
3994    
3995
3996    
3997
3998    
3999
4000    
4001</dl>
4002
4003
4004
4005
4006
4007
4008
4009
4010
4011
4012
4013
4014
4015
4016
4017
4018        
4019            
4020
4021    
4022
4023    <h4 class="name" id="setupDefaultLighting"><span class="type-signature"></span>setupDefaultLighting<span class="signature">()</span><span class="type-signature"></span></h4>
4024
4025    
4026
4027
4028
4029<div class="description">
4030    Create a default 3 light rig on the renderer's scene.
4031</div>
4032
4033
4034
4035
4036
4037
4038
4039
4040
4041
4042
4043
4044
4045<dl class="details">
4046
4047    
4048
4049    
4050
4051    
4052
4053    
4054
4055    
4056
4057    
4058
4059    
4060
4061    
4062
4063    
4064
4065    
4066
4067    
4068
4069    
4070
4071    
4072    <dt class="tag-source">Source:</dt>
4073    <dd class="tag-source"><ul class="dummy"><li>
4074        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line432">line 432</a>
4075    </li></ul></dd>
4076    
4077
4078    
4079
4080    
4081
4082    
4083</dl>
4084
4085
4086
4087
4088
4089
4090
4091
4092
4093
4094
4095
4096
4097
4098
4099
4100        
4101            
4102
4103    
4104
4105    <h4 class="name" id="setView"><span class="type-signature"></span>setView<span class="signature">(view)</span><span class="type-signature"></span></h4>
4106
4107    
4108
4109
4110
4111<div class="description">
4112    Set which camera view to use (ex perspective, top etc.).
4113</div>
4114
4115
4116
4117
4118
4119
4120
4121
4122
4123    <h5>Parameters:</h5>
4124    
4125
4126<table class="params">
4127    <thead>
4128    <tr>
4129        
4130        <th>Name</th>
4131        
4132
4133        <th>Type</th>
4134
4135        
4136
4137        
4138
4139        <th class="last">Description</th>
4140    </tr>
4141    </thead>
4142
4143    <tbody>
4144    
4145
4146        <tr>
4147            
4148                <td class="name"><code>view</code></td>
4149            
4150
4151            <td class="type">
4152            
4153                
4154<span class="param-type"><a href="FluxCameras.html#.VIEWS">FluxCameras.VIEWS</a></span>
4155
4156
4157            
4158            </td>
4159
4160            
4161
4162            
4163
4164            <td class="description last">The new view mode</td>
4165        </tr>
4166
4167    
4168    </tbody>
4169</table>
4170
4171
4172
4173
4174
4175
4176<dl class="details">
4177
4178    
4179
4180    
4181
4182    
4183
4184    
4185
4186    
4187
4188    
4189
4190    
4191
4192    
4193
4194    
4195
4196    
4197
4198    
4199
4200    
4201
4202    
4203    <dt class="tag-source">Source:</dt>
4204    <dd class="tag-source"><ul class="dummy"><li>
4205        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line479">line 479</a>
4206    </li></ul></dd>
4207    
4208
4209    
4210
4211    
4212
4213    
4214</dl>
4215
4216
4217
4218
4219
4220
4221
4222
4223
4224
4225
4226
4227
4228
4229
4230
4231        
4232            
4233
4234    
4235
4236    <h4 class="name" id="toJSON"><span class="type-signature"></span>toJSON<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
4237
4238    
4239
4240
4241
4242<div class="description">
4243    Make serializable by pruning all references and building an object property tree
4244</div>
4245
4246
4247
4248
4249
4250
4251
4252
4253
4254
4255
4256
4257
4258<dl class="details">
4259
4260    
4261
4262    
4263
4264    
4265
4266    
4267
4268    
4269
4270    
4271
4272    
4273
4274    
4275
4276    
4277
4278    
4279
4280    
4281
4282    
4283
4284    
4285    <dt class="tag-source">Source:</dt>
4286    <dd class="tag-source"><ul class="dummy"><li>
4287        <a href="FluxViewport.js.html">FluxViewport.js</a>, <a href="FluxViewport.js.html#line349">line 349</a>
4288    </li></ul></dd>
4289    
4290
4291    
4292
4293    
4294
4295    
4296</dl>
4297
4298
4299
4300
4301
4302
4303
4304
4305
4306
4307
4308
4309
4310<h5>Returns:</h5>
4311
4312        
4313<div class="param-desc">
4314    Data to stringify
4315</div>
4316
4317
4318
4319<dl class="param-type">
4320    <dt>
4321        Type
4322    </dt>
4323    <dd>
4324        
4325<span class="param-type">Object</span>
4326
4327
4328    </dd>
4329</dl>
4330
4331    
4332
4333
4334
4335        
4336    
4337
4338    
4339
4340    
4341</article>
4342
4343</section>
4344
4345
4346
4347
4348</div>
4349
4350<br class="clear">
4351
4352<footer>
4353    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.
4354</footer>
4355
4356<script>prettyPrint();</script>
4357<script src="scripts/linenumber.js"></script>
4358</body>
4359</html>
\No newline at end of file