根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

2024-08-30 11:38

本文主要是介绍根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

数学中矩阵是以排列数字符号表达式矩形阵列,任何矩阵都可以通过相关字段标量乘以元素矩阵的主要应用是表示线性变换,即fx)= 4 x线性函数的推广例如,旋转载体在三空间是一个线性变换,这可以通过一个表示旋转矩阵 [R 如果v是一个列向量描述(只有一列的矩阵)的位置在空间中的点,该产品器Rv是列矢量描述旋转后该点的位置。两个变换矩阵的乘积是表示两个变换组成矩阵矩阵的另一个应用是线性方程组的解如果矩阵是方形的,可以通过计算其行列式来推断它的一些性质例如,当且仅当其行列式不为零时,方阵具有相反的 从矩阵的特征值和特征向量中可以看到线性变换几何结构(以及其他信息)

矩阵的应用可以在大多数科学领域找到。物理学的每一个分支,包括经典力学光学电磁学量子力学量子电动力学,都被用来研究物理现象,比如刚体的运动计算机图形学中,它们被用来操作三维模型并将其投影到二维屏幕上概率论统计学中随机矩阵被用来描述概率集; 例如,它们在PageRank算法中用于对Google搜索中的页面进行排名。[5] 矩阵演算概括经典分析概念,如衍生物指数更高的尺寸。矩阵在经济学中被用来描述经济关系系统。


首先,这个实现真的是非常的酷,我从来不知道分子中的引力和斥力结合矩阵能做出这么炫酷的效果,而且还是代码量非常少的情况下,这个例子在医疗界还有生物界应该是应用非常广泛的,但是如果好好利用,在工业方面也一定有不小的成就。

http://www.hightopo.com/demo/pipeline/index.html


接下来我的任务就是帮助你们也能轻松地实现这个效果,HT 将弹力布局的 js 文件放到了一个独立的文件中,在引用这个 js 文件需要先引入 ht.js,因为我们还做了一个 form 表单,所以也要引入 form 表单的 js 文件, 并不是所有的 HT 封装的的功能都需要引入一个特别的 js 文件,需要引入额外的 js 文件的手册中顶部都会有介绍,这里 forcelayout 弹力布局的 js 和 form 表单的 js 的排放顺序没有关系:

 

<script src="../../guide/lib/core/ht.js"></script>
<script src="../../guide/lib/plugin/ht-forcelayout.js"></script>
<script src="../../guide/lib/plugin/ht-form.js"></script>

首先我们定义一个颜色数组变量,存储各个弹力球的颜色,还定义了一个随机函数,用来生成数随机的数组中的颜色:

 

 

var colorList = ['#FFAFA4', '#B887C5', '#B9EA9C', '#CFD9E7', '#4590B8', '#FF9C30'],
colorLen = colorList.length;
var randomColor = function() {var ran = Math.random() * colorLen;return colorList[Math.floor(ran)];//随机6种颜色
};

接着创建弹力球,简单生成一个 3D 节点,通过设置这个节点的 style 样式属性来控制节点的显示方式,其中将“shape3d”设置为“sphere”即可将 ht.Node 六面体变成 3D 球体模型,再设置“shape3d”属性为前面定义的随机颜色,s3 也是 HT 封装的设置 3D 节点大小的函数,最后将这个节点添加进数据模型 dataModel 中:

 

 

var createNode = function(dm) {//创建node节点 圆var node = new ht.Node();node.s({'shape3d': 'sphere','shape3d.color': randomColor()});node.s3(40, 40, 40);dm.add(node);return node;
};

现在效果图上出现的还有各个弹力球之间的连线,这个连线我们一看就觉得很不一般,也是通过构造一个一个节点,这个节点是通过 HT for Web 建模手册 setShape3dModel函数自定义的一个 3D 模型,将其命名为‘custom’:

 

 

ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线,环绕一周形成3D模型。'custom', ht.Default.createRingModel( [0.5, 0.5, -0.2, 0, 0.5, -0.5], [1, 3] )
);

 

HT 将用户自定义的属性和 HT 默认的属性调用方法分为 node.a 和 node.s 这样就能将两者有效地区分开来,我们在创建管线的时候就调用了这种方法:

 

