前言 科技改变生活，科技的发展带来了生活方式的巨大改变。随着通信技术的不断演进，5G 技术应运而生，随时随地万物互联的时代已经来临。...本文将以大家熟悉的 CPU 为例，介绍以 HT 为基础，应用 JavaScript，WebGL 和 HTML5 技术开发的 CPU 监控系统。...动画采用圆的参数方程计算 eye 的 x 值和 z 值，完成 180 度的旋转。...手机传感器数据 HTML5 提供了几个 DOM 事件来获得移动端方向及运动的信息，deviceorientation 提供设备的物理方向信息；devicemotion 提供设备的加速度信息。...如果你对工业互联网感兴趣，可以从 https://www.hightopo.com/demos/index.html 获取更多案例及效果。
前言 垃圾分类，一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。...从国内外各城市对生活垃圾分类的方法来看，大致都是根据垃圾的成分、产生量，结合本地垃圾的资源利用和处理方式来进行分类的。到2019年6月25日，生活垃圾分类制度将入法。...，学习它的运动模式和动作细节，对每个结构和部位的动画进行步骤的排序和构思。...这其中最复杂且细微的步骤要数液压杆的运动了，为了让动画看起来更加真实，我除了将手臂单独运动的过程中加入了延时执行下一段动画以体现机器运动的特点外，也把液压杆的部分也做了动画，如果不做处理，那么机械臂在上下移动的时候就会有不科学的效果出现...医疗站（https://www.cnblogs.com/htdaydayup/p/11558748.html） 在工业物联网从婴儿走到青年的成熟道路上，一定会有更多的潜力和挑战在等着我们，等待我们去开发
前言 3D 场景中的面不只有水平面这一个，空间是由无数个面组成的，所以我们有可能会在任意一个面上放置物体，而空间中的面如何确定呢？我们知道，空间中的面可以由一个点和一条法线组成。...创建场景 dm = new ht.DataModel();//数据模型（http://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html...g3d = new ht.graph3d.Graph3dView(dm);//3D 场景组件（http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html...palette = new ht.widget.Palette();//面板组件（http://hightopo.com/guide/guide/plugin/palette/ht-palette-guide.html...但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。
，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的demo，也没有解释。。。...本文例子：http://www.hightopo.cn/demo/3drotate/3d-rotate.html 首先让我们来看下这个案例： ?...左下角的是整个3d场景内的俯视图，这样我们可以非常直观地看清图元的移动方向和位置。 可能你会好奇这个是怎么俯视图是怎么放上去的？如果3d中的图元变化，这个俯视图中的图元也会跟着变化么？...如何把右上角的form表单和左下角的视图又是怎么放的？如何只移动3d二把这两个固定在这边？...所以我们如果要添加进HTML标签中，肯定也要是HTML标签才行。
前言 垃圾分类，一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。...从国内外各城市对生活垃圾分类的方法来看，大致都是根据垃圾的成分、产生量，结合本地垃圾的资源利用和处理方式来进行分类的。到2019年6月25日，生活垃圾分类制度将入法。...好了，准备工作做好了，下面来实现动画部分，除了了解 垃圾分类 的方式外我还参考了网上很多机械臂的视频，学习它的运动模式和动作细节，对每个结构和部位的动画进行步骤的排序和构思。...这其中最复杂且细微的步骤要数液压杆的运动了，为了让动画看起来更加真实，我除了将手臂单独运动的过程中加入了延时执行下一段动画以体现机器运动的特点外，也把液压杆的部分也做了动画，如果不做处理，那么机械臂在上下移动的时候就会有不科学的效果出现.../htdaydayup/p/11558748.html） ?
前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求...http://hightopo.com/demo/3DRoom/index.html 这个 3D 机房的 Demo 做的还不错，比较美观，基础的交互也都满足，接下来看看怎么实现。...代码生成 定义类 首先从 index.html 中调用的 js 路径顺序一个一个打开对应的 js，server.js 中自定义了一个 Editor.Server 类由 HT 封装的 ht.Default.def...、html元素或者为null image: { icon: '....但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。
Adobe的Flex和微软的Silverlight/WPF本被业界寄予厚望，没想这哥俩如匆匆过客被老东家抛弃了，但他们还是推动了MVP和MVVM设计模式的普及，如今HTML5领域的KnockoutJS、...属性除了AffectsRenderer和AffectsMeasure还有多少要考虑的因素，上段提到的一堆新兴的HTML5界MV*框架，相信更少有人敢说熟练精通，你可能在某个项目中用了好几个月甚至一两年，...很多情况下内存泄露不是长期的运行也很难发觉，但对于HT的Graph3dView这种基于WebGL的3D组件问题尤为明显，因为大部分浏览器对单个页面能运行的WebGL上下文是有限制的，例如PC上的chrome...因此由以上视频你会发现在chrome下当点击到第16个包含Graph3dView的页签后就出现了”Too many active WebGL contexts....http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 总结下本篇的两个观点： 1、再好的封装设计也需要使用者掌握基本的架构脉络
www.hightopo.com/demo/Plucker/ 代码实现 创建场景 首先是创建一个三维场景（https://hightopo.com/guide/guide/core/3d/ht-3d-guide.html...），通过将场景中的元素添加到保存数据的数据容器（https://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html）中即可：...但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。...获取到这些需要做动画的节点后，这里我用的是动画插件 setAnimation (https://hightopo.com/guide/guide/plugin/animation/ht-animation-guide.html...前面代码中出现的 form 表单(https://hightopo.com/guide/guide/plugin/form/ht-form-guide.html)，是通过 createForm 方法创建的
上篇(http://www.hightopo.com/blog/194.html)我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例后续文章还会继续以便大家掌握更多的矢量应用场景...Adobe的Flex和微软的Silverlight/WPF本被业界寄予厚望，没想这哥俩如匆匆过客被老东家抛弃了，但他们还是推动了MVP和MVVM设计模式的普及，如今HTML5领域的KnockoutJS、...属性除了AffectsRenderer和AffectsMeasure还有多少要考虑的因素，上段提到的一堆新兴的HTML5界MV*框架，相信更少有人敢说熟练精通，你可能在某个项目中用了好几个月甚至一两年，...很多情况下内存泄露不是长期的运行也很难发觉，但对于HT的Graph3dView这种基于WebGL的3D组件问题尤为明显，因为大部分浏览器对单个页面能运行的WebGL上下文是有限制的，例如PC上的chrome...many active WebGL contexts.
最近搞个游戏遇到最短路径的常规游戏问题，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com/bgrins/javascript-astar... 的javascript实现，其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷...http://www.hightopo.com/demo/astar/astar.html 实现代码比较容易一百多行，不过算法核心在astar.js了，界面核心在ht.js里面了，我只需要构建网格信息... 'diagonal', checkBox: { label: 'Allow Diagonal' } } ], [0.1, 0.1]); } 自从iOS8支持WebGL...后在移动终端上测试3D应用比当前的大部分Android平板舒服多了，以上的例子在iOS系统下呈现和算法都挺流畅，http://v.youku.com/v_show/id_XODMzOTU1Njcy.html
前言 随着近几年物联网、万物互联等诸多概念的大行其道，智慧城市的概念也早已经被人们耳熟能详，而作为城市的组成部分，智慧建筑也是重中之重，智慧园区，智慧小区等也如雨后春笋般的相继出现。...资源预加载 这里我通过在 body 中添加一个不在窗口展示的与窗口等宽高的 div 元素，通过把当前不展示的 graph3dView 放到其中触发对相应 obj 等模型资源的请求和渲染，完成预加载，代码如下...web 页面加载是依赖网速的，会展中心模型 obj 等资源文件是有一定大小的，可能对于不同带宽网速的用户所需要加载的时间也不尽相同，这里就需要判断下 obj 是否全部加载完成，加载完成后再执行动画效果，...我想要场景第一次加载时，视角拉近后左右两边的面板再一点一点的加载出来，动画效果是不完全线性顺序的去执行，所以我这里通过 ht.Default.startAnim 方法封装了一套通过参数数组进行的动画的方法...，其应用的场景也会不断拓展，应运而生的数据可视化管理系统也应该配套升级，为其把数字信息变为直观的、以图形图像信息表示的信息，清晰的展现在客户的面前，这将是无可阻挡的时代大趋势。
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎...，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图：http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin...说其丰富的确很丰富，说乱也够乱的，找个Box2D的JS版就有N多选择，而且不同版本API还有差异，可参考这里的对比 http://stackoverflow.com/questions/7628078/...和GUI线程的数据序列化传递也会有负担需注意，最终的例子3D效果玩起来还是挺有趣的：http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html http://hightopo.com.../demo/box2djs/ht-box2d-demo.html
上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用ht.js 快速3D 建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。 ...至于右边的2D 步骤显示面板的联动，因为本demo 采用的是ht.js 来实现的，ht.DataModel作为承载Data 数据的模型，管理着Data 数据的增删以及事件派发，右侧的2D 面板里的步骤也是一个个...该功能点能更直观有效的反应当前的道路交通情况，使各地政府更加有效的、科学的管理交通，发挥出大城市的交通效能。...常规的2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D 可视化更能直观的、有效的反馈信息。当然，3D可视化离不开一款强大的图形引擎。...由于计算机图形学和软硬件技术的快速发展,虚拟现实技术越来越为人们所重视。虚拟现实技术的应用一直是计算机应用领域的热点,虚拟现实技术的应用价值已经得到了广泛的认可。
前言 随着近几年物联网、万物互联等诸多概念的大行其道，智慧城市的概念也早已经被人们耳熟能详，而作为城市的组成部分，智慧建筑也是重中之重，智慧园区，智慧小区等也如雨后春笋般的相继出现。...资源预加载 这里我通过在 body 中添加一个不在窗口展示的与窗口等宽高的 div 元素，通过把当前不展示的 graph3dView 放到其中触发对相应 obj 等模型资源的请求和渲染，完成预加载，代码如下...我想要场景第一次加载时，视角拉近后左右两边的面板再一点一点的加载出来，动画效果是不完全线性顺序的去执行，所以我这里通过 ht.Default.startAnim 方法封装了一套通过参数数组进行的动画的方法...，其应用的场景也会不断拓展，应运而生的数据可视化管理系统也应该配套升级，为其把数字信息变为直观的、以图形图像信息表示的信息，清晰的展现在客户的面前，这将是无可阻挡的时代大趋势。...还有更多的可视化案例可以参考：https://www.hightopo.com/demos/index.html
当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的排斥作用...这个功能很有趣，今天我们就将它的魅力展现出来。 本例地址：http://www.hightopo.com/demo/pipeline/index.html ?...这个函数主要是将我们的连接线在拖动弹力球后被拖拉的连接线的进行一个“变化矩阵”的操作，变化矩阵也是 HT 封装的 ht.Default.createMatrix 函数，通过将节点的 style 属性 mat...HeatMap 热图上做文章，效果依旧很炫，具体地址 http://hightopo.com/guide/guide/plugin/forcelayout/examples/example_heatmap3d.html...界面上的图形全部绘制完毕，剩下的就只有 form 表单，首先将 form 表单添加进 HTML 页面，用的是 HT 封装的 ht.widget.FormPane 函数： var formPane = new
当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的排斥作用...这个功能很有趣，今天我们就将它的魅力展现出来。 本例地址：http://www.hightopo.com/demo/pipeline/index.html ?...这个函数主要是将我们的连接线在拖动弹力球后被拖拉的连接线的进行一个“变化矩阵”的操作，变化矩阵也是 HT 封装的 ht.Default.createMatrix 函数，通过将节点的 style 属性 mat...HeatMap 热图上做文章，效果依旧很炫，具体地址http://hightopo.com/guide/guide/plugin/forcelayout/examples/example_heatmap3d.html...界面上的图形全部绘制完毕，剩下的就只有 form 表单，首先将 form 表单添加进 HTML 页面，用的是 HT 封装的 ht.widget.FormPane 函数： var formPane = new
对于 3D 建模下的楼宇建筑，加上一个好的开场动画效果，可以给用户带来良好的体验效果，所以我们可以对 3D 场景 修改它的 eye 和 center 的数值来达到漫游的效果。...在 3D 场景中，我们可以对通过对整个大楼模型节点的拆分，把需要做动画的大楼部分模型做成单独的节点，再通过给这些节点设置不同的 Tag（注：类似ID，在我们的场景中是唯一的）。...在我们的 3D 的三维坐标系中，X 轴正方向朝右，Y 轴正方向朝上，Z 轴的正方向朝向屏幕外，采用的是右手螺旋法则，想了解更多关于我们 3D 场景的细节 ，详见HT for Web 3D 手册章节。...，我用的是 Hightopo 的调度来实现电梯的动画效果。...通过能源监控系统，在这些丰富的曲线图、柱图等图表以及有趣生动的3D动画中，就可以直观、有效的传递出楼宇内部的能源变化，从而降低建筑的运营成本，有效的降低建筑用能，对于节能减排、保护环境具有重要的现实意义
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
