前言
本文介绍我们在三维应用中响应式设计的思路和应用场景。
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也跟着一起变化。
image.png
甚至，我们可以直接在控制台输入imagery.alpha = 0.5，这样的修改会自动同步至各处。而这样的操作，仅仅需要一个bind即可搞定。
响应式属性自动跟踪
总结
这里只是通过一个透明度属性的设置，来对响应式属性做了一个简单的介绍。实际应用中，一个简单的响应式属性可以指向一个复杂的交互逻辑或者某个复杂的异步计算处理，可以极大地降低前端开发者进行三维开发的门槛。
我们自己基于Cesium做了一套用于开发三维应用的UI样板程序，并把它应用到了CesiumLab程序中。代码在这里：https://github.com/cesiumlab/XbsjEarthUI。有兴趣的读者可以一试。
XbsjEarthUI
欢迎关注 Cesium实验室 ，QQ群号：830157717。
QQ群
网友评论