基于 HTML5 Canvas 的 3D 压力器反序列化

2024-08-30 11:32

本文主要是介绍基于 HTML5 Canvas 的 3D 压力器反序列化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在实际应用中,我觉得能够通过操作 JSON 文件来操作 3D 上的场景变化是非常方便的一件事,尤其是在做编辑器进行拖拽图元并且在图元上产生的一系列变化的时候,都能将数据很直观地反应给我们,这边我们简单地做了个基础的例子,给大家参考看看。

本例地址: http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html

实践场景再现:

首先我们搭建一下这个例子的场景,熟悉的朋友可能已经看出来了,这个场景分为三个部分:左、右上以及右下。HT 通过 ht.widget.SplitView 可以很轻松地将场景分割,实现良好的页面布局,最后将这个分割组件添加进 html 的 body 体中:

//场景搭建
dataModel = new ht.DataModel();//数据容器g3d = new ht.graph3d.Graph3dView(dataModel);//3D 组件
propertyView = new ht.widget.PropertyView(dataModel);// 属性组件
formPane = new ht.widget.FormPane();//表单组件
rightSplit = new ht.widget.SplitView(propertyView, formPane, 'v', 100);//分割组件new ht.widget.SplitView(g3d, rightSplit, 'h', 0.65).addToDOM();  

接下来就是向场景中添加图元,并把图元添加到 3D 场景中,这时我们可以向图元中添加各种属性和样式以及标签作为标记,本例中用到的图元是 3D 模型,利用 ht.Default.parseObj 函数对 obj 和 mtl 文件进行解析:

//添加模型
var params = {center: true};//JSON格式控制参数 传入 ht.Default.parseObj 函数中
var modelMap = ht.Default.parseObj(meter_obj, meter_mtl, params);//解析obj和mtl文件, 解析后返回的map结构json对象中,每个材质名对应一个模型信息

当然,前提是要已经声明了 meter_obj 以及 meter_mtl 两个文件,这里我们是将这两个部分分别放到 js 文件中,并在头部调用。

从上面的动图中我们可以看到,这个例子中需要变化的模型部分只有“指针”以及下面的“开关”两个部分,所以我们通过遍历的方式获取这两个 obj 模型的部分,并注册 3D 模型:

var array = [];
for(var name in modelMap){var model = modelMap[name];//modelMap 中的模型array.push(model);if(name === 'pointer'){//obj 文件中的一个模型 名称为 pointermodel.mat = {//矩阵变化参数,可对模型进行矩阵变化后导入 func: function(data){var start = Math.PI * 0.736,range = Math.PI * 1.49,   angle = start - range * data.a('meter.value') / 4;//动态获取了 meter.value 的值return ht.Default.createMatrix([//将一组JSON描述的缩放、移动和旋转等操作转换成对应的变化矩阵{ t3: [0, -82.5, 0] },{ r3: [0, 0, angle] },{ t3: [0, 82.5, 0]  }]);}};                         }if(name === 'switch'){//obj 文件中的一个模型 名称为 switchmodel.mat = {func: function(data){return ht.Default.createMatrix([{ t3: [0, 48.5, 0] },{ r3: [0, 0, data.a('meter.angle')] },{ t3: [0, -48.5, 0]  }]);}}; model.color = {func: function(data){if(data.a('meter.angle')){return 'rgb(186, 0, 0)';}else{return 'black';}}};}
}
ht.Default.setShape3dModel('meter', array);//注册3D模型,请参考modeling建模手册 第一参数为模型名称,第二参数为 JSON 类型对象

之后用户可以在需要用到的地方直接设置属性 shape3d 为这边注册过的 3D 模型名称,我们下面就创建 3 个节点,并将节点设置为此 3D 模型:

for(var i=0; i<3; i++){//创建3个节点 metervar node = new ht.Node();node.setTag(i);//设置 tag 标签node.setName('Meter - 00' + (i+1));//设置图元名称一般显示在图元的下方node.s({'label.color': 'white','label.background': '#5271B8','label.face': 'center','label.position': 23,'label.scale': 2,'label.reverse.flip': true, 'note.scale': 1.5,//设置字体大小,这种方式不会碰到浏览器最小字体的问题'note.t3': [-30, -5, -90], 'note2.scale': 1.2,'note2.position': 17,'note2.t3': [0, -20, -30],'note2.color': 'black','note2.background': 'yellow', 'shape3d': 'meter',//设置为前面注册的 meter 3D 模型'shape3d.scaleable': false,'wf.visible': 'selected',//选中图元时显示线框'select.brightness': 1});node.a({//自定义属性 下面会利用这些自定义属性进行数据绑定'meter.value': i+1,'meter.angle': i * Math.PI / 3});node.p3(i*200-200, params.rawS3[1]/2, i===1?100:-100);                    node.r3(0, -Math.PI/6*(i-1), 0);node.s3(params.rawS3);//设置图元的大小为 rawS3 模型的原始尺寸dataModel.add(node); //向数据模型中添加节点           
}
dataModel.sm().ss(dataModel.getDataByTag(1));//设置默认选中 tag 标签为1的图元