var updatePipeline = function(edge) {//重新设置edge的样式var pipeline = edge.a('pipeline');pipeline.s3(1, 1, 1);pipeline.p3(0, 0, 0);var node1 = edge.getSourceAgent(),//获取图形上连接的起始节点node2 = edge.getTargetAgent();pipeline.s('mat', createMatrix(node1.p3(), node2.p3(), 20));//3d整体图形矩阵变化
};

 

我们知道,矩阵能描述任意线性变换。线性变换保留了直线和平行线,线性变换保留直线的同时,其他的几何性质如长度、角度、面积和体积可能被变换改变了。简单的说,线性变换可能“拉伸”坐标系,但不会“弯曲”或“卷折”坐标系。这个函数主要是将我们的连接线在拖动弹力球后被拖拉的连接线的进行一个“变化矩阵”的操作,变化矩阵也是 HT 封装的 ht.Default.createMatrix 函数,能够非常轻松地创建出变化矩阵:

 

var createMatrix = function(p1, p2, width) {//createMatrix(array, matrix)将一组JSON描述的缩放、移动和旋转等操作转换成对应的变化矩阵var vec = [p2[0]-p1[0], p2[1]-p1[1], p2[2]-p1[2]],dist = ht.Default.getDistance(p1, p2);//获取两点之间距离,或向量长度return ht.Default.createMatrix({s3: [width, dist, width],r3: [Math.PI/2 - Math.asin(vec[1]/dist), Math.atan2(vec[0], vec[2]), 0],rotationMode: 'xyz',t3: [(p1[0]+p2[0])/2, (p1[1]+p2[1])/2, (p1[2]+p2[2])/2]});
};

基础配件全部定义完毕,接着就是将“shape3d”属性设置为自定义的 3D 模型“custom” ,并将“layoutable”属性设置为“false”阻止图元参与布局,并将点之间的连线通过edge.a('pipeline', node)重新刷新,并添加进数据模型 dataModel 中:

 

 

var createEdge = function(dm, node1, node2) {//创建‘custom’模型的edgevar node = new ht.Node();node.s({'shape3d': 'custom','shape3d.color': '#ECE0D4','layoutable': false});dm.add(node);var edge = new ht.Edge(node1, node2);edge.a('pipeline', node);edge.s('edge.color', 'rgba(0, 0, 0, 0)');dm.add(edge);return edge;
};

我们还可以在工业上用 HeatMap 热图上做文章,效果依旧很炫,具体地址http://hightopo.com/guide/guide/plugin/forcelayout/examples/example_heatmap3d.html


这里我们还是专注地继续完成这个例子。

界面上的图形全部绘制完毕,剩下的就只有 form 表单,首先将 form 表单添加进 HTML 页面,用的是 HT 封装的 ht.widget.FormPane 函数:

 

var formPane = new ht.widget.FormPane();
formPane.setWidth(230);
formPane.setHeight(125);
formPane.addToDOM();

记住,form 表单要设置宽高,不然不显示。

 

form 表单添加行是通过 addRow 函数,我们重点来说一下下面的几行,Color、Range 和 Intensity,这三个名字主要是用来控制“头灯”的。在 HT 中直接通过 setHeadlightColor/setHeadlightRange/setHeadlightIntensity 三个函数来控制“头灯”的颜色、范围以及灯的强度,onValueChanged 属性,顾名思义属性值改变之后触发的事件:

 

['Color', 'Range', 'Intensity'].forEach(function(name) {var obj = { id: name },func = function(oV, nV) {g3d['setHeadlight' + name](nV);// === g3d.setHeadlightColor(nV)/g3d.setHeadlightRange(nV)/g3d.setHeadlightIntensity(nV)};if (name === 'Color')obj.colorPicker = {//ht.widget.ColorPicker为颜色选择框 instant: true,value: g3d['getHeadlight' + name](),// === g3d.getHeadlightColor()onValueChanged: func};else obj.slider = {//滑动条min: 0,max: name === 'Range' ? 20000 : 3,step: 0.1,value: g3d['getHeadlight' + name](),onValueChanged: func};formPane.addRow([ name, obj ], [ 70, 0.1 ]);
});

slider 和 colorPicker 都是 HT 自定义的滑动条和颜色选择器,详情请参考 HT for Web 表单手册

 

如果还有不懂的请咨询我,或者直接上 HT for Web 官网查阅手册。

 

这篇关于根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120720

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time