前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求...false，图标在3D下是否自动朝向眼睛的方向 t3: [0, 16, 0],//默认值为undefined，图标在3D下的偏移，格式为[x,y,z] width.../设置图元在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...模型，并进行位置的摆放，这里采用的是将整个场景的模型以及模型的摆放放在一个 JSON 格式的文件中，然后通过将这个 JSON 文件反序列化到数据容器 DataModel 中，即可呈现 JSON 文件中的场景内容以及模型的摆放位置...场景动画 因为整个场景中的元素都是从此 JSON 文件中反序列化出来的，此 JSON 文件中保存的只有场景的内容，并不包括动画以及交互，对于不同部分的元素的动画也不同，我们需要单独将这些元素取出来，这里通过
上个月我们发布了一篇文章《基于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...，里层有一个节点，外层一个透明的节点，底部一个 3d 的文字显示当前的百分比。...，'shape3d':cylinderModel 这个样式的设置，首先，shape3d 属性指定显示为 3d 模型的图标效果，cylinderModel 是用 HT 自定义的一个 3d 模型，可参考 HT...最后是 3d 文字，呈现 3d 文字需要一个 json 格式的 typeface 字体，然后通过 ht.Default.loadFontFace 来加载 json 格式的字体到内存中，详情请参考 HT
节点，通过设置这个节点的 style 样式属性来控制节点的显示方式，其中将“shape3d”设置为“sphere”即可将 ht.Node 六面体变成 3D 球体模型，再设置“shape3d”属性为前面定义的随机颜色...，s3 是 HT 封装的设置 3D 节点大小的 setSize3d 函数的简写，最后将这个节点添加进数据模型 dataModel 中： var createNode = function(dm) {//...根据 xy 平面的曲线，环绕一周形成的 3D 环形模型，将其命名为‘custom’： ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线，环绕一周形成3D模型。...();//获取图形上连接的目标节点 pipeline.s('mat', createMatrix(node1.p3(), node2.p3(), 20));//3d整体图形矩阵变化 }; 最神秘的是如何能做出让两个节点...3D 模型“custom” ，并将“layoutable”属性设置为“false”阻止图元参与布局，并将点之间的连线通过edge.a('pipeline', node)重新刷新，并添加进数据模型 dataModel
我是用 HT 做的整个例子，首先创建 3D 场景，HT 有 3D 组件，可以直接通过 new ht.graph3d.Graph3dView 3D 组件来创建一个实例，然后通过 getView() 函数获取组件的底层...= new ht.graph3d.Graph3dView(dm);//3D 组件 g3d.addToDOM();//将 3D 组件的底层 div 添加到 body 中 HT 的组件一般都会嵌入 BorderPane...data.r3(0, (data.r3()[1]+Math.PI/12), 0);//r3 为 3d 中的旋转，这里 y 轴在原来的基础上再旋转 Math.PI/12 角度 }else if(tag...== 1){//做的判断是根据3d的事件来处理的，等下会提 dm.getDataByTag('light').s({//通过getDataByTag获取节点，设置节点的style样式...内容显示的图标为form表单上点击的交通灯的按钮的图标 } 最后就是点击事件了，一个是点击 3D 中的交通灯后出现交通灯控制的 form 表单，还有一个就是点击 form 表单上的“修改状态”中的图标事件
本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。...整理思路： 场景部分： 这里把 3D 当做背景嵌套在 2D 场景中。 这样在初始化图纸的时候，直接反序列化 2D 图纸即可。...事件部分： 2D 图纸中有很多的按钮，通过它们来控制 3D 中的一些动画。 ...实现思路是在反序列化图纸的时候把 2D、3D 的 模型和视图对象挂载到 window 上，这样在不同的场景中都可以获取到相应的数据模型。...具体代码实现： 场景搭建：上面说了，我们把 3D 当做背景嵌套在 2D 中，所以只需要序列化 2D 即可，里面需要进行背景判断的部分代码。
/common/chartPane.js'; import graph3dView from './3d/index'; 我们将页面上的每个部分分开来放在不同的 js 文件中，就是上面加载的 js export...3d 部分 graph3dView、双击货柜或货物才会出现的 shelfPane、以及出现在右下角的图表 chartPane。...from './3d/index'; ?...从这个 3d 场景中可以看到，我们需要“地板”、“墙面”、“货架”、“叉车”、“货物”以及 3d 场景。...在 3d 文件夹下的 index.js 中，我们从文件夹中导入所有需要的接口： import {//这里导入的都是一些基础数据 sceneWidth, sceneHeight, sceneTall,
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台...Node.js自然没那么简单了，我采用了Socket.io通信框架，Socket.io让长连接通信变得无比简单，和Web Workers的通信几乎一样的容易了，Socket.io的用法下图一目了然： ?...插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储。.../util.js").reloadModel; 这样的方式得到该函数进行调用，细节可以参考 http://nodejs.org/api/modules.html 的章节 3、这个例子是有缺陷的，以下视频播放过程你会发现...另一个页面无法操作的原因。
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合...所以这时候结构清晰的3D树的需求就来了，那么这个3D树具体长成啥样呢，我们来一起目睹下~ ? 要实现这样的效果，该从何下手呢？接下来我们就将这个问题拆解成若干个小问题来解决。 1....在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局...布局后的布局器代码，你会发现和2D的布局器代码就差一个坐标系的的计算，其他的都一样，看下在3D上布局的效果： ?
本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景。...2.作为宇航局、航空航天相关研究机构的驾驶舱，在 3D 可视化界面中对行星相对位置、星体状态、星体气象、星体地形有一个直观快速的了解，在宇宙空间探索越来越成功的当下，在数据传输技术得到速度和质量上的突破后...，点位周边的等高线在左侧自动生成一个 3D 的地形和闪烁的点位示意，并与右侧的检测点位一一对应。...点选右侧对应检测点，会触发右侧点的缩放动画，同时左侧对应的 3D 点位也会同步变化，其它的点则调用 setAnimation(null) //......库，矢量平面信息与 3D 对象进行关联，并采用 3D 拓扑可视化呈现，相对位置清晰直观，3D 地形与等高线图对应，海拔高度和相互遮挡关系都可以准确把握。
我们来看看如何操作这个 3d 交互模型，可以直接滑动“Rotation”的滑动条，你会看到 3d 和左下角的 2d 上的图元都会旋转，接着点击“Axis”中的任意一个值，然后点击“Animate”，你会看到中间这个图元会旋转...左下角的是整个 3d 场景内的俯视图，这样我们可以非常直观地看清图元的移动方向和位置。 可能你会好奇这个是怎么俯视图是怎么放上去的？如果 3d 中的图元变化，这个俯视图中的图元也会跟着变化么？...如何把右上角的 form 表单和左下角的视图又是怎么放的？如何只移动 3d 二把这两个固定在这边？...好了，基础就是先布局，布 3d 场景，HT 在提供方法方面算是非常细致的了，平时我们生成网格可能就要花费一段时间，又是基础代码，新手开发人员都能很快上手呢~短短几行代码就能创建一个 3d 场景，简直太快...，这个例子中，form 表单、2d 组件和3d 组件都互不依附，所以我们直接将这三个都添加进 body 中即可，还有一点值得注意的，所有 HT 组件的最根层都是一个 div，是通过组件的 getView
，如果不存在，则返回-1 } return true; }); 第三个部分，右侧 3d 场景，利用的是 HT 的三维组件 ht.graph3d.Graph3dView，然后在 3d 场景上添加两个节点...，作为对照： //创建两个节点放到 3d 场景中 var node = new ht.Node(); node.s3(30, 30, 30);//设置三维大小 node.p3(-30, 15, 0);/...添加进 3d 场景的数据容器中 var node = new ht.Node(); node.s3(30, 30, 30); node.p3(30, 15, 0);...);//设置网格线颜色 整个场景创建完毕，接下来就是将 listView 中显示的 icon 图标拖拽到 3d 中的节点上，作为贴图。...if(lastFaceInfo){//鼠标未松开的情况下，贴图显示旧值 //data.face 默认值为front，图标在3D下的朝向，可取值left|right|top
最近上线了的基于HTML5的燃气3D培训仿真系统，以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的，OSG引擎性能和渲染效果各方面还是不错的，但因为这次新产品需求要求能运行多移动终端...系统最终采用HT for Web的3D框架实现，项目中的程序员也很高兴有这样的机会终于摆脱维护MFC老系统的宿命，虽然大家都只有C++的开发经验，对HTML/CSS/JS并不熟悉，但毕竟HT for Web...让我感觉比较爽的是控制3D图元部分，以前不同的设备类型得体力活的写一堆代码，才能好不容易的实现些旋转移动等操作控制，界面控件和3D模型之间的数据同步也得费不少劲，现在用js这种动态语言真是非常灵活，界面都可以非常方面的动态生成...，加上HT for Web统一的数据模型自动就能处理好3D图元与控件之间的数据绑定和联动，我干起活来就像搭积木一样轻松，脑子里想的就是业务功能和业务数据，不用再去折腾不同组件如何同步这些数据，控件也无需做什么特殊扩展...当然目前项目还仅仅是初版移植，业务功能上还未有太大创新，但就目前的进度我们已经体会到HTML5的开发快速性，js语言也不是想象中那么弱，团队控制好一定的编码规范后js的灵活性带来的开发进度提高还是非常显著
在很多行业中都有着广泛的应用。 最近刚好项目中需要用到 3D 热力图的效果展示。...网上搜了相关资料，发现大多数是 2D 效果或者伪 3D 的，而 3D 粒子效果对于性能上的体验不是很好，于是取巧写了个 3D 热力图的效果 。...() 来生成热力图的 3D 图元。...设置其相关信息，将该图元添加进 3D 场景中。这样一个简单的 3D 热力图就算完成了。...因为在 3D 场景中，我不好判断当前鼠标坐标（x,y,z），所以我将 tip 面板放在了 2D 图纸上，将 2D 图纸嵌在 3D 场景的上层。
对于 3D 机房来说，监控已经不是什么难事，不同的人有不同的做法，今天试着用 HT 写了一个基于 HTML5 的机房，发现果然 HT 简单好用。...本例是将灯光、雾化以及 eye 的最大最小距离等等功能在 3D 机房中进行的一个综合性的例子。接下来我将对这个例子的实现进行解析，算是自己对这个例子的一个总结吧。...工具条类中，下部分是 3D 部分 ht.graph3d.Graph3dView 组件，将页面中的两个部分通过下面的方式添加进 BorderPane 组件中，并将 BorderPane 添加进 body...首先，对 3d 组件添加了过滤函数，对双击事件的元素过滤： ?...这个 3d 机房的例子非常有代表性，性能也展示得很全面，觉得有必要拿出来讲一下，希望能对你们有一定的帮助~
需要注意的是，本次项目是使用 Hightopo 的 HT for Web 产品来搭建的。...场区分布页面又包括两个不同的 3D 场景，分别是陆地风机场和海上风机场。点击两个 3D 风机场最终都会进入到 3D 风机场景。 ? 预览效果 首页: 1. 世界地图效果 ? 2. 中国地图效果 ?...3D 图纸 ht.Default.removeHTML(g3d) gv.addToDOM() ht.Default.xhrLoad(`displays/HT-project_2019...这里需要注意的是， 执行 stop 之后，会调用一次 finishFunc 回调函数。 当我们的 2D 图纸里面包含 3D 背景的情况下，需要判断是否已经存在了 3D 的实例，如果存在不需要再次创建。...有兴趣可以了解一下 webGL 的应用内存泄漏问题。 当进入两个 3D 场景场景的时候，我们需要一个开场动画，如开头效果 gif 图一样。
之前注意到的一个例子，但是一直没有沉下心来看这个例子到底有什么优点，总觉得就是一个 list 列表，也不知道右边的 3d 场景放两个节点是要干嘛，今天突然想起来就仔细地看了一下这个例子的代码，实际操作中应该还是有用处的...，如果不存在，则返回-1 } return true; }); 第三个部分，右侧 3d 场景，利用的是 HT 的三维组件 ht.graph3d.Graph3dView，然后在 3d 场景上添加两个节点...添加进 3d 场景的数据容器中 var node = new ht.Node(); node.s3(30, 30, 30); node.p3(30, 15, 0);...);//设置网格线颜色 整个场景创建完毕，接下来就是将 listView 中显示的 icon 图标拖拽到 3d 中的节点上，作为贴图。...if(lastFaceInfo){//鼠标未松开的情况下，贴图显示旧值 //data.face 默认值为front，图标在3D下的朝向，可取值left|right|top
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
