基于 WebGL H5 停车场三维可视化管理 Demo - V2EX
首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a Javascript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
Javascript 权威指南第 5 版
Closure: The Definitive Guide
广告
xiangbulala
V2EX    Javascript

基于 WebGL H5 停车场三维可视化管理 Demo

  •  1      
  •   xiangbulala 2019-01-19 16:33:32 +08:00 12894 次点击
    这是一个创建于 2457 天前的主题，其中的信息可能已经有所发展或是发生改变。

    总览

    查看 Demo 停车场三维可视化-总览

    车辆信息

    停车场三维可视化-车辆信息

    车辆行驶轨迹（对接传感器数据 坐标转换）

    停车场三维可视化-车辆行驶轨迹

    车位信息

    停车场三维可视化-车位信息

    门禁杆控制（设备对接）

    停车场三维可视化-门禁管理

    Demo

    查看 Demo

    第 1 条附言    2019-01-22 12:24:04 +08:00
    补充一个实际应用项目：腾讯滨海大厦（腾讯微瓴系统）

  • 停车场
  • 维可视化
  • Demo
  • 可视
    63 条回复    2019-01-23 09:46:21 +08:00
    ywisax
        1
    ywisax  
       2019-01-19 17:36:45 +08:00
    这个好玩
    CEBBCAT
        2
    CEBBCAT  
       2019-01-19 19:26:51 +08:00
    找到个 bug，大概就是一直点播放动画，就会有一个蓝色方块代替车开到指定位置了，然后停止按键，车就会开到蓝色方块的位置
    EarthChild
        3
    EarthChild  
       2019-01-19 21:03:31 +08:00
    @CEBBCAT #2 小精豆……
    EarthChild
        4
    EarthChild  
       2019-01-19 21:07:20 +08:00
    还有一个 BUG 就是 2 楼说的那个位置。点了空间统计，明明没车停，还被标识已停车的黑色底纹
    dixeran
        5
    dixeran  
       2019-01-20 15:36:28 +08:00 via Android
    播放动画的同时做闸门管理也会有 bug
    xiangbulala
        6
    xiangbulala  
    OP
       2019-01-21 09:48:50 +08:00
    @CEBBCAT 模型加在过程中会显示成方块...
    xiangbulala
        7
    xiangbulala  
    OP
       2019-01-21 09:49:46 +08:00
    @EarthChild 黑色底纹的含义其实是车位已售出，表达的不太明显
    xiangbulala
        8
    xiangbulala  
    OP
       2019-01-21 09:50:39 +08:00
    @dixeran 嗯，确实
    xiangbulala
        9
    xiangbulala  
    OP
       2019-01-21 09:51:32 +08:00
    花一千个铜币！
    hinate
        10
    hinate  
       2019-01-21 09:57:11 +08:00
    第四张图，左侧停车位是不是画反了...
    xiangbulala
        11
    xiangbulala  
    OP
       2019-01-21 09:58:51 +08:00
    @hinate 哈哈哈 真是画反了，这尼玛怎么停进去啊
    swordne
        12
    swordne  
       2019-01-21 10:00:39 +08:00
    @hinate
    >.< 要从楼上飞上去！
    zhuoyan
        13
    zhuoyan  
       2019-01-21 10:03:13 +08:00
    厉害
    xiangbulala
        14
    xiangbulala  
    OP
       2019-01-21 10:06:31 +08:00
    @swordne 下回画停机坪了...
    zarte
        15
    zarte  
       2019-01-21 10:11:42 +08:00
    这个项目貌似不错呀，看了几个 demo 了。
    xiangbulala
        16
    xiangbulala  
    OP
       2019-01-21 10:19:53 +08:00
    @zarte 主打物联网可视化管理
    frylkrttj
        17
    frylkrttj  
       2019-01-21 10:22:55 +08:00
    这是造游戏世界的人才吧
    miniwade514
        18
    miniwade514  
       2019-01-21 10:32:46 +08:00
    厉害。在浏览器里玩 GTA 指日可待
    seven777
        19
    seven777  
       2019-01-21 10:37:31 +08:00
    瞎说一点：
    停车位上的阻拦器，是为了限位轮胎的最深位置的，防止相邻位置停车相撞。
    涂上画的不对，实际中也有很多停车场是瞎弄的。
    iyour
        20
    iyour  
       2019-01-21 10:47:43 +08:00
    感觉真实场景下不太能够解决所有车型的模型，以及车主的个性化装饰问题。
    xiangbulala
        21
    xiangbulala  
    OP
       2019-01-21 10:52:23 +08:00
    @iyour 场景为了好看多放了几个模型，实际应用中基本会用相同的模型
    比如下面这样
    xiangbulala
        22
    xiangbulala  
    OP
       2019-01-21 10:53:10 +08:00
    @seven777 嗯嗯 工程师准备重新画了...
    xiangbulala
        23
    xiangbulala  
    OP
       2019-01-21 10:54:29 +08:00
    @zarte 现在 demo 做的比较烂，年后会做一个精致全面得 DEMO
    zanzhz1101
        24
    zanzhz1101  
       2019-01-21 11:09:41 +08:00
    感觉和我现在学的 bim 有点相似，虽然没什么关系哈哈
    nezumi85757
        25
    nezumi85757  
       2019-01-21 11:14:07 +08:00
    @iyour 要做其实也能做，终归还是模型 json 化然后传到页面上来，只是可能实用意义没有那么大 ，充其量按照不同车型区分下，轿跑 suv mpv，然后车标车牌标一个真实的就 ok 了
    guanhui07
        26
    guanhui07  
       2019-01-21 11:17:49 +08:00
    厉害
    xiangbulala
        27
    xiangbulala  
    OP
       2019-01-21 11:21:23 +08:00
    @zanzhz1101 有些时候会被认为是 BIM 轻量化
    zanzhz1101
        28
    zanzhz1101  
       2019-01-21 11:24:42 +08:00
    @xiangbulala #27 感觉其实只是比较像，国内 bim 刚刚起步，最近也没啥大的进展，仅仅停留在建模预算层面上
    zhenizhui
        29
    zhenizhui  
       2019-01-21 11:28:25 +08:00
    打开 demo，mac 卡了
    xiangbulala
        30
    xiangbulala  
    OP
       2019-01-21 11:37:43 +08:00
    @zanzhz1101 bim 侧重施工过程吧，thingjs 侧重建造完成后的可视化管理
    zanzhz1101
        31
    zanzhz1101  
       2019-01-21 11:42:59 +08:00
    @xiangbulala #30 是的
    NonClockworkChen
        32
    NonClockworkChen  
       2019-01-21 12:29:44 +08:00
    iphone 6sp 播放动画，蓝色的柱子闪了一下，然后就消失了。 什么都没有了。
    这是 bug 吗，我们最近要做一个类似大富翁的 html5 的宣传小项目，有点慌，对 html5 3D
    xuboying
        33
    xuboying  
       2019-01-21 13:06:40 +08:00
    新鲜有趣的事物，不过有个疑问，如果这是个实用的管理系统，是否需要加载云层和灯塔，是否需要做灯塔的阴影，只是为了好看还是别的，比如云层，是否要和实际天气关联呢？
    xiangbulala
        34
    xiangbulala  
    OP
       2019-01-21 14:59:02 +08:00
    @xuboying 云层和灯塔是指？

    thingjs 提供了多种天空盒，也包括动态天空和雾效果，当然也可以用粒子系统模拟天气，看需求了
    实际的停车场管理项目中主要是对接停车场相关的物联网传感器数据，做可视化管理，我在 21 楼上传的图片为实际项目的截图
    wxsm
        35
    wxsm  
       2019-01-21 15:41:00 +08:00
    MacBook Pro (15-inch, 2017) 卡到怀疑人生，实用性存疑
    txwd
        36
    txwd  
       2019-01-21 16:21:30 +08:00
    三维视觉效果是很震撼，但卡...
    vibbow
        37
    vibbow  
       2019-01-21 16:35:59 +08:00
    windows + firefox + i5-7400 + 1066
    卡到怀疑人生
    vibbow
        38
    vibbow  
       2019-01-21 16:37:48 +08:00
    firefox 显示帧率在 5fps (播放动画) - 10fps (静止状态) 之间波动
    Nioooo
        39
    Nioooo  
       2019-01-21 16:51:08 +08:00
    chrome 运行起来还是很流畅的 换个浏览器试试效果还是棒棒哒
    canglaoshi
        40
    canglaoshi  
       2019-01-21 17:00:17 +08:00
    点赞 能帮我问问，这是什么样的软件画出来的 demo
    xiangbulala
        41
    xiangbulala  
    OP
       2019-01-21 17:22:49 +08:00
    @txwd 这个规模的场景，集成显卡应该都不会卡

    @vibbow 我刚试了试 firefox，很流畅，我在找朋友电脑试试....

    不过毕竟是 3D，还是对硬件有些要求
    xiangbulala
        42
    xiangbulala  
    OP
       2019-01-21 17:24:04 +08:00
    @canglaoshi

    但就这个场景来说

    场景搭建：模模搭 http://www.3dmomoda.com
    功能开发：ThingJS http://www.thingjs.com
    soulsomuns
        43
    soulsomuns  
       2019-01-21 18:09:18 +08:00 via iPhone
    厉害了
    blue0125
        44
    blue0125  
       2019-01-21 19:11:01 +08:00
    一般车头 朝外 0.0
    lyseky
        45
    lyseky  
       2019-01-22 09:11:45 +08:00 via Android
    可以
    lenville
        46
    lenville  
       2019-01-22 10:16:52 +08:00
    @xiangbulala ThingJS 最近推得厉害哇，知乎广告位几乎全是你们家的
    x86
        47
    x86  
       2019-01-22 10:17:10 +08:00
    不实用，你要考虑到使用人群就明白了
    vera0707
        48
    vera0707  
       2019-01-22 11:07:40 +08:00
    给大神跪了~
    xiangbulala
        49
    xiangbulala  
    OP
       2019-01-22 11:08:49 +08:00
    @lenville 可能你上班刷知乎刷的比较多...
    xiangbulala
        50
    xiangbulala  
    OP
       2019-01-22 11:10:31 +08:00
    @x86 21 楼截图是腾讯滨海大厦应用实图
    xiangbulala
        51
    xiangbulala  
    OP
       2019-01-22 11:12:45 +08:00
    @blue0125 哈哈哈可能工程师没有驾照，看来要做个倒库么...
    fox0001
        52
    fox0001  
       2019-01-22 12:14:04 +08:00 via Android   1
    @x86 #47 这个界面很讨好领导，一看就是高大上。

    感觉最需要的功能是空余车位导航、我的停车位置导航，但这个系统应该不是给司机用的吧。

    对于停车场管理员，二维图会不会更高效？

    另外，如果一辆车占了两个车位，这个系统会否识别到？

    纯粹好奇问问…
    xiangbulala
        53
    xiangbulala  
    OP
       2019-01-22 12:16:52 +08:00
    @fox0001 三维只是一个人机交互的界面，一般来说，三维更符合人对世界的直观认知，智慧停车场还需要车位引导系统、占道停车系统、智能车位锁、NB 地磁等系统以及物联网设备支持
    lamada
        54
    lamada  
       2019-01-22 14:05:06 +08:00
    风格不用这么写实，是不是就可以降低一些模型的面数达到更流畅的效果
    chenlang
        55
    chenlang  
       2019-01-22 15:10:50 +08:00
    这个是用什么写的啊
    Deville
        56
    Deville  
       2019-01-22 15:19:52 +08:00
    卧槽。。。玩儿完 demo 晕 3D 了。。。
    xiangbulala
        57
    xiangbulala  
    OP
       2019-01-22 16:05:51 +08:00
    @lamada 是的，你看腾讯滨海大厦实际应用中，都是简化模型，这个 demo 只是为了演示一下哈
    xiangbulala
        58
    xiangbulala  
    OP
       2019-01-22 16:06:53 +08:00
    @Deville ...想起当时变相金刚第一部上映的时候，坐在第一排看 3D，一起看的小姐姐看吐了....
    xiangbulala
        59
    xiangbulala  
    OP
       2019-01-22 16:07:22 +08:00
    @chenlang 公司自己的 ThingJS 平台 http://www.thingjs.com
    blessme
        60
    blessme  
       2019-01-22 20:51:33 +08:00
    浏览器卡得一币
    xiaoshu
        61
    xiaoshu  
       2019-01-22 21:12:58 +08:00 via iPhone
    和 three.js 相比优势在哪？
    xiaoshu
        62
    xiaoshu  
       2019-01-22 21:13:31 +08:00 via iPhone
    这个手机浏览器打开直接崩溃呀
    lenville
        63
    lenville  
       2019-01-23 09:46:21 +08:00
    @xiangbulala 可能你们广告费给得比较足（ or 我是目标人群？
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2559 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 30ms UTC 05:01 PVG 13:01 LAX 22:01 JFK 01:01
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86