1 | <!doctype html>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>Flux Multiple Viewports</title>
|
6 | <script src="../build/flux-viewport-bundle.global.js"></script>
|
7 | </head>
|
8 | <body onkeypress="focusAll()" style="background-color: lightblue;">
|
9 | <select id="viewMenu" onchange="setView()">
|
10 | <option value="perspective">perspective</option>
|
11 | <option value="top">top</option>
|
12 | <option value="bottom">bottom</option>
|
13 | <option value="front">front</option>
|
14 | <option value="back">back</option>
|
15 | <option value="right">right</option>
|
16 | <option value="left">left</option>
|
17 | </select>
|
18 | <button onclick="focusAll()">Focus All</button>
|
19 | <br>
|
20 | <div id="first" style="width:400px;height:400px;display:inline-block;"></div>
|
21 | <div id="second" style="width:300px;height:300px;display:inline-block;"></div>
|
22 | <br>
|
23 | <div id="third" style="width:400px;height:500px;display:inline-block;"></div>
|
24 | <div id="fourth" style="width:400px;height:500px;display:inline-block;"></div>
|
25 | <script>
|
26 | var viewports = [];
|
27 |
|
28 | var lambert = new THREE.MeshLambertMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
|
29 | var basic = new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
|
30 |
|
31 | var first = document.querySelector("#first");
|
32 | viewports.push(new FluxViewport(first));
|
33 | createFocusTestScene(viewports[0]);
|
34 |
|
35 | var second = document.querySelector("#second");
|
36 | viewports[1] = new FluxViewport(second);
|
37 | viewports[1].setView(FluxViewport.getViews().top);
|
38 | viewports[1].render();
|
39 |
|
40 | var third = document.querySelector("#third");
|
41 | viewports[2] = new FluxViewport(third, {selection: FluxViewport.getSelectionModes().CLICK});
|
42 | createShadowTestScene(viewports[2]);
|
43 |
|
44 | var fourth = document.querySelector("#fourth");
|
45 | viewports[3] = new FluxViewport(fourth);
|
46 | createFogTestScene(viewports[3]);
|
47 |
|
48 | function setView() {
|
49 | viewports[0].setView(viewMenu.value);
|
50 | var view = FluxViewport.getViews()[viewMenu.value];
|
51 | viewports[0].setView(view);
|
52 | }
|
53 |
|
54 |
|
55 | function createGround(scene, size) {
|
56 | var plane = new THREE.PlaneGeometry( size, size );
|
57 | ground = new THREE.Mesh( plane, lambert );
|
58 | scene.add(ground);
|
59 | return ground;
|
60 | }
|
61 |
|
62 | function createFocusTestScene(viewport) {
|
63 | viewport.setClearColor('black',0.0);
|
64 | viewport.setupDefaultLighting();
|
65 | viewport.setEdgesMode(FluxViewport.getEdgesModes().FRONT);
|
66 | viewport.setGeometryEntity({"origin":[5,0,0],"primitive":"sphere","radius":1});
|
67 | }
|
68 |
|
69 |
|
70 |
|
71 | function createShadowTestScene(viewport) {
|
72 | viewport.setHelpersVisible(false);
|
73 | viewport.setupDefaultLighting();
|
74 | viewport.setGeometryEntity([
|
75 | {"origin": [4,6,4],"radius": 4,"primitive":"sphere","id":"A"},
|
76 | {"origin": [-4,4,4],"radius": 4,"primitive":"sphere","id":"B"},
|
77 | {"origin": [0,0,2],"radius": 4,"primitive":"sphere"},
|
78 | {"vertices": [[-20,0,0],[0,20,0],[20,0,0],[0,-20,0]],"faces":[[0,3,1],[1,3,2]],"primitive":"mesh"}])
|
79 | .then(function (result) {
|
80 | viewport.setSelection(result.getObject().children[0]);
|
81 | viewport.activateShadows();
|
82 | viewport.focus();
|
83 | viewport.render();
|
84 | });
|
85 | viewport.addEventListener(FluxViewport.getEvents().CHANGE, function (event) {
|
86 | if (event.event === FluxViewport.getEvents().SELECT) {
|
87 | console.log("SELECT", event.selection);
|
88 | }
|
89 | });
|
90 | }
|
91 |
|
92 |
|
93 | function createFogTestScene(viewport) {
|
94 |
|
95 | viewport.setFogDensity(0.005);
|
96 | viewport.setGeometryEntity([
|
97 | {"origin":[-10,0,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
|
98 | {"origin":[0,-12,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
|
99 | {"origin":[1,0,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
|
100 | {"origin":[1,4,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
|
101 | {"origin":[4,4,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
|
102 | {"vertices": [[-50,0,0],[0,50,0],[50,0,0],[0,-50,0]],"faces":[[0,3,1],[1,3,2]],"primitive":"mesh"}])
|
103 | .then(function () {
|
104 | viewport.focus();
|
105 | });
|
106 |
|
107 |
|
108 |
|
109 |
|
110 | viewport.setupDefaultLighting();
|
111 | viewport.focus();
|
112 | }
|
113 |
|
114 | function focusAll() {
|
115 | for (var i=0;i<viewports.length;i++) {
|
116 | var vp = viewports[i];
|
117 | if (vp) {
|
118 | vp.focus();
|
119 | }
|
120 | }
|
121 | }
|
122 | </script>
|
123 |
|
124 | </body>
|
125 | </html>
|