[发明专利]一种Web前端主流框架三维操作避免卡顿的方法

说明书

本发明提出了一种Web前端主流框架三维操作避免卡顿的方法，包括以下步骤：页面组件初始化加载渲染，若不是三维渲染，主进程渲染，若渲染成功，则将数据存储，确认是否传送本进程的数据给三维进程，若需要显示三维模型，三维进程接收到主进程发送的数据，更新dom节点；否则，当数据改变时，更新dom节点。若是三维渲染，则三维进程渲染，若渲染成功，则将数据存储，确认是否传送本进程的数据给主进程，若不需要显示三维模型，主进程接收到三维进程发送的数据，更新dom节点，否则，将抽离出来的html文件，通过iframe挂在到主进程，完成数据存储，当数据改变时，更新dom节点；该方法能够保证三维操作的更加流畅，灵活。

【技术领域】

本发明涉及Web前端操作三维模型的技术领域，特别是一种Web前端主流框架三维操作避免卡顿的方法。

【背景技术】

目前三维技术three.js，webgl等操作三维模型是需要操作真实document，而web前端等主流框架vue和react框架是virtual DOM(虚拟dom)，导致在vue和react中操作三维模型很不流畅，具体原因如下：

1.vue和react是虚拟dom，而操作三维是需要频繁的操作真实的dom节点，每次操作都会频繁的触发element diff算法对比，造成运算工作量太大，导致操作不流畅，卡顿。

2.使用jquery和html可以解决上述问题，但是由于这两个生态圈没有react和vue完善，而且jquery和html是面向过程思维模式，直接操作dom，会造成页面的重绘和回流，性能和生态圈都不是很好。

因此，解决在vue和react中流畅操作三维的技术方案，是十分必要的，现提出一种Web前端主流框架三维操作避免卡顿的方法。

【发明内容】

本发明的目的就是解决现有技术中的问题，提出一种Web前端主流框架三维操作避免卡顿的方法，能够保证三维操作的更加流畅，灵活。

为实现上述目的，本发明提出了一种Web前端主流框架三维操作避免卡顿的方法，包括以下步骤：

S1.将三维的代码和文件抽离出来用html完成，挂在到vue/react项目的public目录下，然后进入步骤S2；

S2.页面组件初始化加载渲染，确认是否为三维渲染，若不是，进行步骤S3；若是，则进行步骤S4；

S3.主进程渲染，若没有渲染成功，则进入步骤S8；若渲染成功，则将数据存储，再根据场景需要确认是否传送本进程的数据给三维进程，若需要显示三维模型，则进入步骤S6；否则，当数据改变时，更新dom节点；

S4.三维进程渲染，若没有渲染成功，则进入步骤S10；若渲染成功，则将数据存储，再根据场景需要确认是否传送本进程的数据给主进程，若不需要显示三维模型，则进入步骤S5，否则，将抽离出来的html文件，通过iframe挂在到主进程，完成数据存储，当数据改变时，直接更新dom节点；

S5.判断主进程操作是否关闭页面，若关闭，进入步骤S10；否则，进入步骤S6；

S6.主进程接收到三维进程发送的数据，更新dom节点；

S7.判断三维进程操作是否关闭页面，若关闭，进入步骤S10，否则，进入步骤S8；

S8.三维进程接收到主进程发送的数据，直接更新dom节点；

S9.主进程/三维进程操作dom节点，改变数据时，判断是否去更新dom节点；否则不更新；

S10.页面销毁关闭。

作为优选，步骤S3、S6、S9中，当数据改变时，通过diff算法更新dom节点。