HT图形组件设计之道（四）

在《HT图形组件设计之道（二）》我们展示了HT for Web在2D图形矢量的数据绑定功能，这种机制不仅可用于2D图形，HT的通用组件甚至3D引擎都具备这种数据绑定机制，此篇我们将构建一个3D飞机模型，展示如果将数据绑定机制运用于3D模型，同时会运用到HT的动画机制，以及OBJ 3D模型加载等技术细节，正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。

首选我们需要一个飞机模型，采用HT for Web构建3D模型可采用API组合各种基础模型的方式，但今天我们将采用读入OBJ的方式，毕竟网上已有很多不错的现成模型素材，搜查了一番后我在www.turbosquid.com选择了的这款免费的飞机模型，这个飞机模型是3dsmax格式，飞机模型是一体化的，由于我还需要控制机头的螺旋桨，因此我用3dsmax做了点改造，将螺旋桨分离了机身独立作为一个材质，同时导出成HT for Web可读取的OBJ格式，接下来就没美工设计师什么事了，剩下就全靠我们程序员自己的代码手艺活了。

读取OBJ文件一般采用AJAX的方式远程加载，这对于喜欢纯前端的程序员来说很不爽，开发或演示个例子还得启服务，我喜欢本地文件打开就能跑不受跨域安全限制，因此我们需要将OBJ的文本信息放在在HTML或者JS代码中。解决这类问题有很多种方式，例如对于WebGL开发来说vertex shader和fragment shader代码同样面临这个问题，一种方式是写成一堆的string的array然后进行join的方式，另一种方式是增加和的自定义类似script块，然后读取相应DOM元素的textContent来获取文本内容。

但这两种方式都不适合OBJ内容，因为OBJ内容太长，采用数组方式对于成千上万行的OBJ文件行行加引号是不可思议的工作量（当然你可以再写个工具干这事），而采用