UNPKG

5.34 kBHTMLView Raw
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 // materials for testing
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 // creates a ground plane, adds to scene
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 // creates a scene to test stencilbuffer shadows
70 // also tests selection
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(); // updates controls and causes a render
83 viewport.render(); // Render again due to some bug in shadows
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 // creates a scene to test fog
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(); // updates controls and causes a render
105 });
106
107 // createGround(viewport.getScene(), 200);
108 // createCubes(viewport.getScene(), 200, 20, 10);
109
110 viewport.setupDefaultLighting();
111 viewport.focus(); // updates controls and causes a render
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>