电力3D项目去年底刚立项时，需求仅仅是PC浏览器的3D展示要求，后来慢慢增加了要求也能在平板上运行，因为我们的系统大部分是内网的，不可能要求移动终端得上app store去下载应用程序，虽然apple也提供企业内部发布的解决方案...，但还是远不如android安装app方便，对于企业应用三天两头就需要改动需求，我们的发布非常频繁，所以最终移动端选型采用Android的方案。 ...当然Google不会止步不前，最新的KitKat已经将WebView升级到了Chrome for Android的30版本，这个版本的HTML5功能对大部分应用来说也算足够了 ，当然后续WebView要是也能自动升级就好了...的设计器的可视化挺感兴趣，所以几年前尝尝鲜研究过一阵，但现在我搞些小工具我还是用古老的Cocoa来开发，我感觉Cocoa的binding和可视化的功能虽然一二十年没变过，但也足以完胜如今的很多GUI框架，大部分情况我就基于HTML5
注意，要先保存一个新的Scheme，才能调整字体大小。
前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求...来替代）： ht.Default.def('Editor.Server', Object, {//第一个参数为类名，如果为字符串，自动注册到HT的classMap中；第二个参数为此类要继承的父类；第三个参数为方法和变量的声明.../设置图元在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...）中即可： var dm = new ht.DataModel();// 数据容器 var g3d = new ht.graph3d.Graph3dView(dm);// 三维组件 g3d.addToDOM...();// 将三维组件添加到 body 体中 上面代码中出现的 addToDOM 方法是将调用此方法的组件通过 getView 方法获取到此组件的底层 div，随后将此 div 添加到 body 体中。...--先引入ht.js--> 这里总共有三个部分有动画，采用的方法大致相同，这里仅对整个轧棉机的机身的左右移动的动画进行说明...', 'rgba(0,0,255,0.51)'); } } } ], [0.2, 0.1, 0.1]);// 将一行中的三个元素都分配宽度进行显示
修改它的后缀名打开后，发现没有任何版式可言 第三步：再使用文本打开，在开头与结尾添加如下标签 内容，内容 ?...例如百度网址的head 关于UTF-8的一些问题 如果使用UTF-8编码格式，那么必须在保存的时候选择UTF-8格式，否则即便制定了字体，也无法正常显示。 ? ?...关于DOCTYPE声明 参考资料：W3C 9 CSS了解 如果在一些版本中不支持下面的写法，就需要使用CSS写法 设置字体为7号，颜色为红色 ? 雷潮 CSS写法,修改字体样式...而Windows下.html是长文件命名 11 XHTML和HTML与HTML5的区别 XHTML 标签必须小写，必须严格闭合，属性必须用引号加注等 HTML 语法宽松容 HTML5 HTML的下一个版本
console.log(`${key}--${localStorage[key]}`) } 运行程序之后，结果如图： 我们发现遍历的时候把localStorage的属性和方法全部打印出来了，而我们需要的只是我们存储的三个数据...几种存储方式区别 cookies 和 sessionStorage、localStorage区别如图： 上述看三者存储大小有很大差异，存储内容上也不同，cookie只能保存字符串类型，但sessionStorage
这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。...首先，我们得创建场景将作为基础，整个场景我算是分为三个部分，顶部工具栏，2D 部分以及 3D 部分。.../设置3d的眼睛位置 g3d.setCenter(200, 47, 10);//设置3d的中心位置， 这两个属性都是为了让用户看3d上的场景更舒服，更直接 g2d = new ht.graph.GraphView...我封装了一个增加函数，一个删除函数，还有一个清楚函数，分别对应的是工具栏上的“Add”、“Remove”以及“Clear”三个功能： function addData() { var data...HT 封装了解析 obj 格式的函数 ht.Default.loadObj 函数用来导入模型，该函数有三个参数，第一第二分别为 obj 文件的路径和 mtl 文件的路径，第三个参数为 json 格式控制参数
/index.html 这个例子用 HT 实现真的很容易，首先创建一个 HT 中最基础的 dm 数据模型，然后将数据模型添加进 g3d 3d 组件中，再设置 3d 中的视角并把 3d 组件添加进 body...最后是 3d 文字，呈现 3d 文字需要一个 json 格式的 typeface 字体，然后通过 ht.Default.loadFontFace 来加载 json 格式的字体到内存中，详情请参考 HT...false }); }); 因为我们用的 typeface 字体的绘制方式是无数个三角形构成的一个字，会占用很大的内存，所以我把图形的曲线的精细度调得较低，但是还是很清晰，如果你们能找到性能更好的字体...，可以使用并且告知我一下，我们目前没找到占用内存小的字体。...最后，要动态的变化 chart 图表中的柱形图，我们得设置动画，并且将 3d 字体也同步更新数值： setInterval(function(){ if(node.a('myHeight') <
前言 中共中央、国务院在今年12月印发了《长江三角洲区域一体化发展规划纲要》(下文简称《纲要》)，并发出通知，要求各地区各部门结合实际认真贯彻落实。 ...《纲要》强调，要提升基础设施互联互通水平，打造数字长三角，协同建设新一代信息基础设施，共同推动重点领域智慧应用。...上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用ht.js 快速3D 建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。 ...常规的2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D 可视化更能直观的、有效的反馈信息。当然，3D可视化离不开一款强大的图形引擎。...ht.Shape是极其强大的图元类型，这里绘制漫游路线就是使用其扩展子类ht.Polyline ，绘制一条三维空间管道，然后通过获取该路径上的点来不断设置eye就行了。
为了实现一个基于HTML5的场景小游戏，我采用了HT for Web来实现，短短200行代码，我就能实现用“第一人称”来操作前进后退上下左右，并且实现了碰撞检测。...先来看下实现的效果： http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision 或者http://v.youku.com...“我”处于的位置在2d中也显示出来。...详情参考HT for Web 3D手册。...“我”的位置和移动也是不会变的，所以我们又监听了3d中属性的变化： g3d.mp(function(e){//根据3d上的“我”的位置和视线来实时更新2d界面 if(e.property ===
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。...，我们马上创建了一个3D图元，并将其添加到了dataModel容器中，这时我们需要一个3D拓扑来显示这个3D图元，具体的创建代码如下： var dataModel = new ht.DataModel(...); var g3d = new ht.graph3d.Graph3dView(dataModel); g3d.setEye(200, 50, 300); g3d.setDashDisabled(false...到这里，模型就算完成了，接下来要做的就是让螺旋桨动起来，和2D叶轮旋转类似，在3D模型上也可以做数据绑定，要想让螺旋桨旋转起来，我们就需要设置螺旋桨的rotation属性，和3D上的图元不同的是，设置3D...图元的rotation属性需要设置一个数组，定义3D上三个方向的旋转值。
节点，通过设置这个节点的 style 样式属性来控制节点的显示方式，其中将“shape3d”设置为“sphere”即可将 ht.Node 六面体变成 3D 球体模型，再设置“shape3d”属性为前面定义的随机颜色...，s3 是 HT 封装的设置 3D 节点大小的 setSize3d 函数的简写，最后将这个节点添加进数据模型 dataModel 中： var createNode = function(dm) {//...form 表单添加行是通过 addRow 函数，我们重点来说一下下面的几行，Color、Range 和 Intensity，这三个名字主要是用来控制“头灯”的。...在 HT 中直接通过 setHeadlightColor/setHeadlightRange/setHeadlightIntensity 三个函数来控制“头灯”的颜色、范围以及灯的强度，onValueChanged...'setHeadlight' + name](nV);// === g3d.setHeadlightColor(nV)/g3d.setHeadlightRange(nV)/g3d.setHeadlightIntensity
不管在任何领域，只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的，今天我们不需要 3dMaxs 等设计软件，直接用 HT 就能自己写出一个 2D 3D 编辑器，实现这个功能我觉得成就感还是爆棚的...中，将“连线”分为一个部分放到 CreateEdgeInteractor.js 中，接下来我们将对这三个 js 文件一个个解析。...这三个 js 文件的共同点是通过 HT 封装的继承函数 ht.Default.def 继承并创建新的类，这三个类我们在前面的代码中是有提到的： CreateShapeInteractor、CreateNodeInteractor...首先就是要声明定义一个 CreateNodeInteractor 类，就是这三个部分： ?....selected){ this.node.s({ "shape": "rect",//矩形 "shape.background": "#D8D8D8
利用cocos2d-js开发HTML5游戏/动画，我们可以通过SDK也可以直接使用js类库： l SDK下载：http://cn.cocos2d-x.org/download/ l js类库：http:...开始cocos2d-js开发前，需要洗洗脑，知道cocos2d-js的平面坐标情况。这跟HTML和canvas的布局都不一样。 ?...cc.game.onStart = function(){ cc.view.adjustViewPort(true); //设置html5的viewport meta属性 cc.view.setDesignResolutionSize...通过这个简单例子，我们对cocos2d-js制作HTML5有了初步印象。...游戏中使用到： 1、 基本：鼠标事件、帧动画、声音（cc.audioEngine） 2、 平行背景（自行实现） 3、 对象池（cc.pool） 4、 粒子系统（cc.ParticleSystem） 5、 位图字体
基本标签3 video标签 作用：播放视频 格式： .webm:是网页专用视频, autoplay="autoplay" 表示自动播放发 controls="c...
我是用 HT 做的整个例子，首先创建 3D 场景，HT 有 3D 组件，可以直接通过 new ht.graph3d.Graph3dView 3D 组件来创建一个实例，然后通过 getView() 函数获取组件的底层...= new ht.graph3d.Graph3dView(dm);//3D 组件 g3d.addToDOM();//将 3D 组件的底层 div 添加到 body 中 HT 的组件一般都会嵌入 BorderPane...task 为 json 对象，可指定如下属性： interval：间隔毫秒数，默认值为 10 enabled：是否启用开关，默认为 true action：间隔动作函数，该函数必须设置 我的动画一共三个...设置这三个图元变化即可，我在 json 中分别将这三个图元的 tag 设置为 feng、feng2 以及 door，在代码中我就可以直接调用这三个图元的 tag 属性： var task = {...center',//文本对齐方式 color: 'rgb(0,210,187)',//文本颜色 font: 'bold 16px arial, sans-serif'//文本字体
本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。...三. 环境监测。 ? 左边对风机的各个参数实施了监测，右面是风速变化的折线图。 四. 数据监测。 ? 风机在发电的过程中发生的异常情况，发生的故障部位及故障发生的时间。...整理思路： 场景部分： 这里把 3D 当做背景嵌套在 2D 场景中。 这样在初始化图纸的时候，直接反序列化 2D 图纸即可。...具体代码实现： 场景搭建：上面说了，我们把 3D 当做背景嵌套在 2D 中，所以只需要序列化 2D 即可，里面需要进行背景判断的部分代码。...setRotationMode('zxy') 方法是设置三维旋转模式，顺序是 z -> x -> y，先进行z轴旋转，再进行x轴旋转，最后进行y轴旋转。设置目的是为了避免坐标轴受外部旋转的影响。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
