首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Web 3D机房,智能数字机房HTML5 WebGL(ThreeJS)匠心打造「建议收藏」

最近web 3D机房研发告一段落,有时间整理这段时间的一些成果。主要涉及使用H5、js、WebGL技术。...先用一个线框把机柜位置显示出来,再把一个高度符合使用比例的立方块显示出来就行了,类似一个柱状图。设置一下颜色、光照等属性,让它看上去更真实: 空调风向 机房中的空调冷风流向也是一个需要监控的业务。...设备报警 巡更路径 ---- Web 3D机房,智能数字机房HTML5+Threejs(WebGL) 项目实战 【课程介绍】 针对webgl的库threejs框架的Web 3D智能数字机房项目实战详细的讲解...,随着IT信息技术和移动端的发展,Html5+3D(Webgl)技术已经悄然崛起,3D机房数据中心可视化应用越来越广泛,主要包括3D机房搭建,机柜、服务器、数据实时监控、机房线缆和走线架、机柜利用率、机架可用空间...章节目录 01. 3D机房功能效果 02. 3D机房功能效果2 03. 3D机房场景搭建上 04. 3D机房场景搭建中 05. 3D机房场景搭建下 06. … 大家可以点击【腾讯课堂】查看我的课程

2.7K20

MP3光标位置(算法)

MP3 Player因为屏幕较小,显示歌曲列表的时候每屏只能显示几首歌曲,用户要通过上下键才能浏览所有的歌曲。为了简化处理,假设每屏只能显示4首歌曲,光标初始的位置为第1首歌。...现在要实现通过上下键控制光标移动来浏览歌曲列表,控制逻辑如下: 歌曲总数<=4的时候,不需要翻页,只是挪动光标位置。...输入描述: 输入说明: 1 输入歌曲数量 2 输入命令 U或者D 输出描述: 输出说明 1 输出当前列表 2 输出当前选中歌曲 /** * MP3光标位置 * 1 、 获取当前歌曲位置...获取当前光标在4首歌哪个位置 获取总页数长度 * 2 、 计算光标前后 有几个数 * 3 、 把前后的数拼接 * * @param args */...int index = 1; // 光标位置 int pageIndex = 1; for (int i

