首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    原 荐 快速开发 HTML5 WebGL

    前言 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 函数进行更新。

    1.6K30

    HTML5 + WebGL 实现垃圾分类系统

    前言 垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源一系列活动总称。分类目的是提高垃圾资源价值和经济价值,力争物尽其用。...从国内外各城市对生活垃圾分类方法来看,大致都是根据垃圾成分、产生量,结合本地垃圾资源利用和处理方式来进行分类。到2019年6月25日,生活垃圾分类制度将入法。...,学习它运动模式和动作细节,对每个结构和部位动画进行步骤排序和构思。...这其中最复杂且细微步骤要数液压杆运动了,为了让动画看起来更加真实,我除了将手臂单独运动过程中加入了延时执行下一段动画以体现机器运动特点外,也把液压杆部分也做了动画,如果不做处理,那么机械臂在上下移动时候就会有不科学效果出现...医疗站(https://www.cnblogs.com/htdaydayup/p/11558748.html) 在工业物联网从婴儿走到青年成熟道路上,一定会有更多潜力和挑战在等着我们,等待我们去开发

    35030

    基于 HTML5 WebGL 垃圾分类系统

    前言 垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源一系列活动总称。分类目的是提高垃圾资源价值和经济价值,力争物尽其用。...从国内外各城市对生活垃圾分类方法来看,大致都是根据垃圾成分、产生量,结合本地垃圾资源利用和处理方式来进行分类。到2019年6月25日,生活垃圾分类制度将入法。...,学习它运动模式和动作细节,对每个结构和部位动画进行步骤排序和构思。...这其中最复杂且细微步骤要数液压杆运动了,为了让动画看起来更加真实,我除了将手臂单独运动过程中加入了延时执行下一段动画以体现机器运动特点外,也把液压杆部分也做了动画,如果不做处理,那么机械臂在上下移动时候就会有不科学效果出现...医疗站(https://www.cnblogs.com/htdaydayup/p/11558748.html) 在工业物联网从婴儿走到青年成熟道路上,一定会有更多潜力和挑战在等着我们,等待我们去开发

    36830

    基于 HTML5 + WebGL 垃圾分类系统

    前言 垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源一系列活动总称。分类目的是提高垃圾资源价值和经济价值,力争物尽其用。...从国内外各城市对生活垃圾分类方法来看,大致都是根据垃圾成分、产生量,结合本地垃圾资源利用和处理方式来进行分类。到2019年6月25日,生活垃圾分类制度将入法。...好了,准备工作做好了,下面来实现动画部分,除了了解 垃圾分类 方式外我还参考了网上很多机械臂视频,学习它运动模式和动作细节,对每个结构和部位动画进行步骤排序和构思。...这其中最复杂且细微步骤要数液压杆运动了,为了让动画看起来更加真实,我除了将手臂单独运动过程中加入了延时执行下一段动画以体现机器运动特点外,也把液压杆部分也做了动画,如果不做处理,那么机械臂在上下移动时候就会有不科学效果出现.../htdaydayup/p/11558748.html) ?

    60120

    基于HTML5WebGL应用内存泄露分析

    AdobeFlex和微软Silverlight/WPF本被业界寄予厚望,没想这哥俩如匆匆过客被老东家抛弃了,但他们还是推动了MVP和MVVM设计模式普及,如今HTML5领域KnockoutJS、...属性除了AffectsRenderer和AffectsMeasure还有多少要考虑因素,上段提到一堆新兴HTML5界MV*框架,相信更少有人敢说熟练精通,你可能在某个项目中用了好几个月甚至一两年,...很多情况下内存泄露不是长期运行也很难发觉,但对于HTGraph3dView这种基于WebGL3D组件问题尤为明显,因为大部分浏览器对单个页面能运行WebGL上下文是有限制,例如PC上chrome...因此由以上视频你会发现在chrome下当点击到第16个包含Graph3dView页签后就出现了”Too many active WebGL contexts....http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 总结下本篇两个观点: 1、再好封装设计也需要使用者掌握基本架构脉络

    3.1K90

    原 基于 HTML5 WebGL 3D

    前言 用 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 函数进行更新。

    1.1K40

    基于 HTML5 + WebGL 实现垃圾分类系统

    前言 垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源一系列活动总称。分类目的是提高垃圾资源价值和经济价值,力争物尽其用。...从国内外各城市对生活垃圾分类方法来看,大致都是根据垃圾成分、产生量,结合本地垃圾资源利用和处理方式来进行分类。到2019年6月25日,生活垃圾分类制度将入法。...,学习它运动模式和动作细节,对每个结构和部位动画进行步骤排序和构思。...这其中最复杂且细微步骤要数液压杆运动了,为了让动画看起来更加真实,我除了将手臂单独运动过程中加入了延时执行下一段动画以体现机器运动特点外,也把液压杆部分也做了动画,如果不做处理,那么机械臂在上下移动时候就会有不科学效果出现...医疗站(https://www.cnblogs.com/htdaydayup/p/11558748.html) 在工业物联网从婴儿走到青年成熟道路上,一定会有更多潜力和挑战在等着我们,等待我们去开发

    37220

    原 基于 HTML5 WebGL 3D

    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 方法创建

    1.6K60

    基于HTML5WebGL应用内存泄露分析

    上篇(http://www.hightopo.com/blog/194.html)我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更多矢量应用场景...AdobeFlex和微软Silverlight/WPF本被业界寄予厚望,没想这哥俩如匆匆过客被老东家抛弃了,但他们还是推动了MVP和MVVM设计模式普及,如今HTML5领域KnockoutJS、...属性除了AffectsRenderer和AffectsMeasure还有多少要考虑因素,上段提到一堆新兴HTML5界MV*框架,相信更少有人敢说熟练精通,你可能在某个项目中用了好几个月甚至一两年,...很多情况下内存泄露不是长期运行也很难发觉,但对于HTGraph3dView这种基于WebGL3D组件问题尤为明显,因为大部分浏览器对单个页面能运行WebGL上下文是有限制,例如PC上chrome...many active WebGL contexts.

    2.3K20

    原 基于HTML5WebGL呈现A星算

    最近搞个游戏遇到最短路径常规游戏问题,一时起兴基于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

    70050

    基于 HTML5 WebGL 3D 智慧城市

    上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》,大体介绍了如何使用ht.js 快速3D  建模,展示了良好可视化效果,今天继续探讨智慧城市应用。   ...至于右边2D 步骤显示面板联动,因为本demo 采用是ht.js 来实现,ht.DataModel作为承载Data  数据模型,管理着Data  数据增删以及事件派发,右侧2D 面板里步骤也是一个个...该功能点能更直观有效反应当前道路交通情况,使各地政府更加有效、科学管理交通,发挥出大城市交通效能。...常规2D 效果图已经不满足于当下需求了,伴随着大数据、云计算、5G、AI、边缘计算等技术发展成熟,3D  可视化更能直观、有效反馈信息。当然,3D可视化离不开一款强大图形引擎。...由于计算机图形学和软硬件技术快速发展,虚拟现实技术越来越为人们所重视。虚拟现实技术应用一直是计算机应用领域热点,虚拟现实技术应用价值已经得到了广泛认可。

    1.7K40

    基于 HTML WebGL 会展中心智能监控系统

    前言 随着近几年物联网、万物互联等诸多概念大行其道,智慧城市概念也早已经被人们耳熟能详,而作为城市组成部分,智慧建筑也是重中之重,智慧园区,智慧小区等也如雨后春笋般相继出现。...资源预加载 这里我通过在 body 中添加一个不在窗口展示与窗口等宽高 div 元素,通过把当前不展示 graph3dView 放到其中触发对相应 obj 等模型资源请求和渲染,完成预加载,代码如下...web 页面加载是依赖网速,会展中心模型 obj 等资源文件是有一定大小,可能对于不同带宽网速用户所需要加载时间也不尽相同,这里就需要判断下 obj 是否全部加载完成,加载完成后再执行动画效果,...我想要场景第一次加载时,视角拉近后左右两边面板再一点一点加载出来,动画效果是不完全线性顺序去执行,所以我这里通过 ht.Default.startAnim 方法封装了一套通过参数数组进行动画方法...,其应用场景也会不断拓展,应运而生数据可视化管理系统也应该配套升级,为其把数字信息变为直观、以图形图像信息表示信息,清晰展现在客户面前,这将是无可阻挡时代大趋势。

    46920

    基于 HTML WebGL 会展中心智能监控系统

    前言 随着近几年物联网、万物互联等诸多概念大行其道,智慧城市概念也早已经被人们耳熟能详,而作为城市组成部分,智慧建筑也是重中之重,智慧园区,智慧小区等也如雨后春笋般相继出现。...资源预加载 这里我通过在 body 中添加一个不在窗口展示与窗口等宽高 div 元素,通过把当前不展示 graph3dView 放到其中触发对相应 obj 等模型资源请求和渲染,完成预加载,代码如下...我想要场景第一次加载时,视角拉近后左右两边面板再一点一点加载出来,动画效果是不完全线性顺序去执行,所以我这里通过 ht.Default.startAnim 方法封装了一套通过参数数组进行动画方法...,其应用场景也会不断拓展,应运而生数据可视化管理系统也应该配套升级,为其把数字信息变为直观、以图形图像信息表示信息,清晰展现在客户面前,这将是无可阻挡时代大趋势。...还有更多可视化案例可以参考:https://www.hightopo.com/demos/index.html

    60310

    原 基于HTML5WebGL结合Box2

    上篇我们基于HT for Web呈现了A* Search Algorithm3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎碰撞效果,同上篇其实Box2DJS只是二维平面碰撞物理引擎...,但同样通过3D呈现能让人更直观体验到碰撞效果,先上张最终例子效果图:http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin...说其丰富的确很丰富,说乱也够乱,找个Box2DJS版就有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

    48610

    基于 HTML5 WebGL 3D “弹力”布局

    当二分子相距较远时,主要表现为吸引力,这种力主要来源于一个分子被另一个分子随时间迅速变化电偶极矩所极化而引起相互作用;当二分子非常接近时,则排斥力成为主要,这是由于各分子外层电子云开始重叠而产生排斥作用...这个功能很有趣,今天我们就将它魅力展现出来。 本例地址: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

    1K20

    基于 HTML5 WebGL 3D “弹力”布局

    当二分子相距较远时,主要表现为吸引力,这种力主要来源于一个分子被另一个分子随时间迅速变化电偶极矩所极化而引起相互作用;当二分子非常接近时,则排斥力成为主要,这是由于各分子外层电子云开始重叠而产生排斥作用...这个功能很有趣,今天我们就将它魅力展现出来。 本例地址: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

    1.4K90

    基于 HTML5 WebGL 智慧楼宇能源监控系统

    对于 3D 建模下楼宇建筑,加上一个好开场动画效果,可以给用户带来良好体验效果,所以我们可以对 3D 场景 修改它 eye 和 center 数值来达到漫游效果。...在 3D 场景中,我们可以对通过对整个大楼模型节点拆分,把需要做动画大楼部分模型做成单独节点,再通过给这些节点设置不同 Tag(注:类似ID,在我们场景中是唯一)。...在我们 3D 三维坐标系中,X 轴正方向朝右,Y 轴正方向朝上,Z 轴正方向朝向屏幕外,采用是右手螺旋法则,想了解更多关于我们 3D 场景细节 ,详见HT for Web 3D 手册章节。...,我用是 Hightopo 调度来实现电梯动画效果。...通过能源监控系统,在这些丰富曲线图、柱图等图表以及有趣生动3D动画中,就可以直观、有效传递出楼宇内部能源变化,从而降低建筑运营成本,有效降低建筑用能,对于节能减排、保护环境具有重要现实意义

    82350
    领券