三维应用的响应式设计探索

2019-08-03 本文已影响77人 vtxf

前言

本文介绍我们在三维应用中响应式设计的思路和应用场景。

MVVM的特点

前端技术近些年高速发展，React、Vue等MVVM类JS库使用起来极其方便，获得了极为广泛的应用。

MVVM架构把View所涉及的复杂的交互逻辑进行封装屏蔽，用户只需要关心ViewModel，并以此作为对外使用的接口。

下图展示的是一个vue的简单使用示例。可以看到，一旦View和ViewModel之间的关联代码写好以后，客户需要操作的就是简单的调用app2.app2Alpha = 0.8。当然这里举的例子相对简单。实际项目中可能View中包含复杂的界面逻辑，也可以通过一个简单的属性设置来完成对View的改变。

MVVM架构

响应式属性

上图中，为何通过app2.app2Alpha这样一个属性的设置，就能让View产生变化？

实际上这里的app2Alpha是一个响应式属性，它一旦发生变化，Vue就会追踪其变化，修改Virtual DOM，并最终让View发生改变。

而这个追踪属性变化的过程，完全由Vue内部实现。客户并不需要关心。这样的设计大大减轻了前端开发者对交互逻辑的控制，少写了很多容易出问题的代码。

这个设计很帅，我们希望在三维应用中也能使用这种方式。

三维应用中使用MVVM

我们尝试对三维应用进行改造。对于三维应用程序来说，其实也可以看成View和ViewModel两个部分。View是最终显示的三维窗口，而ViewModel则是对应的响应式属性。为了加以区分，这里把三维应用的View写成3DScene，ViewModel写成3DSceneModel。如下图所示。

双MVVM架构

经过这样的改造以后，就可以通过简单的属性值设置，来修改三维窗口的样子了。比如执行imagery.alpha = 0.5这个语句，就会让地球上的影像变得很淡。另外一点imagery.alpha属性的变化，可以被外界感知。通过XE.MVVM.bind这个方法，将imagery.alpha和app2.app2Alpha绑定在一起，imagery.alpha的变化就会相应地影响app2.app2Alpha，进而让View也跟着一起变化。

image.png

我们继续对以上方式进行扩展，View可以是多个。可以让多个View通过绑定imagery.alpha。效果如下图所示。

绑定示意图

绑定示意图-简图

这样做的好处是只要任意一处view的属性被修改，那么其他绑定的属性都会发生变化。比如在网页中拖动滑动条，就会触发app1Sub.imageryAlpha发生变化，然后它的变化会引起imagery.alpha跟随变化，这样三维场景中的地球影像的透明度会跟着变化。同时imagery.alpha的变化，会触发app2.app2Alpha和app3.app3Alpha也跟着一起变化。