85710
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Three.js呈现3D效果机房–初步方案

    3D机房系统是最近用户的需求,通过相关了解最后使用Three.js,也发现最近有东西可以写出来分享: webGL可以让我们在canvas上实现3D效果。...而three.js是一款webGL框架,由于其易用性被广泛应用 Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库 ---- 分步实现3D效果 初始化3D模型参数 开始搭建场景...开始搭建场景 搭建场景包含一些具体的初始化操作 一些初始化方法(之后才对具体方法加以说明): var that = this; room3dObj = that; that.initThree(that.id...循环渲染界面 var that = room3dObj; if (TWEEN != null && typeof (TWEEN) !...添加对象到场景中 var that = room3dObj; that.scene.add(obj); that.objects.push(obj); ##最后效果 ##浏览器兼容 目前

    2.8K10

    机房位置重要吗?

    机房位置重要吗?本文为您解答! 云游戏服务器的机房位置重要吗? 对于喜欢玩游戏的人来说,他们往往比较讨厌游戏里的延迟,因为如果延迟较高,游戏画面就会卡顿。...所以选择位置比较近的云游戏服务器机房可以解决这个问题。一般来说,机房离用户的距离越近,延迟就会越低,访问速度加快。因此国内的玩家在玩游戏的时候,最好选择国内的服务器。...所以说机房位置对云游戏服务器非常重要。 搭建 个人云游戏服务器的步骤有哪些? 1、选择腾讯云云服务器供应商,这家云服务供应商有新人优惠服务,价格低,产品优。...3、既然是个人游戏需求,选择最优惠的套餐即可。 4、套餐购买后,配置直接默认跳过。 5、选择云服务器系统时,我们选择Windows系统,这样操作界面和我们平时的电脑一样,使用起来更加方便。...机房位置重要吗?以上搭建方法都学会了吧,只要大家购买腾讯云的云服务器,我们的客服会给大家解决搭建难题!

    3.3K30

    告别传统机房3D 机房数据可视化实现智能化与VR技术的新碰撞

    3D 机房数据中心可视化系统。...3D 机房场景和 2D 控制面板的结合,打造出一套机房数据中心可视化系统的解决方案。 项目预览地址:基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型 1、整体场景-摄像头效果图 ?...根据上图的描述,在本项目中可以在摄像头初始化之后,缓存当前 3d 场景 eyes 眼睛的位置,以及 center 中心的位置,之后将 3d 场景 eyes 眼睛和 center 中心设置成摄像头中心点的位置...3d 场景中任意位置的快照,从而实现摄像头监控图像实时生成。...总结 3D 机房数据中心可视化系统在很大程度上保障了机房日常运行的监控状态,及时反馈机房内部的实况信息,这是可视化系统的一大优势。

    1.1K10

    快速制作机房3D效果图教程「建议收藏」

    作者:广州麦景科技有限公司 林鲁刚 原文接 随着信息网络技术的不断发展,大量数据中心的建设,机房监控软件已经成为了机房管理者重要的管理工具,机房监控软件也从无到有,从2D到3D,从静态到三维动态的改进...文字可以保留,因为在3D里不会显示CAD里的文字。 清理完CAD后选中所有图形按“W”将CAD另存为新块。...[图片上传中…] 再使用矩形工具,画出门上墙体部分 同样使用挤出命令,挤出高高度,900mm 使用2.5维捕捉工具,将门上墙体捕捉到相应位置上。...V-Ray面光源根据机房大小来打,需要盖住所有机房区域。...最终效果↓ 至此全部完事,当然也可以做的虚拟3D机房,(也就是3D机房监控)效果如下↓ 了解更多,欢迎访问公司官方网站www.gzmaijing.com 广州麦景科技有限公司 发布者:全栈程序员栈长

    2.1K31

    基于 HTML5 Canvas 的 3D WebGL 机房创建

    对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用。...本例是将灯光、雾化以及 eye 的最大最小距离等等功能在 3D 机房中进行的一个综合性的例子。接下来我将对这个例子的实现进行解析,算是自己对这个例子的一个总结吧。...(100); g3d.setGridGap(100); g3d.setFar(30000); g3d.setOrthoWidth(5000); g3d.setFogNear(100);//默认为1...x, h/2+1, z); } 这个服务器我们还制作了门的打开以及关闭的动作,还有服务器内部的设备的弹出以及恢复位置。...这个 3d 机房的例子非常有代表性,性能也展示得很全面,觉得有必要拿出来讲一下,希望能对你们有一定的帮助~

    1.6K70

    基于HT for Web 快速搭建3D机房设备面板

    今天我们就在HT for Web的3D技术上完成设备面板的搭建。 我们今天模拟的设备是机房设备,先来目睹下最终效果: ?...dataModel中 * @param p3 {array} 位置信息 * @param s3 {array} 长宽高信息 * @returns {ht.Node} 3D拓扑节点 */ function...node.p3(p3); node.s3(s3); dataModel.add(node); return node; } 该方法通过传入位置信息和大小信息创建出一个3D拓扑节点...我们只需要找一个和端口形状一样的图片贴在长方体的正面,然后套在设备上就可以了,具体的实现如下: /** * 创建端口节点,并吸附到指定的节点上 * @param indexes {array} 端口位置信息...67.5 + col * 32, y - 26.5, z); } dataModel.add(port); }); } 在设备上总共有20个端口,我们通过传入的端口位置信息来确定创建出来的节点位置

    90460

    基于HTML5快速搭建3D机房设备面板

    我们今天模拟的设备是机房设备,先来目睹下最终效果:http://www.hightopo.com/demo/blog_3d_20150810/server.html ?...dataModel中  * @param p3 {array} 位置信息  * @param s3 {array} 长宽高信息  * @returns {ht.Node} 3D拓扑节点  */ function...node.p3(p3);     node.s3(s3);     dataModel.add(node);     return node; } 该方法通过传入位置信息和大小信息创建出一个3D拓扑节点...我们只需要找一个和端口形状一样的图片贴在长方体的正面,然后套在设备上就可以了,具体的实现如下: /**  * 创建端口节点,并吸附到指定的节点上  * @param indexes {array} 端口位置信息...67.5 + col * 32, y - 26.5, z);         }         dataModel.add(port);     }); } 在设备上总共有20个端口,我们通过传入的端口位置信息来确定创建出来的节点位置

    51030

    3D机房效果图制作|创建步骤过程分步简述

    三维机房效果图创建过程步骤,制作教程原创文章发布,多年实战经验简述: A:客户提供机房布置方案规划图之后,先沟通好,例如角落里是七氟丙烷柜,右侧是精密空调,后边是UPS配电柜,冷通道是双排还是单排的,...机房整体鸟瞰角度效果图案例 C:打开三维软件,用脚本粘贴刚才的图纸,一键归零合并冻结。...单排与双排机房冷通道效果图案例 E:角度确定好后开启捕捉,开始根据角度搭建模型,特别要注意的是角度之外的模型无需搭建,不要浪费时间,徒增工作量。...机房冷通道电池间俯视图案例 G:最后一步,就是出小样了,和客户沟通微调。若是前期理解到位,图纸不变更,后期几乎不用改动。 专业效果图设计,V:sixment,欢迎各行业的人来合作。

    1.2K20

    基于HTML5快速搭建3D机房设备面板

    我们今天模拟的设备是机房设备,先来目睹下最终效果:http://www.hightopo.com/demo/blog_3d_20150810/server.html ?...dataModel中 * @param p3 {array} 位置信息 * @param s3 {array} 长宽高信息 * @returns {ht.Node} 3D拓扑节点 */ function...node.p3(p3); node.s3(s3); dataModel.add(node); return node; } 该方法通过传入位置信息和大小信息创建出一个3D拓扑节点...我们只需要找一个和端口形状一样的图片贴在长方体的正面,然后套在设备上就可以了,具体的实现如下: /** * 创建端口节点,并吸附到指定的节点上 * @param indexes {array} 端口位置信息...67.5 + col * 32, y - 26.5, z); } dataModel.add(port); }); } 在设备上总共有20个端口,我们通过传入的端口位置信息来确定创建出来的节点位置

    942100

    保障双11,90后美女工程师跟机器人“天巡”草原守机房

    这是国内最大的下一代超大型云计算数据中心,也就是大家熟知的阿里云华北3节点。 天巡是全球唯一的数据中心高精度智能运营机器人。...现阶段,天巡可以顶过3个人类工程师。 一天中,小花有八成的工作时间是和天巡度过的。在天猫双11期间,“天巡”将不分昼夜,在华北数据中心独自进行巡检工作。...天巡拥有超强智能大脑、高精度“眼睛”、3D激光雷达,可以在机房自主导航,一旦发现机房的工作环境异常,就会把检测到的情况发送到机房控制室。...每天凌晨4点,天巡准时在100亩的机房巡查,早上8点整又准时回充电桩充电。 张北机房的管理严格,有了“天巡”的帮助,运维中心的工作人员排班少了。...“天巡”搭载全球领先的3D激光传感器,使用国自机器人星越导航技术,拥有智能巡检、随工巡检、语音导览、安防管理四大核心功能,适用于各类数据中心(IDC)的巡检管理工作,是国自智能巡检机器人家族的最新成员。

    1.2K40

    无插件纯Web 3D机房,HTML5+WebGL倾力打造

    这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及如何用它打造精美的3D机房监控系统。 目标效果图 下图是客户给找的一张的效果参考图,希望机房至少能达到下面的3D效果。...这段程序基本上什么也没做,就画了一个静止不动的区域,如下图: 虽然看不见任何3D的内容,不过它已经是一个最简单的webgl程序了。我们的3D机房,也就是在这上面不断丰富而已。...在3D机房的监控系统里,门禁是很重要的一块,客户要求门应该与实际位置相对应,并且要有开门关门的动画效果。这样,实际的门禁信息采集上来后,就能在界面实时看到门的状态了。...写程序也是一样,如果从webGL的main开始写……这3D机房的系统要几个月甚至几年才能做出来呢? 外侧墙### 按照项目实际要求,继续增加更多建筑物墙体。主要是房间外侧有两道走廊隔墙。...机柜和设备 写了那么一大篇,才终于把3D机房的外观装修完成,咱也算是个设计师程序员的混合型人才了呢。其实机房最核心的资源——机柜,还没找落呢,没办法,形象工程也是项目建设的一大亮点。

    1.2K41

    基于HTML5的电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应用几乎一致性的首选...机房有Hightopo可选择,搞移动应用有JQuery Mobile可选择,每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳,打开平板好好通读这一周Web前端发送的一切新鲜事,是的我有...见此视频 使用Hightopo还有很重要的一点就是HT提供了基于HTML5的可视化设计器,无需借助3ds max和maya这样的专业3D设计工具,直接HT 3D Designer通过页面就能进行3D建模...就像电信OSS和BSS越来越难清晰定界一样,2D和3D的应用也会如此,越来越模糊,一个系统将2D和3D融合是必然趋势,你中有我我中有你,也许将来我这个文章标题会让人觉得搞笑,机房监控当然要有3D功能了,...何必强调3D,没有3D还算是机房监控吗,好比今天的手机,不能上网还算手机吗?

    1.4K70

    基于HTML5的WebGL电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/example...机房有Hightopo可选择,搞移动应用有JQuery Mobile可选择,每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳,打开平板好好通读这一周Web前端发送的一切新鲜事,是的我有...见此视频 使用Hightopo还有很重要的一点就是HT提供了基于HTML5的可视化设计器,无需借助3ds max和maya这样的专业3D设计工具,直接HT 3D Designer通过页面就能进行3D建模...就像电信OSS和BSS越来越难清晰定界一样,2D和3D的应用也会如此,越来越模糊,一个系统将2D和3D融合是必然趋势,你中有我我中有你,也许将来我这个文章标题会让人觉得搞笑,机房监控当然要有3D功能了,...何必强调3D,没有3D还算是机房监控吗,好比今天的手机,不能上网还算手机吗?

    1K100
    领券