|
| 1 | +/**************************************************************** |
| 2 | + @file viewer_hop.js |
| 3 | +
|
| 4 | + Loads the 3DHOP library and uses methods and functions to |
| 5 | + load 3D models in point cloud (*.ply) and nexus (*.nxz) form |
| 6 | + into a clowder repository. |
| 7 | + |
| 8 | + Language: JavaScript |
| 9 | + |
| 10 | + Chrysovalantis Constantinou |
| 11 | + The Cyprus Institute |
| 12 | +
|
| 13 | + + 09/14/20 (cc): Created. |
| 14 | + + 10/14/20 (cc): Changing the source of the 3DHOP files |
| 15 | + and load them online |
| 16 | +
|
| 17 | +****************************************************************/ |
| 18 | + |
| 19 | +(function ($, Configuration) { |
| 20 | + var useTab = Configuration.tab; |
| 21 | + var referenceUrl = Configuration.url; |
| 22 | + var confId = Configuration.id; |
| 23 | + var fileId = Configuration.fileid; |
| 24 | + var previewer = Configuration.previewer; |
| 25 | + |
| 26 | + var fileName = $('#file-name-title').text().trim(); |
| 27 | + var fileNameExtension = fileName.substr(fileName.length - 3); |
| 28 | + var fileType; |
| 29 | + |
| 30 | + if (fileNameExtension == "ply") { |
| 31 | + fileType = "ply"; |
| 32 | + } |
| 33 | + else if (fileNameExtension == "nxz") { |
| 34 | + fileType = "nexus"; |
| 35 | + } |
| 36 | + |
| 37 | + //alert(fileName); |
| 38 | + //alert(typeof(fileName)); |
| 39 | + //alert(fileNameExtension); |
| 40 | + //alert(fileType); |
| 41 | + |
| 42 | + // print all attributes of Configuration object |
| 43 | + |
| 44 | + /*for (const property in Configuration) |
| 45 | + { |
| 46 | + alert(`${property}: ${Configuration[property]}`); |
| 47 | + }*/ |
| 48 | + |
| 49 | + // add 3dhop.css to previewer |
| 50 | + |
| 51 | + $(useTab).append('<link rel="stylesheet" type="text/css" href="http://vcg.isti.cnr.it/3dhop/distribution/stylesheet/3dhop.css">'); |
| 52 | + |
| 53 | + // load various 3dhop attributes (such as the background image) for 3dhop |
| 54 | + |
| 55 | + $(useTab).append($('<div/>', { |
| 56 | + id: '3dhop', |
| 57 | + class: 'tdhop', |
| 58 | + onmousedown: 'if (event.preventDefault) event.preventDefault()' |
| 59 | + })); |
| 60 | + |
| 61 | + $("#3dhop").append($('<div/>', { |
| 62 | + id: 'tdhlg' |
| 63 | + })); |
| 64 | + |
| 65 | + $("#3dhop").append($('<div/>', { |
| 66 | + id: 'toolbar' |
| 67 | + })); |
| 68 | + |
| 69 | + $("#toolbar").append("<img id='home' title='Home' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/home.png'/><br/>"); |
| 70 | + |
| 71 | + $("#toolbar").append("<img id='zoomin' title='Zoom In' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/zoomin.png'/><br/>"); |
| 72 | + $("#toolbar").append("<img id='zoomout' title='Zoom Out' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/zoomout.png'/><br/>"); |
| 73 | + |
| 74 | + $("#toolbar").append("<img id='light_on' title='Disable Light Control' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/lightcontrol_on.png' style='position:absolute; visibility:hidden;'/>"); |
| 75 | + $("#toolbar").append("<img id='light' title='Enable Light Control' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/lightcontrol.png'/><br/>"); |
| 76 | + |
| 77 | + $("#toolbar").append("<img id='measure_on' title='Disable Measure Tool' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/measure_on.png' style='position:absolute; visibility:hidden;'/>"); |
| 78 | + $("#toolbar").append("<img id='measure' title='Enable Measure Tool' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/measure.png'/><br/>"); |
| 79 | + |
| 80 | + $("#toolbar").append("<img id='pick_on' title='Disable PickPoint Mode' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/pick_on.png' style='position:absolute; visibility:hidden;'/>"); |
| 81 | + $("#toolbar").append("<img id='pick' title='Enable PickPoint Mode' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/pick.png'/><br/>"); |
| 82 | + |
| 83 | + $("#toolbar").append("<img id='full_on' title='Exit Full Screen' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/full_on.png' style='position:absolute; visibility:hidden;'/>"); |
| 84 | + $("#toolbar").append("<img id='full' title='Full Screen' src='http://vcg.isti.cnr.it/3dhop/distribution/skins/dark/full.png'/>"); |
| 85 | + |
| 86 | + $('#3dhop').append($('<div/>', { |
| 87 | + id: 'measure-box', |
| 88 | + class: 'output-box' |
| 89 | + })); |
| 90 | + |
| 91 | + $("#measure-box").text("Measured length"); |
| 92 | + |
| 93 | + $("#measure-box").append($('<hr/>')); |
| 94 | + |
| 95 | + $("#measure-box").append($('<span/>', { |
| 96 | + id: 'measure-output', |
| 97 | + class: 'output-text', |
| 98 | + onmousedown: 'event.stopPropagation()' |
| 99 | + })); |
| 100 | + |
| 101 | + $("measure-output").text("0.0"); |
| 102 | + |
| 103 | + $('#3dhop').append($('<div/>', { |
| 104 | + id: 'pickpoint-box', |
| 105 | + class: 'output-box' |
| 106 | + })); |
| 107 | + |
| 108 | + $("#pickpoint-box").text("XYZ picked point"); |
| 109 | + |
| 110 | + $("#pickpoint-box").append($('<hr/>')); |
| 111 | + |
| 112 | + $("#pickpoint-box").append($('<span/>', { |
| 113 | + id: 'pickpoint-output', |
| 114 | + class: 'output-text', |
| 115 | + onmousedown: 'event.stopPropagation()' |
| 116 | + })); |
| 117 | + |
| 118 | + $("pickpoint-output").text("[ 0 , 0 , 0 ]"); |
| 119 | + |
| 120 | + $("#3dhop").append($('<canvas/>', { |
| 121 | + id: 'draw-canvas', |
| 122 | + style: 'background-image: url("http://vcg.isti.cnr.it/3dhop/distribution/skins/backgrounds/dark.jpg")' |
| 123 | + })); |
| 124 | + |
| 125 | + // scripts holds all the 3dhop files |
| 126 | + |
| 127 | + var scripts = ["spidergl.js", "nexus.js", "ply.js", "trackball_sphere.js", |
| 128 | + "trackball_turntable.js", "trackball_pantilt.js", "trackball_turntable_pan.js", "init.js", "presenter.js"]; |
| 129 | + |
| 130 | + // append the http address where the files are located |
| 131 | + |
| 132 | + for (index = 0; index < scripts.length; index++) { |
| 133 | + scripts[index] = "http://vcg.isti.cnr.it/3dhop/distribution/js/" + scripts[index]; |
| 134 | + } |
| 135 | + |
| 136 | + // load 3dhop into the current tab (old version) |
| 137 | + |
| 138 | + /******for (index = 0; index < scripts.length; index++) { |
| 139 | + var s = document.createElement("script"); |
| 140 | + s.type = "text/javascript"; |
| 141 | + //s.src = previewer + "/hop/js/" + scripts[index]; |
| 142 | + s.src = scripts[index]; |
| 143 | + $(useTab).append(s); |
| 144 | + } |
| 145 | +
|
| 146 | + $(document).ready(function () { |
| 147 | + init3dhop(); |
| 148 | + |
| 149 | + setup3dhop(referenceUrl, fileType); |
| 150 | + |
| 151 | + resizeCanvas(640, 480); |
| 152 | + |
| 153 | + moveMeasurementbox(70, 243); |
| 154 | + movePickpointbox(70, 301); |
| 155 | + |
| 156 | + //moveToolbar(20, 20); |
| 157 | + });*****/ |
| 158 | + |
| 159 | + $.getScript(scripts[0], function () { |
| 160 | + $.getScript(scripts[1], function () { |
| 161 | + $.getScript(scripts[2], function () { |
| 162 | + $.getScript(scripts[3], function () { |
| 163 | + $.getScript(scripts[4], function () { |
| 164 | + $.getScript(scripts[5], function () { |
| 165 | + $.getScript(scripts[6], function () { |
| 166 | + $.getScript(scripts[7], function () { |
| 167 | + $.getScript(scripts[8], function () { |
| 168 | + |
| 169 | + init3dhop(); |
| 170 | + |
| 171 | + setup3dhop(referenceUrl, fileType); |
| 172 | + |
| 173 | + resizeCanvas(640, 480); |
| 174 | + |
| 175 | + moveMeasurementbox(70, 243); |
| 176 | + movePickpointbox(70, 301); |
| 177 | + |
| 178 | + }) |
| 179 | + }) |
| 180 | + }) |
| 181 | + }) |
| 182 | + }) |
| 183 | + }) |
| 184 | + }) |
| 185 | + }) |
| 186 | + }); |
| 187 | + |
| 188 | +}(jQuery, Configuration)); |
| 189 | + |
| 190 | +function getScripts(scripts, callback) { |
| 191 | + |
| 192 | + var progress = 0; |
| 193 | + |
| 194 | + scripts.forEach(function (script) { |
| 195 | + //alert(script); |
| 196 | + $.getScript(script, function () { |
| 197 | + if (++progress == scripts.length) callback(); |
| 198 | + }); |
| 199 | + }); |
| 200 | +} |
| 201 | + |
| 202 | +var presenter = null; |
| 203 | + |
| 204 | +function setup3dhop(address, fileType) { |
| 205 | + presenter = new Presenter("draw-canvas"); |
| 206 | + |
| 207 | + presenter.setScene({ |
| 208 | + meshes: { |
| 209 | + "mesh_1": { |
| 210 | + url: address, |
| 211 | + mType: fileType |
| 212 | + } |
| 213 | + }, |
| 214 | + modelInstances: { |
| 215 | + "instance_1": { mesh: "mesh_1" } |
| 216 | + }, |
| 217 | + trackball: { |
| 218 | + type: TurntablePanTrackball, |
| 219 | + trackOptions: { |
| 220 | + startDistance: 1.3, |
| 221 | + startPhi: 40.0, |
| 222 | + startTheta: 20.0, |
| 223 | + minMaxDist: [0.8, 2.5], |
| 224 | + minMaxPhi: [-180, 180], |
| 225 | + minMaxTheta: [-30.0, 70.0] |
| 226 | + } |
| 227 | + }, |
| 228 | + space: { |
| 229 | + centerMode: "scene", |
| 230 | + radiusMode: "scene" |
| 231 | + } |
| 232 | + }); |
| 233 | + |
| 234 | + presenter._onEndMeasurement = onEndMeasure; |
| 235 | + presenter._onEndPickingPoint = onEndPick; |
| 236 | +} |
| 237 | + |
| 238 | +function actionsToolbar(action) { |
| 239 | + if (action == 'home') presenter.resetTrackball(); |
| 240 | + else if (action == 'zoomin') presenter.zoomIn(); |
| 241 | + else if (action == 'zoomout') presenter.zoomOut(); |
| 242 | + else if (action == 'light' || action == 'light_on') { presenter.enableLightTrackball(!presenter.isLightTrackballEnabled()); lightSwitch(); } |
| 243 | + else if (action == 'measure' || action == 'measure_on') { presenter.enableMeasurementTool(!presenter.isMeasurementToolEnabled()); measureSwitch(); } |
| 244 | + else if (action == 'full' || action == 'full_on') fullscreenSwitch(); |
| 245 | + else if (action == 'pick' || action == 'pick_on') { |
| 246 | + presenter.enablePickpointMode(!presenter.isPickpointModeEnabled()); pickpointSwitch(); |
| 247 | + } |
| 248 | +} |
| 249 | + |
| 250 | +function onEndMeasure(measure) { |
| 251 | + // measure.toFixed(2) sets the number of decimals when displaying the measure |
| 252 | + // depending on the model measure units, use "mm","m","km" or whatever you have |
| 253 | + $('#measure-output').html(measure.toFixed(2) + " mm"); |
| 254 | +} |
| 255 | + |
| 256 | +function onEndPick(point) { |
| 257 | + var x = point[0].toFixed(2); |
| 258 | + var y = point[1].toFixed(2); |
| 259 | + var z = point[2].toFixed(2); |
| 260 | + $('#pickpoint-output').html("[ " + x + " , " + y + " , " + z + " ]"); |
| 261 | +} |
0 commit comments