UNPKG

4.43 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <!--
5 This is a page for displaying a viewport and evaluating performance.
6 Note: This page is only intended for development and testing purposes.
7 Once the page loads try loading a model from the drop down.
8 Then click TRIAL, to run a performance test, the results will be output to the console.
9 https://docs.google.com/spreadsheets/d/1D2Rb8rPK3O8zHzZc_O1NqXIA8aB4E-V9k8hJOUvPI3k/edit#gid=0
10 -->
11 <meta charset="utf-8">
12 <title>Flux Viewport Performance</title>
13 <script src="../build/flux-viewport-bundle.global.js"></script>
14
15 <script src="./InteractivePerf.js"></script>
16 <script src="./FluxBuildings.js"></script>
17 <style type="text/css">
18 #container {
19 width:400px;
20 height:400px;
21 display:inline-block;
22 background-color:#FFCCCC;
23 }
24 #viewports {
25 -webkit-user-select: none;
26 user-select: none;
27 }
28 div.viewport {
29 width: 200px;
30 height: 200px;
31 display: inline-block;
32 background-color: red;
33 }
34 </style>
35</head>
36<body onkeypress="focusAll()" onload="handleLoad()">
37 <h2>Flux Viewport Performance</h2>
38 <select id="modelMenu"></select><br>
39 <button id="loadButton">Load Model</button>
40 <button id="recordButton">Record</button>
41 <button id="trialButton">Trial</button><br>
42 <button id="addViewportsButton">Add 10 Viewports</button><br>
43 <div id="viewports">
44 <div id="container"></div>
45 </div>
46 <a href="https://docs.google.com/spreadsheets/d/1D2Rb8rPK3O8zHzZc_O1NqXIA8aB4E-V9k8hJOUvPI3k/edit#gid=1888279806">Performance data spreadsheet</a>
47 <script>
48 'use strict';
49
50 var torus = {"origin": [0,0,0],"majorRadius": 5,"minorRadius":3,"axis":[0,0,1],"primitive":"torus"};
51 var fluxViewport = null;
52 var fluxBuildings = null;
53 function handleLoad() {
54 fluxBuildings = new FluxBuildings();
55 fluxViewport = new FluxViewport(container);
56 fluxViewport.setupDefaultLighting();
57 fluxViewport.homeCamera();
58 populateList();
59 addListeners();
60 }
61
62 function populateList() {
63 var modelMenu = document.querySelector('#modelMenu');
64 var urls = FluxBuildings.urls;
65 for (var i=0;i<urls.length;i++) {
66 var option = document.createElement('option');
67 option.value = urls[i];
68 option.textContent = urls[i];
69 modelMenu.appendChild(option);
70 }
71 modelMenu.addEventListener('change', function (event) {
72 fluxBuildings.loadModel(event.target.value);
73 });
74 }
75
76 function addListeners() {
77 var modelMenu = document.querySelector('#modelMenu');
78
79 var loadButton = document.querySelector('#loadButton');
80 loadButton.addEventListener('click', function () {
81 fluxBuildings.loadModel(modelMenu.value);
82 });
83
84 var trialButton = document.querySelector('#trialButton');
85 trialButton.addEventListener('click', function () {
86 fluxBuildings.handleTrial();
87 });
88
89 var recordButton = document.querySelector('#recordButton');
90 recordButton.addEventListener('click', function () {
91 fluxBuildings.handleRecord();
92 });
93
94 var addViewportsButton = document.querySelector('#addViewportsButton');
95 addViewportsButton.addEventListener('click', function () {
96 addViewports();
97 });
98 }
99
100 function addViewports() {
101 var viewportsDiv = document.querySelector('#viewports');
102 var viewports = [];
103 var numViewports = 10;
104 for (var i=0;i<numViewports;i++) {
105 var div = document.createElement('div');
106 viewportsDiv.appendChild(div);
107 div.classList.add("viewport");
108 viewports[i] = new FluxViewport(div);
109 viewports[i].setupDefaultLighting();
110 viewports[i].homeCamera();
111 // Sync the cameras of this viewport to the main one
112 viewports[i]._renderer._cameras = fluxViewport._renderer._cameras;
113 viewports[i]._renderer._controls = fluxViewport._renderer._controls;
114 }
115 fluxViewport.addEventListener('change', function () {
116 for (var i=0;i<numViewports;i++) {
117 viewports[i].render();
118 }
119 });
120 }
121
122 function focusAll() {
123 fluxViewport.focus();
124 }
125
126 </script>
127</body>
128</html>