WebGL停车场三维可视化管理系统 DEMO（thingjs 停车场3D可视化管理）

app.on(‘load‘, function (evt) { ???//初始化摄像机 ???init_camera(); ???//滑过勾边 ???var campus = evt.campus; ???var objs = app.query(‘.Building‘).add(campus.things); ???objs.on(‘mouseon‘, function (ev) { ???????if (ev.object.name.search("car") == 0) { ???????????this.style.outlineColor = ‘#ff0000‘; ???????} ???????if (ev.object.name.search("park") == 0) { ???????????this.style.outlineColor = ‘#0000ff‘; ???????} ???}); ???objs.on(‘mouseoff‘, function () { ???????this.style.outlineColor = null; ???}); ???//单击事件 ???app.on(‘click‘, function (ev) { ???????if (ev.button == 2) { ???????????destroy_ui(); ???????????init_camera(); ???????} ???????if (ev.object.name.search("car") == 0) { ???????????destroy_ui(); ???????????getCarData(ev.object); ???????????create_ui_car(); ???????} ???????if (ev.object.name.search("park") == 0) { ???????????destroy_ui(); ???????????getParkData(ev.object); ???????????create_ui_park(); ???????} ???}); ???//双击事件 ???app.on(‘dblclick‘, function (ev) { ???????if (ev.object.name.search("car") == 0) { ???????????app.camera.flyTo({ ???????????????‘time‘: 1500, ???????????????‘object‘: ev.object, ???????????????‘position‘: [0, 0, 0], ???????????????‘complete‘: function () { ???????????????} ???????????}); ???????} ???????if (ev.object.name.search("park") == 0) { ???????????app.camera.flyTo({ ???????????????‘time‘: 1500, ???????????????‘object‘: ev.object, ???????????????‘position‘: [0, 5, 0], ???????????????‘complete‘: function () { ???????????????} ???????????}); ???????} ???});});//初始化摄像机function init_camera() { ???// 摄像机飞行到某位置 ???app.camera.flyTo({ ???????‘position‘: [-67.95670997548082, 49.69517426520041, -42.88366089402964], ???????‘target‘: [-7.188588318222256, 14.094194791658271, -12.724756207211417], ???????‘time‘: 800, ???????‘complete‘: function () { ???????????console.log("Camera ready"); ???????} ???});}//创建面板var panel;var dataObj;var carInfo;var parkInfo;function create_ui_car() { ???panel = new THING.widget.Panel({ ???????titleText: "车辆信息", ???????closeIcon: true, // 是否有关闭按钮 ???????dragable: true, ???????retractable: true, ???????opacity: 0.9, ???????hasTitle: true, ???????titleImage: ‘https://www.thingjs.com/static/images/example/icon.png‘ ???}); ???panel.position = [0, 326]; ???// 创建任意对象 ???dataObj = { ???????name: carInfo[0], ???????info: carInfo[1], ???????park: carInfo[2], ???????plateNum: carInfo[3], ???????state: carInfo[4], ???????contactNum: carInfo[5] ???}; ???// 动态绑定物体 ???var name = panel.addString(dataObj, ‘name‘).caption(‘车主姓名‘); ???var info = panel.addString(dataObj, ‘info‘).caption(‘车主信息‘); ???var park = panel.addString(dataObj, ‘park‘).caption(‘车位编号‘); ???var plateNum = panel.addString(dataObj, ‘plateNum‘).caption(‘车牌号码‘); ???var contactNum = panel.addString(dataObj, ‘contactNum‘).caption(‘联系电话‘); ???var state = panel.addString(dataObj, ‘state‘).caption(‘车位状态‘);}function create_ui_park() { ???panel = new THING.widget.Panel({ ???????titleText: "车位信息", ???????closeIcon: true, // 是否有关闭按钮 ???????dragable: true, ???????retractable: true, ???????opacity: 0.9, ???????hasTitle: true, ???????titleImage: ‘https://www.thingjs.com/static/images/example/icon.png‘ ???}); ???panel.position = [0, 326]; ???dataObj = { ???????park: parkInfo[0], ???????name: parkInfo[1], ???????state: parkInfo[2], ???????date: parkInfo[3] ???}; ???var park = panel.addString(dataObj, ‘park‘).caption(‘车位编号‘); ???var name = panel.addString(dataObj, ‘name‘).caption(‘车主姓名‘); ???var state = panel.addString(dataObj, ‘state‘).caption(‘车位状态‘); ???var date = panel.addString(dataObj, ‘date‘).caption(‘车位期限‘);}function destroy_ui() { ???if (panel) { ???????panel.destroy(); ???????panel = null; ???}}function getCarData(obj) { ???switch (obj.name) { ???????case "car_0": ???????????carInfo = [‘张三‘, ‘28#1-302‘, ‘A-06‘, ‘吉K49278‘, ‘未交费‘, ‘13159828222‘]; ???????????break; ???????case "car_1": ???????????carInfo = [‘李四‘, ‘18#2-1202‘, ‘B-04‘, ‘吉A46154‘, ‘已交费‘, ‘13159828222‘]; ???????????break; ???????case "car_2": ???????????carInfo = [‘王五‘, ‘13#2-702‘, ‘B-05‘, ‘吉D95868‘, ‘已交费‘, ‘13159828222‘]; ???????????break; ???????case "car_3": ???????????carInfo = [‘郭富贵‘, ‘3#3-802‘, ‘B-09‘, ‘吉B46278‘, ‘已交费‘, ‘13159828222‘]; ???????????break; ???????case "car_4": ???????????carInfo = [‘薛展畅‘, ‘8#3-1302‘, ‘C-03‘, ‘吉A44278‘, ‘未交费‘, ‘13159828222‘]; ???????????break; ???????case "car_5": ???????????carInfo = [‘李文忠‘, ‘6#2-302‘, ‘C-05‘, ‘黑B77865‘, ‘已交费‘, ‘13159828222‘]; ???????????break; ???????case "car_6": ???????????carInfo = [‘李洪春‘, ‘8#2-402‘, ‘D-08‘, ‘吉CJ87821‘, ‘未交费‘, ‘13159828222‘]; ???????????break; ???????case "car_7": ???????????carInfo = [‘孟旭浩‘, ‘9#2-801‘, ‘D-16‘, ‘吉A4U278‘, ‘已交费‘, ‘13159828222‘]; ???????????break; ???????case "car_8": ???????????carInfo = [‘刘星辰‘, ‘4#2-502‘, ‘D-20‘, ‘吉A98378‘, ‘已交费‘, ‘13159828222‘]; ???????????break; ???????case "car_9": ???????????carInfo = [‘张星辰‘, ‘4#1-302‘, ‘E-04‘, ‘吉A98378‘, ‘已交费‘, ‘13159828222‘]; ???????????break; ???????case "car_10": ???????????carInfo = [‘张星辰‘, ‘8#2-302‘, ‘D-01‘, ‘京A44378‘, ‘已交费‘, ‘13159228222‘]; ???????????break; ???}}function getParkData(obj) { ???switch (obj.name) { ???????case "park_5": ???????????parkInfo = [‘A-06‘, ‘张三‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_11": ???????????parkInfo = [‘B-09‘, ‘郭富贵‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_16": ???????????parkInfo = [‘B-05‘, ‘王五‘, ‘欠费‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_17": ???????????parkInfo = [‘B-04‘, ‘李四‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_40": ???????????parkInfo = [‘C-03‘, ‘薛展畅‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_44": ???????????parkInfo = [‘C-05‘, ‘李文忠‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_68": ???????????parkInfo = [‘D-08‘, ‘李洪春‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_78": ???????????parkInfo = [‘E-04‘, ‘张星辰‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_59": ???????????parkInfo = [‘D-16‘, ‘孟旭浩‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_67": ???????????parkInfo = [‘D-20‘, ‘刘星辰‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_3": ???????????parkInfo = [‘A-04‘, ‘刘地辰‘, ‘已交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????case "park_54": ???????????parkInfo = [‘D-1‘, ‘龙的辰‘, ‘未交‘, ‘2018.5.10-2020.5.11‘]; ???????????break; ???????default: ???????????parkInfo = [‘X-xx‘, ‘XXX‘, ‘未售出‘, ‘2000.1.1-2020.1.1‘]; ???}}

//主面板var toolbar = new THING.widget.Panel({ width: ‘163px‘ });var mainDataObj = { ???spaceStatistics: false, ???gateManagement: false, ???video: false, ???registrationForm: false}//闸门管理面板var gateToolbar = new THING.widget.Panel({ width: ‘163px‘ });gateToolbar.position = [450, 0];gateToolbar.visible = false;var gateDataObj = { ???entrance: false, ???exit: false,}//面板按钮组件及事件Loader.sync([‘lib/iconfont.js‘], function () { ???//主面板 ???var button0 = toolbar.addImageBoolean(mainDataObj, ‘spaceStatistics‘).caption(‘空间统计‘).url(‘#momoda_lc-icontubiao‘); ???var button1 = toolbar.addImageBoolean(mainDataObj, ‘gateManagement‘).caption(‘闸门管理‘).url(‘#momoda_lc-icontubiao21‘); ???var button2 = toolbar.addImageBoolean(mainDataObj, ‘video‘).caption(‘播放动画‘).url(‘#momoda_lc-icontubiao9‘); ???var button3 = toolbar.addImageBoolean(mainDataObj, ‘registrationForm‘).caption(‘出入登记‘).url(‘#momoda_lc-icontubiao10‘); ???//闸门面板 ???var button4 = gateToolbar.addImageBoolean(gateDataObj, ‘entrance‘).caption(‘入口管理‘).url(‘#momoda_lc-icontubiao21‘); ???var button5 = gateToolbar.addImageBoolean(gateDataObj, ‘exit‘).caption(‘出口管理‘).url(‘#momoda_lc-icontubiao21‘);//第四步中的功能实现});

//空间统计 ???var opacityFlag = true; ???button0.on(‘change‘, function () { ???????if (opacityFlag) { ???????????opacityFlag = false; ???????????app.query(/park/).forEach( ???????????????function (obj) { ???????????????????var str = obj.name; ???????????????????switch (str) { ???????????????????????case "park_5": break; ???????????????????????case "park_11": break; ???????????????????????case "park_16": break; ???????????????????????case "park_17": break; ???????????????????????case "park_40": break; ???????????????????????case "park_44": break; ???????????????????????case "park_68": break; ???????????????????????case "park_78": break; ???????????????????????case "park_59": break; ???????????????????????case "park_67": break; ???????????????????????case "park_33": break; ???????????????????????case "park_54": break; ???????????????????????case "park_3": break; ???????????????????????default: ???????????????????????????obj.style.opacity = 0.3; ???????????????????} ???????????????} ???????????); ???????} else { ???????????opacityFlag = true; ???????????app.query(/park/).forEach( ???????????????function (obj) { ???????????????????obj.style.opacity = 1; ???????????????} ???????????) ???????} ???}); ???//闸门管理,入口管理，出口管理 ???var gateToolbarFlag = true; ???var entranceFlag = false; ???var exitFlag = false; ???button1.on(‘change‘, function () { ???????if (gateToolbarFlag) { ???????????app.camera.flyTo({ ???????????????‘position‘: [-69.15232764795844, 12.556743445078443, -4.722896106654333], ???????????????‘target‘: [-6.75806618043438, 11.584727439263146, -5.077821719000649], ???????????????‘time‘: 1000 ???????????}); ???????????gateToolbarFlag = false; ???????????gateToolbar.visible = true; ???????} else { ???????????init_camera(); ???????????gateToolbarFlag = true; ???????????gateToolbar.visible = false; ???????} ???}); ???button4.on(‘change‘, function () { ???????var entry = app.query(‘入口‘)[0]; ???????if (!entranceFlag) { ???????????entranceFlag = true; ???????????entry.rotateX(45.0); ???????????entry.moveY(2); ???????????entry.moveZ(-1); ???????} else { ???????????entranceFlag = false; ???????????entry.rotateX(-45.0); ???????????entry.position = [0, 0, 0]; ???????} ???}); ???button5.on(‘change‘, function () { ???????var exit = app.query(‘出口‘)[0]; ???????if (!exitFlag) { ???????????exitFlag = true; ???????????exit.rotateX(-45.0); ???????????exit.moveY(9.2); ???????????exit.moveZ(4.3); ???????} else { ???????????exitFlag = false; ???????????exit.rotateX(-315.0); ???????????exit.position = [0, 0, 0]; ???????} ???}); ???//播放动画 ???button2.on(‘change‘, function () { ???????//飞向每一个摄像机的位置 ???????console.log("监控设备！"); ???????playCar(); ???}); ???//出入登记 ???registrationFlag = true; ???button3.on(‘change‘, function () { ???????//显示两块信息板，镜头飞向门禁 ???????// 摄像机飞行到某位置 ???????if (registrationFlag) { ???????????app.camera.flyTo({ ???????????????‘position‘: [-13.229586070519874, 13.062016938601909, -14.789241424512456], ???????????????‘target‘: [-21.25078065116403, 11.949594230222267, -11.972835509196605], ???????????????‘time‘: 1000, ???????????}); ???????????registrationFlag = false; ???????????create_ui_gate_exit(); ???????????create_ui_gate_entry(); ???????} else { ???????????registrationFlag = true; ???????????entryUi.destroy(); ???????????entryUi = null; ???????????exitUi.destroy(); ???????????exitUi = null; ???????} ???});　

var car = app.create({ ???type: ‘Thing‘, ???name: ‘car_10‘, ???url: ‘http://model.3dmomoda.cn/models/c6ed424627234a298c1921950eb8534c/0/gltf/‘, // 模型地址 ????position: [-45.89714816093272, 0.043936770289323, 0.312388718621647], // 位置 ????angle: 90,});var points = [];points.push([-45.89714816093272, 0.043936770289323, 0.312388718621647]);points.push([-38.89714816093272, 0.043936770289323, 0.312388718621647]);var radius = 2for (var degree = 0, y = 0; degree <= 90; degree += 20) { ???var x = Math.sin(degree * 2 * Math.PI / 360) * radius - 35.89714816093272; ???var z = -Math.cos(degree * 2 * Math.PI / 360) * radius + 2.312388718621647; ???points.push([x, y, z]); ???console.log([x, y, z]);}points.push([-33.927532654908305, 0, 4.9650923632877861]);points.push([-33.927532654908305, 0, 7.9650923632877861]);points.push([-33.927532654908305, 0, 10.9650923632877861]);points.push([-33.927532654908305, 0, 13.9650923632877861]);var line = app.create({ ???type: ‘Line‘, ???color: 0xFFFF00, // 轨迹线颜色 ???dotSize: 2, // 轨迹点的大小 ???points: points,});line.visible = false;function playCar() { ???var car = app.query(‘car_10‘)[0]; ???var entry = app.query(‘入口‘)[0]; ???entry.rotateX(45.0); ???entry.moveY(2); ???entry.moveZ(-1); ???car.movePath({ ???????‘path‘: line.points, // 轨迹路线 ???????‘time‘: 5000, // 移动时间 ???????‘orientToPath‘: true, // 物体移动时沿向路径方向 ???}); ???setTimeout(function () { ???????entry.rotateX(-45.0); ???????entry.position = [0, 0, 0]; ???}, 2000)}

//出入登记function create_html_entry() { ???var sign1 = ???????`<div   style="font-size: 12px;width: 230px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;"><div  style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;"><span  style="float: left;width: 30px;height: 30px;"></span><span  style="float: left;margin: 0px 0px 0px 3px;">车辆进入</span><span  style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;width:70px;margin: 0px 10px 0px 10px;">进车时间</span><span  style="float: left;width: 140px;background-color: #2480E3;">车牌号</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">9:15</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉K49278</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">10:15</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉A46154</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">10:17</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉D95868</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">10:25</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉B46278</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">10:39</span><span  style="float: left;width: 140px;background-color: #2480E3;">黑B77865</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">11:19</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉CJ87821</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">11:21</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉A4U278</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">11:35</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉A98378</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">12:50</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉A98778</span></div><div  style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></div></div>` ???$(‘#div3d‘).append($(sign1));}function create_html_exit() { ???var sign2 = ???????`<div   style="font-size: 12px;width: 230px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;"><div  style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;"><span  style="float: left;width: 30px;height: 30px;"></span><span  style="float: left;margin: 0px 0px 0px 3px;">车辆进入</span><span  style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;width:70px;margin: 0px 10px 0px 10px;">出车时间</span><span  style="float: left;width: 140px;background-color: #2480E3;">车牌号</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">7:15</span><span  style="float: left;width: 140px;background-color: #2480E3;">黑B77865</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">8:45</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉A4U278</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">8:57</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉A98378</span></div><div  style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;"><span  style="float: left;margin: 0px 10px 0px 10px;">10:01</span><span  style="float: left;width: 140px;background-color: #2480E3;">吉A98778</span></div><div  style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></div></div>` ???$(‘#div3d‘).append($(sign2));}function create_element(str) { ???var srcElem = document.getElementById(str); ???var newElem = srcElem.cloneNode(true); ???newElem.style.display = "block"; ???app.domElement.insertBefore(newElem, srcElem); ???return newElem;}var entryUi = null;function create_ui_gate_entry() { ???create_html_entry(); ???entryUi = app.create({ ???????type: ‘UIAnchor‘, ???????position: [-39.89714816093272, 3.043936770289323, 2.312388718621647], ???????element: create_element("board1"), ???????offset: [0, 2, 0], ???????pivot: [0.5, 1] // 界面的重心 ???});}var exitUi = null;function create_ui_gate_exit() { ???create_html_exit(); ???exitUi = app.create({ ???????type: ‘UIAnchor‘, ???????position: [-34.89714816093272, 6.059100472147456, -14.950719696627075], ???????element: create_element("board2"), ???????offset: [0, 2, 0], ???????pivot: [0.5, 1] // 界面的重心 ???});}