【技术实现步骤摘要】
本专利技术涉及页面修改，尤其涉及一种网页端3d场景内资源展示页面动态修改方法及装置。
技术介绍
1、在大数据可视化的展示中，常常为了可以更有效更直观地展示设备的数据和状态，通常会采用3d数字模型来进行数据状态的展示和交互，例如，在博物馆展馆资源展示中，通过展馆内藏品的3d模型来展示现实世界的物体。
2、公告号为cn110990013a的中国专利公开了基于css实现三维动态页面的方法、系统、设备及介质，该方案通过创建至少一元素，基于css设置元素的视域属性为视域预设值，修改元素的呈现样式属性为三维样式，设置元素的转动属性为转动预设值，建立html文档，在html文档的内容上引用元素，解析html文档，通过设置元素的动画属性及运动的关键帧，不仅可以使网页页面呈现出立体感、深度感，更可以使网页页面实现三维动态效果。但是上述方案无法实现切换不定需求的资源类型，更无法保证动态修改的内容与网页原本渲染的3d化内容保持一致，因此，提供一种网页端3d场景内资源展示页面动态修改方法及装置，来实现html网页中3d内容的完全动态化显示，是非常有必要的。
技术实现思路
1、有鉴于此，本专利技术提出了一种网页端3d场景内资源展示页面动态修改方法及装置，将动态修改的页面元素通过延时渲染的方式从3d场景剥离，从而满足播放不定需求资源的需求和完全动态化显示。
2、本专利技术提供了一种网页端3d场景内资源展示页面动态修改方法，所述方法包括：
3、接收用户输入的播放指令，以获取与
4、使所述html元素基于延时渲染后的3d场景页面进行3d变形，以获取与所述3d场景页面中canvas画布对应的可变html元素；
5、将所述播放任务标识对应的资源文件和3d场景页面填充至所述资源运行页面中，并将所述可变html元素替换所述资源运行页面中的所述html元素，以获取html网页；
6、基于所述html网页，播放经所述可变html元素渲染后的资源文件。
7、在以上技术方案的基础上，优选的，所述使所述html元素基于延时渲染后的3d场景页面进行3d变形，以形成与canvas画布对应的可变html元素，具体包括：
8、在所述html元素中映射形成立方体；
9、基于所述3d场景页面将所述立方体投影至所述canvas画布，以获取第一投影；
10、对所述第一投影进行三维视点转换，以获取与所述canvas画布对应的第二投影；
11、将所述第二投影与所述canvas画布中重合的像素坐标填充至所述html元素，以获取所述可变html元素。
12、在以上技术方案的基础上，优选的，所述对所述第一投影进行三维视点转换，以获取与所述canvas画布对应的所述第二投影之后，还包括：
13、判断所述第二投影的面积是否大于所述canvas画布的面积；
14、若所述第二投影的面积大于所述canvas画布的面积，则通过img标签覆盖边缘窗口，其中，所述边缘窗口为所述第二投影超过所述canvas画布覆盖范围的部分；
15、利用层叠样式表对img标签进行定位和层叠顺序控制，以使所述边缘窗口隐藏。
16、更进一步优选的，所述对所述第一投影进行三维视点转换，以获取与所述canvas画布对应的所述第二投影，具体包括：
17、构建视图变换矩阵mview，
18、
19、构建canvas画布透视投影矩阵mpres，
20、
21、构建变换矩阵tpers，
22、tpers＝mview·mview
23、其中，mview表示所述视图变换矩阵，即mview为从相机视点到原点的平移矩阵与旋转矩阵之间的交叉矩阵，r表示旋转矩阵，t表示平移矩阵，(ox，oy，oz)表示所述第一投影映射在三维空间内的第一坐标点，(px，py，pz)表示所述第一投影映射在三维空间内的第二坐标点，(qx，qy，qz)表示所述第一投影映射在三维空间内的第三坐标点，(ex，ey，ez)表示所述第一投影映射在三维空间内的初始坐标点，mpers表示所述canvas画布透视投影矩阵，fovy表示所述第一投影映射在三维空间的y轴视场角，iratio表示第一投影映射在三维空间内图像的宽高比，zn表示所述第一投影在x轴正半轴上的投影距离，zf表示所述第二投影在x轴正半轴上的投影距离，tpers表示变换矩阵。
24、更进一步优选的，所述接收用户输入的播放指令，以获取与所述播放指令对应的资源运行页面，具体包括：
25、接收用户输入的播放指令，以查询与所述播放任务标识对应的多个第一展品资源；
26、基于多个所述第一展品资源，选择与所述第一展品资源对应的资源运行页面，其中，所述资源运行页面支持一次性显示n个第一展品资源，n为正整数。
27、更进一步优选的，所述接收用户输入的播放指令，以获取与所述播放指令对应的资源运行页面，还包括：
28、判断多个所述第一展品资源的数量是否大于n；
29、若多个所述第一展品资源的数量大于n，则所述资源运行页面响应于资源滚动操作，控制多个所述第一展品资源在所述资源运行页面进行滚动；
30、若检测到滚动停止操作，则停止在所述资源运行页面更新预设数量的第一展品资源，并将剩余第一展品资源的标签依次添加至显示队列。
31、更进一步优选的，所述检测到滚动停止操作之后，还包括：
32、统计所述资源运行页面当前显示预设数量的第一展品资源的持续显示时长；
33、若所述持续显示时长大于预设时长阈值，则按照所述预设数量的第一展品资源在所述资源运行页面中的排列顺序，将所述预设数量的第一展品资源的标签依次添加至所述显示队列中。
34、更进一步优选的，根据所述第一展品资源对应的知识标签，查找具有相同知识领域的第二展品资源。
35、在本申请的第二方面提供了一种网页端3d场景内资源展示页面动态修改装置，所述动态修改装置包括指令接收模块、动态转换模块、网页构建模块以及资源播放模块，其中，
36、所述指令接收模块用于接收用户输入的播放指令，以获取与所述播放指令对应的资源运行页面，其中，所述播放指令包括播放任务标识，所述资源运行页面包括html元素；
37、所述动态转换模块用于使所述html元素基于延时渲染后的3d场景页面进行3d变形，以获取与所述3d场景页面中canvas画布对应的可变html元素；
38、所述网页构建模块用于将所述播放任务标识对应的资源文件和3d场景页面填充至所述资源运行页面中，并将所述可变html元素替换所述资源运行页面中的所述html元素，以获取html网页；
39、所述资源播放模块用于基于本文档来自技高网...
【技术保护点】
1.一种网页端3D场景内资源展示页面动态修改方法，其特征在于，所述方法包括：
2.如权利要求1所述的方法，其特征在于，所述使所述HTML元素基于延时渲染后的3D场景页面进行3D变形，以形成与Canvas画布对应的可变HTML元素，具体包括：
3.如权利要求2所述的方法，其特征在于，所述对所述第一投影进行三维视点转换，以获取与所述Canvas画布对应的所述第二投影之后，还包括：
4.如权利要求2所述的方法，其特征在于，所述对所述第一投影进行三维视点转换，以获取与所述Canvas画布对应的所述第二投影，具体包括：
5.如权利要求1所述的方法，其特征在于，所述接收用户输入的播放指令，以获取与所述播放指令对应的资源运行页面，具体包括：
6.如权利要求5所述的方法，其特征在于，所述接收用户输入的播放指令，以获取与所述播放指令对应的资源运行页面，还包括：
7.如权利要求6所述的方法，其特征在于，所述检测到滚动停止操作之后，还包括：
8.如权利要求5所述的方法，其特征在于，所述方法还包括：
9.一种
10.一种电子设备，其特征在于，包括处理器(21)、存储器(25)、用户接口(23)及网络接口(24)，所述存储器(25)用于存储指令，所述用户接口(23)和网络接口(24)用于给其他设备通信，所述处理器(21)用于执行所述存储器(25)中存储的指令，以使所述电子设备(2)执行如权利要求1-8任意一项所述的方法。
...【技术特征摘要】
1.一种网页端3d场景内资源展示页面动态修改方法，其特征在于，所述方法包括：
2.如权利要求1所述的方法，其特征在于，所述使所述html元素基于延时渲染后的3d场景页面进行3d变形，以形成与canvas画布对应的可变html元素，具体包括：
3.如权利要求2所述的方法，其特征在于，所述对所述第一投影进行三维视点转换，以获取与所述canvas画布对应的所述第二投影之后，还包括：
4.如权利要求2所述的方法，其特征在于，所述对所述第一投影进行三维视点转换，以获取与所述canvas画布对应的所述第二投影，具体包括：
5.如权利要求1所述的方法，其特征在于，所述接收用户输入的播放指令，以获取与所述播放指令对应的资源运行页面，具体包括：
6.如权利要求5所述的方法，其特征在于，所述接收用户输...
【专利技术属性】
技术研发人员：杨德江，杜英豪，刘洪顺，
申请(专利权)人：中教畅享北京科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。