前言 用 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 场景中一些必要的元素，比如墙面，地板，门，空调以及所有的机柜的生成和排放位置，还有非常重要的交互部分
http://www.hightopo.com/demo/Plucker/ 代码实现 创建场景 首先是创建一个三维场景（https://hightopo.com/guide/guide/core/3d...window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小改变事件，调用刷新函数 } 整个大环境搭建好了后，我们需要向场景中添加 3D
上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用ht.js 快速3D 建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。 ...上图主要以 2/3D联动的方式，依次展示了在面对突发情况下，城市应急救援的响应过程。...现场方案启动->人员进场->作业中） 实现思路：首先对模型进行分组，并在相应的图元上标记tag，使用ht.Default.startAnim() 来完成每一步的动画效果，然后拼接动画即可实现上图中的3D...常规的2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D 可视化更能直观的、有效的反馈信息。当然，3D可视化离不开一款强大的图形引擎。...3D 漫游可以提供很好的用户交互体验，所以本demo 也展示了这一功能。 借助于HT，漫游功能的实现只要几行代码就可以实现了。
看到有一个网站上在卖的图表，感觉挺好看的，就用 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('.
/guide/lib/plugin/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模型。...: [(p1[0]+p2[0])/2, (p1[1]+p2[1])/2, (p1[2]+p2[2])/2] }); }; 基础配件全部定义完毕，接着就是将“shape3d”属性设置为自定义的 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上三个方向的旋转值。
本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。...整理思路： 场景部分： 这里把 3D 当做背景嵌套在 2D 场景中。 这样在初始化图纸的时候，直接反序列化 2D 图纸即可。...事件部分： 2D 图纸中有很多的按钮，通过它们来控制 3D 中的一些动画。 ...实现思路是在反序列化图纸的时候把 2D、3D 的 模型和视图对象挂载到 window 上，这样在不同的场景中都可以获取到相应的数据模型。...环境部分： 风速、风向、变桨角度这些会在 2D、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
./3d/index'; 我们将页面上的每个部分分开来放在不同的 js 文件中，就是上面加载的 js export 的部分，根层容器 BorderLayout（整体最外层的 div），整张图上的部分都是基于...from './3d/index'; ?...从这个 3d 场景中可以看到，我们需要“地板”、“墙面”、“货架”、“叉车”、“货物”以及 3d 场景。.../g3d';//3d场景 import { getCargoById } from '..../G'; 在 src\view\3d\cargo.js 文件中，定义了一个“货物”类，这个类中声明了很多方法，比较基础，有需要的自己可以查看这个文件，这里我不过多解释。
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合...所以这时候结构清晰的3D树的需求就来了，那么这个3D树具体长成啥样呢，我们来一起目睹下~ ? 要实现这样的效果，该从何下手呢？接下来我们就将这个问题拆解成若干个小问题来解决。 1....在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...搞定，就是这样子了，2D拓扑上面的布局搞定了，那么接下来该出动3D拓扑啦~ 3....加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局
本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景。...Solar System 这套系统主要用于两种场景： 1.作为科研成果、新发现的载体，做 3D 太空数据可视化呈现，用于向普通民众科普太阳系的构成、各行星组织结构等知识，可置于博物馆大屏、学校大屏，...2.作为宇航局、航空航天相关研究机构的驾驶舱，在 3D 可视化界面中对行星相对位置、星体状态、星体气象、星体地形有一个直观快速的了解，在宇宙空间探索越来越成功的当下，在数据传输技术得到速度和质量上的突破后...点选右侧对应检测点，会触发右侧点的缩放动画，同时左侧对应的 3D 点位也会同步变化，其它的点则调用 setAnimation(null) //......对象进行关联，并采用 3D 拓扑可视化呈现，相对位置清晰直观，3D 地形与等高线图对应，海拔高度和相互遮挡关系都可以准确把握。
中有一个 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的流动直观的观察人体血液的流动，燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。...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的流动效果发挥出更多不可思议的应用场景效果。
已有众多文章分享了生成Heatmap热图原理，可参考《How to make heat maps》和《How to make heat maps in Flex》，本文将介绍基于HTML5技术的实现方式...，主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用，先上最终例子实现的界面效果和操作视频： ?...回到我们要实现的例子，我将采用heatmapjs在内存中实时运算出热图，结合hightopo(http://www.hightopo.com/)的HT for Web的3D引擎，以一堆节点连线关系的3D...引擎将Cavnas作为贴图信息动态呈现到3D场景的效果。...整个实现代码如下不到百行，你也可以采用https://github.com/pyalot/webgl-heatmap 的WebGL方式来实现，这样就是3D到2D再到3D的有趣过程，这就是HTML5技术可无缝融合各种方案的魅力
我们来看看如何操作这个 3d 交互模型，可以直接滑动“Rotation”的滑动条，你会看到 3d 和左下角的 2d 上的图元都会旋转，接着点击“Axis”中的任意一个值，然后点击“Animate”，你会看到中间这个图元会旋转...左下角的是整个 3d 场景内的俯视图，这样我们可以非常直观地看清图元的移动方向和位置。 可能你会好奇这个是怎么俯视图是怎么放上去的？如果 3d 中的图元变化，这个俯视图中的图元也会跟着变化么？...如何只移动 3d 二把这两个固定在这边？或者你可能还有别的问题，在这里我会尽量清楚地解答，实在找不到答案可以去官网 HT for Web 查找你的问题。...好了，基础就是先布局，布 3d 场景，HT 在提供方法方面算是非常细致的了，平时我们生成网格可能就要花费一段时间，又是基础代码，新手开发人员都能很快上手呢~短短几行代码就能创建一个 3d 场景，简直太快...只要将这个值设置得比 setNear 设置的大，我们就不会看到 3d 图元的内部中去了。 我们还注意到似乎是“废代码”的一行： cs.push(cs[0])。这个完全不是废代码啊，帮了很大忙呢！
场区分布页面又包括两个不同的 3D 场景，分别是陆地风机场和海上风机场。点击两个 3D 风机场最终都会进入到 3D 风机场景。 ? 预览效果 首页: 1. 世界地图效果 ? 2. 中国地图效果 ?...) { globalAnim[i] && globalAnim[i].pause() globalAnim[i] = null } // 清除对应的 3D...当我们的 2D 图纸里面包含 3D 背景的情况下，需要判断是否已经存在了 3D 的实例，如果存在不需要再次创建。有兴趣可以了解一下 webGL 的应用内存泄漏问题。...当进入两个 3D 场景场景的时候，我们需要一个开场动画，如开头效果 gif 图一样。
最近刚好项目中需要用到 3D 热力图的效果展示。网上搜了相关资料，发现大多数是 2D 效果或者伪 3D 的，而 3D 粒子效果对于性能上的体验不是很好，于是取巧写了个 3D 热力图的效果 。...传统的数据中心汇报方式枯燥单调、真实感不强，互动性差等，借助于 3D 热力图的可视化呈现方式，机房运维管理人员可大大提高工作效率及降低工作失误的可能性。...整体思路 在场景反序列化之后，设置热力图的初始参数，初始化后得到的热力图模型添加进场景中，模拟 3D 热力图效果，最后再添加扫描、换肤、温度提示等功能。...设置其相关信息，将该图元添加进 3D 场景中。这样一个简单的 3D 热力图就算完成了。...因为在 3D 场景中，我不好判断当前鼠标坐标（x,y,z），所以我将 tip 面板放在了 2D 图纸上，将 2D 图纸嵌在 3D 场景的上层。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
