前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求..._node, arguments);//设置节点的 3d 坐标 } }); 创建 Editor.Cabinet 类 ?.../设置图元在3D拓扑中的z轴长度 door.setTall(s3[1]);//控制Node图元在y轴的长度 door.setElevation(0);//设置图元中心在3D坐标系中的y坐标...场景创建 如果熟悉的同学应该知道，用 HT 创建一个 3D 场景只需要 new 一个 3D 组件，再将通过 addToDOM 函数将这个场景添加进 body 中即可： var g3d = E.main...= new ht.graph3d.Graph3dView(); //3d 场景 main.js 文件中主要做的是在 3D 场景中一些必要的元素，比如墙面，地板，门，空调以及所有的机柜的生成和排放位置，还有非常重要的交互部分
远程监控系统主要是通过分布于棉花加工生产线各种设备的传感器、开关信号、视频监控设备、 PLC 控制器等装置，通过智能联网设备集成到互联网和局域网上面，实现对生产、运营情况的随时掌握，建立网络范围内的监控数据和网上知识资源库，...http://www.hightopo.com/demo/Plucker/ 代码实现 创建场景 首先是创建一个三维场景（https://hightopo.com/guide/guide/core/3d...window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小改变事件，调用刷新函数 } 整个大环境搭建好了后，我们需要向场景中添加 3D
看到有一个网站上在卖的图表，感觉挺好看的，就用 HT for Web 3D 做了一个小例子，挺简单的，也挺好看的，哈哈~ Demo 地址： http://www.hightopo.com/demo/WireframeAnim.../index.html 这个例子用 HT 实现真的很容易，首先创建一个 HT 中最基础的 dm 数据模型，然后将数据模型添加进 g3d 3d 组件中，再设置 3d 中的视角并把 3d 组件添加进 body...]/2, p3[2]]); node.s3(s3); dm.add(node); 其中要说明的是，'shape3d':cylinderModel 这个样式的设置，首先，shape3d 属性指定显示为 3d...最后是 3d 文字，呈现 3d 文字需要一个 json 格式的 typeface 字体，然后通过 ht.Default.loadFontFace 来加载 json 格式的字体到内存中，详情请参考 HT...for Web 3D 手册： ht.Default.loadFontFace('.
上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用ht.js 快速3D 建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。 ...上图主要以 2/3D联动的方式，依次展示了在面对突发情况下，城市应急救援的响应过程。...现场方案启动->人员进场->作业中） 实现思路：首先对模型进行分组，并在相应的图元上标记tag，使用ht.Default.startAnim() 来完成每一步的动画效果，然后拼接动画即可实现上图中的3D...常规的2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D 可视化更能直观的、有效的反馈信息。当然，3D可视化离不开一款强大的图形引擎。...3D 漫游可以提供很好的用户交互体验，所以本demo 也展示了这一功能。 借助于HT，漫游功能的实现只要几行代码就可以实现了。
使用弹力布局功能需要在引入 ht.js 核心库之后，再引入一个 ht-forcelayout.js 的弹力布局插件库，因为还用到了 form 表单，所以要引入 ht-form.js 的表单插件库： ht.layout.Force3dLayout 类提供 3D 弹力布局，构造函数可传入 DataModel 和 Graph3dView...var ran = Math.random() * colorLen; return colorList[Math.floor(ran)];//随机6种颜色 }; 接着创建弹力球，简单生成一个 3D...，s3 是 HT 封装的设置 3D 节点大小的 setSize3d 函数的简写，最后将这个节点添加进数据模型 dataModel 中： var createNode = function(dm) {//...环形模型，将其命名为‘custom’： ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线，环绕一周形成3D模型。
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。...在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了一些常规的3D模型，但是对于那些比较复杂的模型，比如汽车、人物等模型就无能为力了，那再项目中需要用到这样的模型该肿么办呢？...模型后，我们马上创建了一个3D图元，并将其添加到了dataModel容器中，这时我们需要一个3D拓扑来显示这个3D图元，具体的创建代码如下： var dataModel = new ht.DataModel...到这里，模型就算完成了，接下来要做的就是让螺旋桨动起来，和2D叶轮旋转类似，在3D模型上也可以做数据绑定，要想让螺旋桨旋转起来，我们就需要设置螺旋桨的rotation属性，和3D上的图元不同的是，设置3D...图元的rotation属性需要设置一个数组，定义3D上三个方向的旋转值。
我是用 HT 做的整个例子，首先创建 3D 场景，HT 有 3D 组件，可以直接通过 new ht.graph3d.Graph3dView 3D 组件来创建一个实例，然后通过 getView() 函数获取组件的底层...ht.DataModel();//数据容器，可以将显示在界面上的所有数据通过 dataModel.add 存储在数据容器中 g3d = new ht.graph3d.Graph3dView(dm);//3D...组件 g3d.addToDOM();//将 3D 组件的底层 div 添加到 body 中 HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的...no-repeat; 上面还有一个部分没有提及，就是点击按钮后调用的 btnClick 函数： function btnClick(imageName){ if(flag === 1){//做的判断是根据3d...setIcon('symbols/隧道用图标/'+imageName+'.json');//设置id为105的item内容显示的图标为form表单上点击的交通灯的按钮的图标 } 最后就是点击事件了，一个是点击 3D
本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。...整理思路： 场景部分： 这里把 3D 当做背景嵌套在 2D 场景中。 这样在初始化图纸的时候，直接反序列化 2D 图纸即可。...事件部分： 2D 图纸中有很多的按钮，通过它们来控制 3D 中的一些动画。 ...实现思路是在反序列化图纸的时候把 2D、3D 的 模型和视图对象挂载到 window 上，这样在不同的场景中都可以获取到相应的数据模型。...环境部分： 风速、风向、变桨角度这些会在 2D、3D 中所表现，所以可以把他们放到数据池里面，方便管理。
扫描货架和商品条码核对是否正确，然后送到接货区，录入运输单位信息，完成出货任务，重要的是包括出货时间、操作员、货物种类、数量、产品序列号、承运单位等信息在货物装车的同时已经通过无线方式传输到了计算机信息中心数据库。...from './3d/index'; ?...从这个 3d 场景中可以看到，我们需要“地板”、“墙面”、“货架”、“叉车”、“货物”以及 3d 场景。...Car const car = new Car(); car.addToDataModel(dm); 至于“货物”，我们在这个 js 上是采用定时器调用 in 和 out 方法，这里有一个模拟的数据库...= 'cask') {}//如果为“货物”类型为“木桶” } car.cargoType = type; if (obj.inOutStatus === 'I')//如果值为 “I”，则进库
本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景。...Solar System 这套系统主要用于两种场景： 1.作为科研成果、新发现的载体，做 3D 太空数据可视化呈现，用于向普通民众科普太阳系的构成、各行星组织结构等知识，可置于博物馆大屏、学校大屏，...点选右侧对应检测点，会触发右侧点的缩放动画，同时左侧对应的 3D 点位也会同步变化，其它的点则调用 setAnimation(null) //......分别对应 3 个模块： 3.点选主题一中的行星跳转到的主题二的拓扑结构，点选主题二的星体跳转主题三的地形，主题三无法向前关联，只能通过前两种方式进行跳转： 总结： 该系统使用轻量高效的 ht 库，...矢量平面信息与 3D 对象进行关联，并采用 3D 拓扑可视化呈现，相对位置清晰直观，3D 地形与等高线图对应，海拔高度和相互遮挡关系都可以准确把握。
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合...所以这时候结构清晰的3D树的需求就来了，那么这个3D树具体长成啥样呢，我们来一起目睹下~ ? 要实现这样的效果，该从何下手呢？接下来我们就将这个问题拆解成若干个小问题来解决。 1....在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...搞定，就是这样子了，2D拓扑上面的布局搞定了，那么接下来该出动3D拓扑啦~ 3....加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台...Node.js后台代码如下，通过require引入HT和Socket.io相关类库，io = require('socket.io').listen(8036)构建出一个监听在8036端口的服务，通过io.sockets.on...function (data) { reloadModel(dataModel, data); }); }); 客户端的代码需要通过引入Socket.io客户端类库，...} } }); 几个注意点： 1、首选和Web Workers一样，跑在Node.js的类库肯定不能操作...window和document之类的页面特定元素对象，从这点说很多考虑不周全的类库会把自己限制死只能在页面主线程运行，这点HT for Web考虑得很周到，不仅ht.js包括所有ht-forcelayout.js
在新的HTML5标准中，新增了一个非常重要的元素—canvas元素。使用该元素，可以在页面中直接进行各种复杂图形的制作。...RGraph是HTML5的JS图表库，拥有20多个类型的图表。...利用最新的HTML5 canvas标签，这个工具可在网页浏览器中生成JavaScript的图表，这意味着更快的网页加载和更少的Web服务器负载。...HTML5：使用RGraph绘制折线图（一） HTML5：使用RGraph绘制折线图（二） HTML5：使用RGraph绘制折线图（三） HTML5：使用RGraph绘制折线图（四） 品尝Android
如上图中医学领域可通过3D的流动直观的观察人体血液的流动，燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。...Hightopo的HT for Web作为3D客户端呈现解决方案，今天介绍的重点不在于采集这些指标，而在于如何应用HT的预定于3D元素来实现流动的效果。...和uvOffset实现流动的控制，这样实现的好处是没有增加过多的3D图元模型，同时可借助2D的图片融合到3D进行呈现，毕竟美工改变2D图片，或程序员内存中动态改变2D图片，都会比动态改变3D模型来的容易且轻量...该例子左下角摆放了ht.graph.GraphView的2D拓扑图，2D和3D共同绑定ht.DataModel的数据模型，因此可随意操作2D拓扑或3D引擎上的图形组件，你会发现他们会自动联动，任何一处的改变会同时在另一个组件上实时呈现改变效果...，大家可以发挥想象力让3D的流动效果发挥出更多不可思议的应用场景效果。
，主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用，先上最终例子实现的界面效果和操作视频： ?...实现Heatmap的开源js库比较出名的就是 heatmapjs ，该框架发展了2年多，作者Patrick Wied最近决定在保持开源的基础上，提供有偿的商业支持服务，这是好事，地球上绝大部分开源项目作者搞个...Performance JS heatmaps》博客中提供了基于WebGL实现的heatmap方式，并将其开源在https://github.com/pyalot/webgl-heatmap 上，这两个开源库质量都还不错...引擎将Cavnas作为贴图信息动态呈现到3D场景的效果。...整个实现代码如下不到百行，你也可以采用https://github.com/pyalot/webgl-heatmap 的WebGL方式来实现，这样就是3D到2D再到3D的有趣过程，这就是HTML5技术可无缝融合各种方案的魅力
中有一个 BorderPane 面板组件是拿来页面排布的，可以排布 html 标签，也可以排布 HT 的组件，这里我们将整个页面分为三个部分，顶部工具条 toolbar、左侧列表 listView 和中间 3d...场景，利用的是 HT 的三维组件 ht.graph3d.Graph3dView，然后在 3d 场景上添加两个节点，作为对照： //创建两个节点放到 3d 场景中 var node = new ht.Node...node.s('all.color', '#87A6CB');//设置 node 的六个面颜色 g3d.dm().add(node);//将新建的 node 添加进 3d...if(lastFaceInfo){//鼠标未松开的情况下，贴图显示旧值 //data.face 默认值为front，图标在3D下的朝向，可取值left|right|top...else{//拖拽结束之后，所有值都回到初始值 if(dragImage){//有从列表中拖拽图片 if(lastFaceInfo){//有赋“图片”到 3d
我们来看看如何操作这个 3d 交互模型，可以直接滑动“Rotation”的滑动条，你会看到 3d 和左下角的 2d 上的图元都会旋转，接着点击“Axis”中的任意一个值，然后点击“Animate”，你会看到中间这个图元会旋转...左下角的是整个 3d 场景内的俯视图，这样我们可以非常直观地看清图元的移动方向和位置。 可能你会好奇这个是怎么俯视图是怎么放上去的？如果 3d 中的图元变化，这个俯视图中的图元也会跟着变化么？...如何只移动 3d 二把这两个固定在这边？或者你可能还有别的问题，在这里我会尽量清楚地解答，实在找不到答案可以去官网 HT for Web 查找你的问题。...好了，基础就是先布局，布 3d 场景，HT 在提供方法方面算是非常细致的了，平时我们生成网格可能就要花费一段时间，又是基础代码，新手开发人员都能很快上手呢~短短几行代码就能创建一个 3d 场景，简直太快...只要将这个值设置得比 setNear 设置的大，我们就不会看到 3d 图元的内部中去了。 我们还注意到似乎是“废代码”的一行： cs.push(cs[0])。这个完全不是废代码啊，帮了很大忙呢！
最近上线了的基于HTML5的燃气3D培训仿真系统，以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的，OSG引擎性能和渲染效果各方面还是不错的，但因为这次新产品需求要求能运行多移动终端...系统最终采用HT for Web的3D框架实现，项目中的程序员也很高兴有这样的机会终于摆脱维护MFC老系统的宿命，虽然大家都只有C++的开发经验，对HTML/CSS/JS并不熟悉，但毕竟HT for Web...已经做了极佳的组件封装，CSS和DOM、包括跨平台的兼容性等棘手问题交给HT框架透明处理，程序员只需要掌握基本的js用法就可以快速上手，按HT的说法类比与关系数据库ORM(Object-relational...让我感觉比较爽的是控制3D图元部分，以前不同的设备类型得体力活的写一堆代码，才能好不容易的实现些旋转移动等操作控制，界面控件和3D模型之间的数据同步也得费不少劲，现在用js这种动态语言真是非常灵活，界面都可以非常方面的动态生成...当然目前项目还仅仅是初版移植，业务功能上还未有太大创新，但就目前的进度我们已经体会到HTML5的开发快速性，js语言也不是想象中那么弱，团队控制好一定的编码规范后js的灵活性带来的开发进度提高还是非常显著
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
