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

[xiangbulala]

总览

查看 Demo

车辆信息

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

车位信息

门禁杆控制（设备对接）

Demo

查看 Demo

补充一个实际应用项目：腾讯滨海大厦（腾讯微瓴系统）

[ywisax]

这个好玩

[CEBBCAT]

找到个 bug，大概就是一直点播放动画，就会有一个蓝色方块代替车开到指定位置了，然后停止按键，车就会开到蓝色方块的位置

[EarthChild]

@CEBBCAT #2 小精豆……

[EarthChild]

还有一个 BUG 就是 2 楼说的那个位置。点了空间统计，明明没车停，还被标识已停车的黑色底纹

[dixeran]

播放动画的同时做闸门管理也会有 bug😂

[xiangbulala]

@CEBBCAT 模型加在过程中会显示成方块...

[xiangbulala]

@EarthChild 黑色底纹的含义其实是车位已售出，表达的不太明显

[xiangbulala]

@dixeran 嗯，确实

[xiangbulala]

花一千个铜币！

[hinate]

第四张图，左侧停车位是不是画反了...

[xiangbulala]

@hinate 哈哈哈 真是画反了，这尼玛怎么停进去啊

[swordne]

@hinate
>.< 要从楼上飞上去！

[zhuoyan]

厉害

[xiangbulala]

@swordne 下回画停机坪了...

[zarte]

这个项目貌似不错呀，看了几个 demo 了。

[xiangbulala]

@zarte 主打物联网可视化管理

[frylkrttj]

这是造游戏世界的人才吧

[miniwade514]

厉害。在浏览器里玩 GTA 指日可待😄

[seven777]

瞎说一点：
停车位上的阻拦器，是为了限位轮胎的最深位置的，防止相邻位置停车相撞。
涂上画的不对，实际中也有很多停车场是瞎弄的。

[iyour]

感觉真实场景下不太能够解决所有车型的模型，以及车主的个性化装饰问题。

[xiangbulala]

@iyour 场景为了好看多放了几个模型，实际应用中基本会用相同的模型
比如下面这样

[xiangbulala]

@seven777 嗯嗯 工程师准备重新画了...

[xiangbulala]

@zarte 现在 demo 做的比较烂，年后会做一个精致全面得 DEMO

[zanzhz1101]

感觉和我现在学的 bim 有点相似，虽然没什么关系哈哈

[nezumi85757]

@iyour 要做其实也能做，终归还是模型 json 化然后传到页面上来，只是可能实用意义没有那么大 ，充其量按照不同车型区分下，轿跑 suv mpv，然后车标车牌标一个真实的就 ok 了

[guanhui07]

厉害

[xiangbulala]

@zanzhz1101 有些时候会被认为是 BIM 轻量化

[zanzhz1101]

@xiangbulala #27 感觉其实只是比较像，国内 bim 刚刚起步，最近也没啥大的进展，仅仅停留在建模预算层面上

[zhenizhui]

打开 demo，mac 卡了

[xiangbulala]

@zanzhz1101 bim 侧重施工过程吧，thingjs 侧重建造完成后的可视化管理

[zanzhz1101]

@xiangbulala #30 是的

[NonClockworkChen]

iphone 6sp 播放动画，蓝色的柱子闪了一下，然后就消失了。 什么都没有了。
这是 bug 吗，我们最近要做一个类似大富翁的 html5 的宣传小项目，有点慌，对 html5 3D

[xuboying]

新鲜有趣的事物，不过有个疑问，如果这是个实用的管理系统，是否需要加载云层和灯塔，是否需要做灯塔的阴影，只是为了好看还是别的，比如云层，是否要和实际天气关联呢？

[xiangbulala]

@xuboying 云层和灯塔是指？

thingjs 提供了多种天空盒，也包括动态天空和雾效果，当然也可以用粒子系统模拟天气，看需求了
实际的停车场管理项目中主要是对接停车场相关的物联网传感器数据，做可视化管理，我在 21 楼上传的图片为实际项目的截图

[wxsm]

MacBook Pro (15-inch, 2017) 卡到怀疑人生，实用性存疑

[txwd]

三维视觉效果是很震撼，但卡...

[vibbow]

windows + firefox + i5-7400 + 1066
卡到怀疑人生

[vibbow]

firefox 显示帧率在 5fps (播放动画) - 10fps (静止状态) 之间波动

[Nioooo]

chrome 运行起来还是很流畅的 换个浏览器试试效果还是棒棒哒

[canglaoshi]

点赞 能帮我问问，这是什么样的软件画出来的 demo

[xiangbulala]

@txwd 这个规模的场景，集成显卡应该都不会卡

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

不过毕竟是 3D，还是对硬件有些要求

[xiangbulala]

@canglaoshi

但就这个场景来说

场景搭建：模模搭 http://www.3dmomoda.com
功能开发：ThingJS http://www.thingjs.com

[soulsomuns]

厉害了👍

[blue0125]

一般车头 朝外 0.0

[lyseky]

可以

[lenville]

@xiangbulala ThingJS 最近推得厉害哇，知乎广告位几乎全是你们家的

[x86]

不实用，你要考虑到使用人群就明白了

[vera0707]

给大神跪了~

[xiangbulala]

@lenville 可能你上班刷知乎刷的比较多...

[xiangbulala]

@x86 21 楼截图是腾讯滨海大厦应用实图

[xiangbulala]

@blue0125 哈哈哈可能工程师没有驾照，看来要做个倒库么...

[fox0001]

@x86 #47 这个界面很讨好领导，一看就是高大上。

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

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

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

纯粹好奇问问…

[xiangbulala]

@fox0001 三维只是一个人机交互的界面，一般来说，三维更符合人对世界的直观认知，智慧停车场还需要车位引导系统、占道停车系统、智能车位锁、NB 地磁等系统以及物联网设备支持

[lamada]

风格不用这么写实，是不是就可以降低一些模型的面数达到更流畅的效果

[chenlang]

这个是用什么写的啊

[Deville]

卧槽。。。玩儿完 demo 晕 3D 了。。。

[xiangbulala]

@lamada 是的，你看腾讯滨海大厦实际应用中，都是简化模型，这个 demo 只是为了演示一下哈

[xiangbulala]

@Deville ...想起当时变相金刚第一部上映的时候，坐在第一排看 3D，一起看的小姐姐看吐了....

[xiangbulala]

@chenlang 公司自己的 ThingJS 平台 http://www.thingjs.com

[blessme]

浏览器卡得一币

[xiaoshu]

和 three.js 相比优势在哪？

[xiaoshu]

这个手机浏览器打开直接崩溃呀

[lenville]

@xiangbulala 可能你们广告费给得比较足（ or 我是目标人群？