| 143 | } |
| 144 | |
| 145 | async function setupUI() { |
| 146 | // FPS counter |
| 147 | fpsScript = document.createElement('script'); |
| 148 | fpsScript.onload = () => { |
| 149 | var stats = new Stats(); |
| 150 | document.body.appendChild(stats.dom); |
| 151 | requestAnimationFrame(function loop() { |
| 152 | stats.update(); |
| 153 | requestAnimationFrame(loop); |
| 154 | }); |
| 155 | }; |
| 156 | fpsScript.src = 'https://mrdoob.github.io/stats.js/build/stats.min.js'; |
| 157 | document.head.appendChild(fpsScript); |
| 158 | |
| 159 | // GUI controls |
| 160 | gui = new GUI(); |
| 161 | gui.add(options, 'resetSession').name('Reset session'); |
| 162 | gui.add(options, 'simulateFileInput').name('Choose file'); |
| 163 | gui.add(options, 'simulateDirectoryInput').name('Choose directory'); |
| 164 | const meshFolder = gui.addFolder('Mesh'); |
| 165 | meshFolder.add(options, 'representation', { Points: 0, Wireframe: 1, Surface: 2 }).onChange(async () => { |
| 166 | await viewer.setRepresentation(options.representation); |
| 167 | await viewer.render(); |
| 168 | }); |
| 169 | meshFolder.add(options, 'vertexVisibility').onChange(async () => { |
| 170 | await viewer.setVertexVisibility(options.vertexVisibility); |
| 171 | await viewer.render(); |
| 172 | }); |
| 173 | meshFolder.add(options, 'renderPointsAsSpheres').onChange(async () => { |
| 174 | await viewer.setRenderPointsAsSpheres(options.renderPointsAsSpheres); |
| 175 | await viewer.render(); |
| 176 | }); |
| 177 | meshFolder.add(options, 'pointSize', 0.1, 10.0, 0.01).onChange(async () => { |
| 178 | await viewer.setPointSize(options.pointSize); |
| 179 | await viewer.render(); |
| 180 | }); |
| 181 | meshFolder.add(options, 'edgeVisibility').onChange(async () => { |
| 182 | await viewer.setEdgeVisibility(options.edgeVisibility); |
| 183 | await viewer.render(); |
| 184 | }); |
| 185 | meshFolder.add(options, 'renderLinesAsTubes').onChange(async () => { |
| 186 | await viewer.setRenderLinesAsTubes(options.renderLinesAsTubes); |
| 187 | await viewer.render(); |
| 188 | }); |
| 189 | meshFolder.add(options, 'lineWidth', 0.1, 5.0, 0.01).onChange(async () => { |
| 190 | await viewer.setLineWidth(options.lineWidth); |
| 191 | await viewer.render(); |
| 192 | }); |
| 193 | |
| 194 | const colorFolder = gui.addFolder('Color'); |
| 195 | const scalarMapFolder = colorFolder.addFolder('Scalar Mapping'); |
| 196 | colorByArraysController = scalarMapFolder.add(options, 'colorByArray', options.colorArrays); |
| 197 | let presets = await viewer.getColorMapPresets(); |
| 198 | let presetList = presets.length > 0 ? presets.split(';').filter(p => p.length > 0) : []; |
| 199 | if (presetList.length > 0) { |
| 200 | scalarMapFolder.add(options, 'colorMapPreset', presetList).onChange(async () => { |
| 201 | await viewer.setColorMapPreset(options.colorMapPreset); |
| 202 | await viewer.render(); |