2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的节奏...3D呈现固然比2D方式更直观，但如果摆放图元布局却比2D麻烦，毕竟增加了一个维度，手工布局不如以前2D手工操作方便，因此3D的自动布局功能比2D凸显其重要性。...} }); reload(); } 以下是后台Work.js的代码，通过importScripts("ht.js...importScripts("ht.js"); importScripts("ht-forcelayout.js"); importScripts("util.js"); ht = self.ht;...下篇《3D拓扑自动布局之Node.js篇》我们再将算法移到Node.js端玩
上篇将3D弹力布局的算法运行在Web Workers后台，这篇我们将进一步折腾，将算法运行到真正的后台：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能...io = require('socket.io').listen(8036); ht = require('ht.js').ht; require("ht-forcelayout.js"); reloadModel...一样，跑在Node.js的类库肯定不能操作window和document之类的页面特定元素对象，从这点说很多考虑不周全的类库会把自己限制死只能在页面主线程运行，这点HT for Web考虑得很周到，不仅ht.js...包括所有ht-forcelayout.js插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的节奏...3D呈现固然比2D方式更直观，但如果摆放图元布局却比2D麻烦，毕竟增加了一个维度，手工布局不如以前2D手工操作方便，因此3D的自动布局功能比2D凸显其重要性。... reload(); } 以下是后台Work.js的代码，通过importScripts("ht.js...32 33 34 35 importScripts( "ht.js...下篇《3D拓扑自动布局之Node.js篇》我们再将算法移到Node.js端玩 http://v.youku.com/v_show/id_XNjc1MjYzODg4.html
上篇将3D弹力布局的算法运行在Web Workers后台，这篇我们将进一步折腾，将算法运行到真正的后台：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能...34 io = require( 'socket.io' ).listen(8036); ht = require( 'ht.js...一样，跑在Node.js的类库肯定不能操作window和document之类的页面特定元素对象，从这点说很多考虑不周全的类库会把自己限制死只能在页面主线程运行，这点HT for Web考虑得很周到，不仅ht.js...包括所有ht-forcelayout.js插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台...io = require('socket.io').listen(8036); ht = require('ht.js').ht; require("ht-forcelayout.js"); reloadModel...一样，跑在Node.js的类库肯定不能操作window和document之类的页面特定元素对象，从这点说很多考虑不周全的类库会把自己限制死只能在页面主线程运行，这点HT for Web考虑得很周到，不仅ht.js...包括所有ht-forcelayout.js插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储
上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用ht.js 快速3D 建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。 ...上图主要以 2/3D联动的方式，依次展示了在面对突发情况下，城市应急救援的响应过程。...至于右边的2D 步骤显示面板的联动，因为本demo 采用的是ht.js 来实现的，ht.DataModel作为承载Data 数据的模型，管理着Data 数据的增删以及事件派发，右侧的2D 面板里的步骤也是一个个...Data ，我们只要对其进行数据绑定，在动画执行到某一时刻，通过动态修数据来控制图元的透明度等样式就可以实现2/3D 联动了。...常规的2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D 可视化更能直观的、有效的反馈信息。当然，3D可视化离不开一款强大的图形引擎。
上个月我们发布了一篇文章《基于 HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用 ht.js 快速 3D 建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。 ...上图主要以 2/3D 联动的方式，依次展示了在面对突发情况下，城市应急救援的响应过程。...至于右边的 2D 步骤显示面板的联动，因为本 demo 采用的是 ht.js 来实现的， ht.DataModel 作为承载 Data 数据的模型，管理着 Data 数据的增删以及事件派发，右侧的...常规的 2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D 可视化更能直观的、有效的反馈信息。当然，3D 可视化离不开一款强大的图形引擎。...3D 漫游可以提供很好的用户交互体验，所以本 demo 也展示了这一功能。 借助于 HT，漫游功能的实现只要几行代码就可以实现了。
HT for Web 还有提供了一套一套强大的基于 WebGL 技术的 3D 图形引擎，独特的 WebGL 层抽象，将 Model – View – Presenter ( MVP ) 的设计模型延伸应用到了...3D 图形领域。...使用 HT for Web 您可更关注于业务逻辑功能，不必将精力投入复杂 3D 渲染和数学等非业务核心的技术细节。...整体是一个 2D 的面板，那么要引入我们必须需要用到的 HT 核心库：ht.js 。 首先，要创建数据容器和拓扑图形组件。...好了，如果你们还想改变其 HT 系统默认属性，可以通过全局的 htconfig 变量名指定，HT 系统只在初始化时读取 htconfig 的配置信息， 因此该属性必须在引入 ht.js 包之前初始化好，
使用弹力布局功能需要在引入 ht.js 核心库之后，再引入一个 ht-forcelayout.js 的弹力布局插件库，因为还用到了 form 表单，所以要引入 ht-form.js 的表单插件库： <script src="../.....var ran = Math.random() * colorLen; return colorList[Math.floor(ran)];//随机6种颜色 }; 接着创建弹力球，简单生成一个 <em>3D</em>...，s3 是 HT 封装的设置 <em>3D</em> 节点大小的 setSize3d 函数的简写，最后将这个节点添加进数据模型 dataModel 中： var createNode = function(dm) {//...环形模型，将其命名为‘custom’： ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线，环绕一周形成<em>3D</em>模型。
接下来我的任务就是帮助你们也能轻松地实现这个效果，HT 将弹力布局的 js 文件放到了一个独立的文件中，在引用这个 js 文件需要先引入 ht.js，因为我们还做了一个 form 表单，所以也要引入 form.../guide/lib/core/ht.js"> <script src="../.....var ran = Math.random() * colorLen; return colorList[Math.floor(ran)];//随机6种颜色 }; 接着创建弹力球，简单生成一个 <em>3D</em>...现在效果图上出现的还有各个弹力球之间的连线，这个连线我们一看就觉得很不一般，也是通过构造一个一个节点，这个节点是通过 HT for Web 建模手册 setShape3dModel函数自定义的一个 <em>3D</em>...模型，将其命名为‘custom’： ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线，环绕一周形成<em>3D</em>模型。
www.hightopo.com/demo/pipeline/index.html 接下来我的任务就是帮助你们也能轻松地实现这个效果，HT 将弹力布局的 js 文件放到了一个独立的文件中，在引用这个 js 文件需要先引入 ht.js.../guide/lib/core/ht.js"> <script src="../.....var ran = Math.random() * colorLen; return colorList[Math.floor(ran)];//随机6种颜色 }; 接着创建弹力球，简单生成一个 <em>3D</em>...现在效果图上出现的还有各个弹力球之间的连线，这个连线我们一看就觉得很不一般，也是通过构造一个一个节点，这个节点是通过 HT for Web 建模手册 setShape3dModel函数自定义的一个 <em>3D</em>...模型，将其命名为‘custom’： ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线，环绕一周形成<em>3D</em>模型。
这是我要压缩的文件列表，把响应的资源文件存放到对应的文件夹下，然后在 loadorder 文件中标明资源加载的顺序，loadorder 文件内容如下： 'js/ht.js', 'js/ht-obj.js...模型数据与 HT 3D 拓扑应用的结合，在 .zip 文件中的 obj 目录就是存放 3D 模型数据，在文件读取中，将 3D 模型数据以文本对形势读取出来存放到变量中，再将数据传递到 init 函数中...，通过 ht.Default.parseObj() 方法将 3D 模型数据加载到 HT 中。...拓扑、3D 模型引入和引用 3D 模型创建拓扑节点的代码。...HT 3D 拓扑的应用可以参考《3D拓扑自动布局之Node.js篇》。
最近搞个游戏遇到最短路径的常规游戏问题，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com/bgrins/javascript-astar...www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D...http://www.hightopo.com/demo/astar/astar.html 实现代码比较容易一百多行，不过算法核心在astar.js了，界面核心在ht.js里面了，我只需要构建网格信息...checkBox: { label: 'Allow Diagonal' } } ], [0.1, 0.1]); } 自从iOS8支持WebGL后在移动终端上测试3D...iOS系统下呈现和算法都挺流畅，http://v.youku.com/v_show/id_XODMzOTU1Njcy.html，当然这个小例子数据量也不大，本质其实还是2D的最短路径算法，并非真正意义的3D
最近搞个游戏遇到最短路径的常规游戏问题，正巧看到老同事写的3D机房最短路径巡线文章，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com...www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D...实现代码比较容易一百多行，不过算法核心在astar.js了，界面核心在ht.js里面了，我只需要构建网格信息，只需监听用户点击，然后调用astar.js进行最短路径计算，将结果通过动画的方式呈现出走动的过程...label: 'Allow Diagonal' } } ], [0.1, 0.1]); } 只从iOS8支持WebGL后在移动终端上测试3D...iOS系统下呈现和算法都挺流畅，http://v.youku.com/v_show/id_XODMzOTU1Njcy.html，当然这个小例子数据量也不大，本质其实还是2D的最短路径算法，并非真正意义的3D
http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，...www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D...实现代码比较容易一百多行，不过算法核心在astar.js了，界面核心在ht.js里面了，我只需要构建网格信息，只需监听用户点击，然后调用astar.js进行最短路径计算，将结果通过动画的方式呈现出走动的过程...label: 'Allow Diagonal' } } ], [0.1, 0.1]); } 只从iOS8支持WebGL后在移动终端上测试3D...iOS系统下呈现和算法都挺流畅，http://v.youku.com/v_show/id_XODMzOTU1Njcy.html，当然这个小例子数据量也不大，本质其实还是2D的最短路径算法，并非真正意义的3D
它不仅可以整合现有模型，还提供了全功能 Demo UI 体验，让你轻松实现文本到 3D、图像到 3D、3D 到 3D 文字编辑和材质重构等多种操作！...无需繁琐的训练，MVEdit 就能够快速生成高质量的3D物体，并提供全功能的UI界面，包含了诸如text to 3D、image to 3D、3D to 3D文字编辑和材质重构等功能。...• 多功能 demo UI：提供包括文本到 3D、图像到 3D、3D 到 3D 文字编辑和材质重构等全功能演示界面。 • 快速推理：仅需 2-5 分钟的推理时间，在质量和速度之间达到了出色的平衡。...• 通用性和灵活性：能够处理多种 3D 任务，如不同类型的车辆、篮球运动员、机器人等的图像到 3D 转换和文本引导的 3D 到 3D 编辑。 使用方法 1....应用场景 • 3D 内容创作：为艺术家和设计师提供更便捷的工具，创造出独特的 3D 作品。 • 游戏开发：快速生成高质量的 3D 资产，提升游戏的视觉效果。
有了前面2章内容，大家应该对CSS 3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。...今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。...用了绝对定位position: absolute6个子元素会重叠在一起了 我们先使其整个容易元素在3D空间呈现(transform-style: preserve-3d) 定宽定高元素水平垂直居中 {...所以，我们这里的空间相册，只需要每个元素沿着 Y 轴的 3D 旋转，间隔rotateY(60deg)即可形成一个圆环 动画 .photo { ...
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
