推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
xiangbulala

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

  •  1
     
  •   xiangbulala · Jan 19, 2019 · 13989 views
    This topic created in 2845 days ago, the information mentioned may be changed or developed.

    总览

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

    车辆信息

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

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

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

    车位信息

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

    门禁杆控制(设备对接)

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

    Demo

    查看 Demo

    Supplement 1  ·  Jan 22, 2019
    补充一个实际应用项目:腾讯滨海大厦(腾讯微瓴系统)

    63 replies  •  2019-01-23 09:46:21 +08:00
    ywisax
    ywisax
    Jan 19, 2019
    1
    这个好玩
    CEBBCAT
    CEBBCAT
    Jan 19, 2019
    2
    找到个 bug,大概就是一直点播放动画,就会有一个蓝色方块代替车开到指定位置了,然后停止按键,车就会开到蓝色方块的位置

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

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

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

    不过毕竟是 3D,还是对硬件有些要求
    xiangbulala
    xiangbulala
    OP
    Jan 21, 2019
    42
    @canglaoshi

    但就这个场景来说

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

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

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

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

    纯粹好奇问问…
    xiangbulala
    xiangbulala
    OP
    Jan 22, 2019
    53
    @fox0001 三维只是一个人机交互的界面,一般来说,三维更符合人对世界的直观认知,智慧停车场还需要车位引导系统、占道停车系统、智能车位锁、NB 地磁等系统以及物联网设备支持
    lamada
    lamada
    Jan 22, 2019
    54
    风格不用这么写实,是不是就可以降低一些模型的面数达到更流畅的效果
    chenlang
    chenlang
    Jan 22, 2019
    55
    这个是用什么写的啊
    Deville
    Deville
    Jan 22, 2019
    56
    卧槽。。。玩儿完 demo 晕 3D 了。。。
    xiangbulala
    xiangbulala
    OP
    Jan 22, 2019
    57
    @lamada 是的,你看腾讯滨海大厦实际应用中,都是简化模型,这个 demo 只是为了演示一下哈
    xiangbulala
    xiangbulala
    OP
    Jan 22, 2019
    58
    @Deville ...想起当时变相金刚第一部上映的时候,坐在第一排看 3D,一起看的小姐姐看吐了....
    xiangbulala
    xiangbulala
    OP
    Jan 22, 2019
    59
    @chenlang 公司自己的 ThingJS 平台 http://www.thingjs.com
    blessme
    blessme
    Jan 22, 2019
    60
    浏览器卡得一币
    xiaoshu
    xiaoshu
    Jan 22, 2019 via iPhone
    61
    和 three.js 相比优势在哪?
    xiaoshu
    xiaoshu
    Jan 22, 2019 via iPhone
    62
    这个手机浏览器打开直接崩溃呀
    lenville
    lenville
    Jan 23, 2019
    63
    @xiangbulala 可能你们广告费给得比较足( or 我是目标人群?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1442 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 90ms · UTC 22:30 · PVG 06:30 · LAX 14:30 · JFK 17:30
    ♥ Do have faith in what you're doing.