《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管...HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎，但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术，只需要掌握基本的 3D 坐标系和相机 Camera.../core/3d/ht-3d-guide.html。...初学者即使只使用 HT for Web 开发 3D 应用的，我们一般也会建议先阅读一遍《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》文章，因为 HT 的所有组件采用的都是统一的 DataModel... 数据模型，采用相同的 MVP 设计模型，类 Flux 的单向流设计理念，所以只要掌握了拓扑图篇的介绍的几个技术点后，你基本就掌握了所有 HT 组件的使用方式。
http://www.hightopo.com/demo/pipeline/index.html 《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助...3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果，例如 http://www.hightopo.com/guide/guide/core/3d/examples/example..._3droom.html 这个 3D 电信机房监控例子整个都是通过 HT 提供的 API 构建而成： 不过这个例子中的模型都比较规矩，也就消防栓由一个球 + 圆通构成，其他图形通过 HT 提供的基本 Node...系统中构建 2D 不规则多边形时采用的 Points 和 Segments 两个数组参数搞定， Points 和 Segments 的意义可参考 《HT for Web 形状手册》： 可生成不规则的 3D...弹力拓扑图例子，很多人已经觉得挺酷炫了，但我一直对这呆板规矩的管道连线很不爽，于是突发奇想搞了个像狗骨头似的两头粗中间细的连线效果，整个 3D 拓扑图例子一下子高大上了许多： http://www.hightopo.com
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管...HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎，但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术，只需要掌握基本的 3D 坐标系和相机 Camera...初学者即使只使用 HT for Web 开发 3D 应用的，我们一般也会建议先阅读一遍《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》文章，因为 HT 的所有组件采用的都是统一的 DataModel... 数据模型，采用相同的 MVP 设计模型，类 Flux 的单向流设计理念，所以只要掌握了拓扑图篇的介绍的几个技术点后，你基本就掌握了所有 HT 组件的使用方式。...好吧，我就列举些采用 HT 的纯 API 方式构建的 3D 例子供参考： A星寻路算法 3D 模拟：http://www.hightopo.com/demo/astar/astar.html 3D 汉诺塔算法演示
前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求.../设置图元在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 场景中一些必要的元素，比如墙面，地板，门，空调以及所有的机柜的生成和排放位置，还有非常重要的交互部分...但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。
http://www.hightopo.com/demo/Plucker/ 代码实现 创建场景 首先是创建一个三维场景（https://hightopo.com/guide/guide/core/3d...g3d.addToDOM();// 将三维组件添加到 body 体中 上面代码中出现的 addToDOM 方法是将调用此方法的组件通过 getView 方法获取到此组件的底层 div，随后将此 div...HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的HT组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM...但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。...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...默认仅对未选中图元进行布局，如果构造函数参数为 Graph3dView 时，则视图组件的 isMovable 和 isVisible 函数将影响图元是否可布局， 图元 style 上的 layoutable...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模型。
在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了一些常规的3D模型，但是对于那些比较复杂的模型，比如汽车、人物等模型就无能为力了，那再项目中需要用到这样的模型该肿么办呢？...在《HT图形组件设计之道（四）》一文中有提及HT for Web引入obj文件的介绍，在这里我就不做重复介绍了，我们先来看看今天作为演示的Demo模型长什么样： http://www.hightopo.com...模型后，我们马上创建了一个3D图元，并将其添加到了dataModel容器中，这时我们需要一个3D拓扑来显示这个3D图元，具体的创建代码如下： var dataModel = new ht.DataModel...到这里，模型就算完成了，接下来要做的就是让螺旋桨动起来，和2D叶轮旋转类似，在3D模型上也可以做数据绑定，要想让螺旋桨旋转起来，我们就需要设置螺旋桨的rotation属性，和3D上的图元不同的是，设置3D...图元的rotation属性需要设置一个数组，定义3D上三个方向的旋转值。
在现在前端圈大行其道的 React 和 Vue 中，可复用的组件可能是他们大受欢迎的原因之一， 在 HT 的产品中也有组件的概念，不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的...， 也就是说如果你有过使用 Canvas 的开发经验你就可以来封装自己的组件。...下面我以一个进度环为例，来探究一下如何使用ht.js封装出一个拓扑组件。 效果图 ?...代码实现 前置知识 自定义组件 除了HT预定义的组件类型外，用户还可以自定义扩展类型，自定义有两种方式： 直接将type值设置成绘制函数：function(g, rect, comp, data...绘制组件 在绘制组件的过程中，我们需要把一些边界条件和特殊情况考虑到，来保持组件的扩展性和稳定性 下面就是一些我的心得 在做了 g 操作的头尾分别使用 save 和 restore ，以此来保障 g
我是用 HT 做的整个例子，首先创建 3D 场景，HT 有 3D 组件，可以直接通过 new ht.graph3d.Graph3dView 3D 组件来创建一个实例，然后通过 getView() 函数获取组件的底层...组件 g3d.addToDOM();//将 3D 组件的底层 div 添加到 body 中 HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的...HT预定义的容器组件，则HT的容器会自动递归调用孩子组件 invalidate 函数通知更新。...但如果父容器是原生的 html 元素， 则HT组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。...为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有 addToDOM 函数，其实现逻辑如下，其中 iv 是 invalidate 的简写： addToDOM = function(){
本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。...整理思路： 场景部分： 这里把 3D 当做背景嵌套在 2D 场景中。 这样在初始化图纸的时候，直接反序列化 2D 图纸即可。...事件部分： 2D 图纸中有很多的按钮，通过它们来控制 3D 中的一些动画。 ...实现思路是在反序列化图纸的时候把 2D、3D 的 模型和视图对象挂载到 window 上，这样在不同的场景中都可以获取到相应的数据模型。...环境部分： 风速、风向、变桨角度这些会在 2D、3D 中所表现，所以可以把他们放到数据池里面，方便管理。
首先建立一个视图组件（这里我们以 ht.graph.GraphView 为例，其余组件基本与之相同），通过调用组件的 enableToolTip() 方法可以启用 ToolTip 功能，之后创建一个测试用的...使用 HT UI 的 Popover 插件 UI 库是一款功能强大的界面组件库，基于 HT 核心包的优秀框架和 HTML5 先进的 Canvas 机制，具有易上手、高性能、易扩展、组件丰富、跨平台等特点...在这个例子中，添加了三个 UI 中的 Button 组件，并分别设置了三种不同的 Popover。...与前两种使用 UI 自带的组件不同，这里我们自定义了一个 ht.ui.EchartView 组件实现 Echarts 的显示功能，UI 库提供了自定义组件的功能，像上图中的 Button 也可以去自己定义...但 HT 除了提供 ToolTip 的基本功能，还给予了扩展的空间，可以显示一个图表，也可以显示一个 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树的需求就来了，那么这个3D树具体长成啥样呢，我们来一起目睹下~ ? 要实现这样的效果，该从何下手呢？接下来我们就将这个问题拆解成若干个小问题来解决。 1....在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局...也不需要太大的改造，我们只需要修改下布局器并且将2D拓扑组件改成3D拓扑组件就可以了。
本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景。...Solar System 这套系统主要用于两种场景： 1.作为科研成果、新发现的载体，做 3D 太空数据可视化呈现，用于向普通民众科普太阳系的构成、各行星组织结构等知识，可置于博物馆大屏、学校大屏，...2.作为宇航局、航空航天相关研究机构的驾驶舱，在 3D 可视化界面中对行星相对位置、星体状态、星体气象、星体地形有一个直观快速的了解，在宇宙空间探索越来越成功的当下，在数据传输技术得到速度和质量上的突破后...点选右侧对应检测点，会触发右侧点的缩放动画，同时左侧对应的 3D 点位也会同步变化，其它的点则调用 setAnimation(null) //......对象进行关联，并采用 3D 拓扑可视化呈现，相对位置清晰直观，3D 地形与等高线图对应，海拔高度和相互遮挡关系都可以准确把握。
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台
HT for Web的HTML5树组件有延迟加载的功能，这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用，需要获取数据的时候再向服务器发起请求，这样可减轻服务器压力，同时也减少了浏览器的等待时间...http://www.hightopo.com/guide/readme.html 进入正题，今天用来做演示的Demo是，客户端请求服务器读取系统文件目录结构，通过HT for Web的HTML5树组件显示系统文件目录结构...整体的思路是这样子的，当然这离我们要实现的树组件的延迟加载技术还有些差距，那么，HT for Web的HTML5树组件的延迟加载技术是怎么实现的呢？不要着急，马上开始探讨。...= createData(file, parent); n.a('loaded', true); dm.add(n); }); } 如此，HT for Web的HTML5...树组件延迟加载技术就设计完成了，我在服务器的控制台打印出请求路径，看看这个延迟加载是不是真的，如下图： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