我们在这边为节点添加两个标注,作为文字提示,可以通过重载 getNote/getNote2(HT 中一个节点支持双标注,所以提供了 note2 第二个标注) 函数重载 note 的命名方法,当然 HT 中其他类似的文字提示也可以通过这种途径来改变文字的显示信息,这里我们通过数据绑定获取 meter.value 以及 meter.angle 两个属性的动态数据:

g3d.getNote = function(data){//重载 getNote 方法return 'Value:' + data.a('meter.value').toFixed(2);
};
g3d.getNote2 = function(data){var value = Math.round(data.a('meter.angle') / Math.PI * 180);//获取了 meter.angle 属性,数据实时变化                 return value ? 'Angle:' + value : 'Switch is off';
};

我们还在场景的显示部分使了一点小心机~通过改变实现 eye 和 center 的值来实现视线由远及近的效果:

var oldEye = g3d.getEye().slice(0),
oldCenter = g3d.getCenter().slice(0),
newEye = [200, 300, 650],
newCenter = [0, params.rawS3[1]/2, 0];ht.Default.startAnim({//动画              duration: 1000,//持续时间easing: function(t){ //动画缓动函数,默认采用 ht.Default.animEasingreturn (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));                      },action: function(k){//action 函数必须提供,实现动画过程中的属性变化 参数 k 代表通过 easing(t) 函数运算后的值g3d.setEye(oldEye[0] + (newEye[0] - oldEye[0]) * k,oldEye[1] + (newEye[1] - oldEye[1]) * k,oldEye[2] + (newEye[2] - oldEye[2]) * k);g3d.setCenter(oldCenter[0] + (newCenter[0] - oldCenter[0]) * k,oldCenter[1] + (newCenter[1] - oldCenter[1]) * k,oldCenter[2] + (newCenter[2] - oldCenter[2]) * k);    }                  
});

整个左边实现完成~接着该实现右上部分,属性值的显示以及控制,我们总共添加了四个属性:名称、meter.value、meter.angle以及旋转 rotation,通过数据绑定操作属性栏中的值来改变 3D 模型中的显示状态,数据绑定我们通过获取 accessType 以及 name 中的值来配合调用到这个属性:

propertyView.addProperties([//用 json 的数组参数方式批量添加属性信息{name: 'name',//属性名 这里不用设置 accessType,因为 accessType 默认的值为 setName/getName 这种格式 editable: true//设置为可编辑状态},{name: 'meter.value',//用于存取name属性,该属性结合accessType属性最终实现对Data属性的存取accessType: 'attr',//通过 getAttr/setAttr 获取或设置属性值editable: true,slider: {min: 0,max: 4}},{name: 'meter.angle',accessType: 'attr',editable: true,formatValue: function(value){//一般用于将数字转换更易读的文本格式return Math.round(value / Math.PI * 180);},slider: {min: 0,max: Math.PI,step: Math.PI/180*5,//每移动一下滑动的步进getToolTip: function(){//设置鼠标放在图元上的文字提示return Math.round(this.getValue() / Math.PI * 180);}}},{name: 'rotation',editable: true,formatValue: function(value){return Math.round(value / Math.PI * 180);},slider: {min: -Math.PI,max: Math.PI,step: Math.PI/180*5,getToolTip: function(){return Math.round(this.getValue() / Math.PI * 180);}}}                    
]); 

最后进行右下部分 formPane 表单面板的解析,formPane 通过 addRow 函数向表单中添加行,这个表单中总共两行,其中第一行有两个部分:

formPane.addRow([//向表单组件中添加行{id: 'export',button: {//按钮                              label: 'Export JSON',onClicked: function(){//点击时触发的函数var json = dataModel.serialize();formPane.v('textArea', json);}}},{button: {                            label: 'Import JSON',onClicked: function(){dataModel.clear();//清空数据模型dataModel.deserialize(formPane.v('textArea'));//将获取到的 textArea 中的数据反序列化,是下面一行的 id 值}}}
],
[0.1, 0.1]);  //最后的参数是这行的宽度分配比例 小于1的值为比例,大于1为实际值                             
formPane.addRow([{id: 'textArea',textArea: {}}
],
[0.1], 0.1);  

这样,我们就可以根据修改属性栏中或者 JSON 文件,直接看到 3D 中我们修改的效果啦~怎么样?是不是很酷很快?

这篇关于基于 HTML5 Canvas 的 3D 压力器反序列化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

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

这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

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

MiniGPT-3D, 首个高效的3D点云大语言模型,仅需一张RTX3090显卡,训练一天时间,已开源

项目主页:https://tangyuan96.github.io/minigpt_3d_project_page/ 代码:https://github.com/TangYuan96/MiniGPT-3D 论文:https://arxiv.org/pdf/2405.01413 MiniGPT-3D在多个任务上取得了SoTA,被ACM MM2024接收,只拥有47.8M的可训练参数,在一张RTX