文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    原 基于 HTML5 WebGL 的 3D

    前言 用 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 场景中一些必要的元素，比如墙面，地板，门，空调以及所有的机柜的生成和排放位置，还有非常重要的交互部分

    1.4K40

    基于HTML5 Canvas 点击添加 2D 3D 机柜模型

    这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。...首先，我们得创建场景将作为基础，整个场景我算是分为三个部分，顶部工具栏，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 格式控制参数

    1.6K80

    基于 HTML5 Canvas 的简易 2D 3D 编辑器

    不管在任何领域，只要能让非程序员能通过拖拽来实现 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

    2.6K70

    基于 HTML5 WebGL 的 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

    1.7K90

    原 基于HTML5 WebGL实现3D飞机

    在上一篇《基于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上三个方向的旋转值。

    1.1K50

    原 基于HTML5 Canvas的3D动态

    /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') <

    1.3K20

    基于 HTML5 WebGL 的 3D 智慧城市

    前言 中共中央、国务院在今年12月印发了《长江三角洲区域一体化发展规划纲要》(下文简称《纲要》)，并发出通知，要求各地区各部门结合实际认真贯彻落实。 　　...《纲要》强调，要提升基础设施互联互通水平，打造数字长三角，协同建设新一代信息基础设施，共同推动重点领域智慧应用。...上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用ht.js 快速3D  建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。 　　...常规的2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D  可视化更能直观的、有效的反馈信息。当然，3D可视化离不开一款强大的图形引擎。...ht.Shape是极其强大的图元类型，这里绘制漫游路线就是使用其扩展子类ht.Polyline ，绘制一条三维空间管道，然后通过获取该路径上的点来不断设置eye就行了。

    1.9K40

    基于 HTML5 WebGL 的 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

    1.3K20

    基于 HTML5 WebGL 的 3D 科幻风机

    本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。...三. 环境监测。 ? 　　左边对风机的各个参数实施了监测，右面是风速变化的折线图。 四. 数据监测。 ? 　　风机在发电的过程中发生的异常情况，发生的故障部位及故障发生的时间。...整理思路： 场景部分： 　　这里把 3D 当做背景嵌套在 2D 场景中。 　　这样在初始化图纸的时候，直接反序列化 2D 图纸即可。...具体代码实现： 场景搭建：上面说了，我们把 3D 当做背景嵌套在 2D 中，所以只需要序列化 2D 即可，里面需要进行背景判断的部分代码。...setRotationMode('zxy') 方法是设置三维旋转模式，顺序是 z -> x -> y，先进行z轴旋转，再进行x轴旋转，最后进行y轴旋转。设置目的是为了避免坐标轴受外部旋转的影响。

    1.6K10

    基于 HTML5 的 3D 工控隧道案例

    我是用 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'//文本字体

    1.1K20

    基于HTML5的3D网络拓扑树呈现

    在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合...在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...现在两层的树状分布解决了，那么我们来看看三层的树状分布该如何处理。...将第二层和第三层看成一个整体，那么其实三层的树状结构跟两层是一样的，不同的是在处理第二层节点时，应该将其看做一个两层的树状结构来处理，那么像这种规律的处理用递归最好不过了，因此我们将代码稍微该着下，在看看效果如何...搞定，就是这样子了，2D拓扑上面的布局搞定了，那么接下来该出动3D拓扑啦~ 3.

    1.7K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券