HTML5Canvas3D压力器反序列化简介
Canvas这个东西真的很厉害，特别是当你想要做3D图形和动画的时候。今天，就给大家讲讲怎么用Canvas操作JSON文件来改变3D场景。这种技巧在日常使用里特别好用，比如你正在开发一款编辑器，需要拖动和改变图元，这时候就能直接看到数据的变化了。
别急，我马上就给你展示一下怎么做到！我会把每个环节都讲得很清楚，从搭好舞台到摆弄好模型，最后再用JSON文件操控整个3D环境。看了这个例子，你就能发现HTML5Canvas的3D图形处理能力有多牛逼！
搭建场景
首先得有一个基本的3D场景，分成了三个部分：左边、上面右边还有下面那个角。用HT的SplitView就可以把场景分好，这样页面看起来就会更整洁。最后，把分割完的元件加到HTML的body里面就行了。
这一步特别重要，因为弄清楚场景布局，才能继续后面的工作。有了HT的这些工具，咱们就能轻轻松松搞定，为之后添加和处理图元铺好路！
添加图元
//场景搭建 dataModel = new ht.DataModel();//数据容器 g3d = new ht.graph3d.Graph3dView(dataModel);//3D 组件 propertyView = new ht.widget.PropertyView(dataModel);// 属性组件 formPane = new ht.widget.FormPane();//表单组件 rightSplit = new ht.widget.SplitView(propertyView, formPane, 'v', 100);//分割组件 new ht.widget.SplitView(g3d, rightSplit, 'h', 0.65).addToDOM();
赶紧上手！咱们要给这个场景加入各种小东西，比如一些3D的小人儿。处理这种情况，只需要利用ht.Default.parseObj这个程序，它能够帮我们把那些obj和mtl文件里头的小人儿们都弄出来，然后放到咱们的场景里面去。
添加图元时，咱们能给它们配上多种属性跟样式，甚至还能加上小标签当教材。这样子做既能使示现场景五彩斑斓，又能让后面的操作更顺手、简单明了。
解析和注册3D模型
//添加模型
var params = {center: true};//JSON格式控制参数 传入 ht.Default.parseObj 函数中
var modelMap = ht.Default.parseObj(meter_obj, meter_mtl, params);//解析obj和mtl文件， 解析后返回的map结构json对象中，每个材质名对应一个模型信息
这个例子里头，咱们只需要改变”指针”跟底下那个”开关”这两块，所以就得一个个找出来，然后输进去才能搞定。
注册3D模型真的很有用，只需要将shape3d设成已注册过的3D模型名字，想要在游戏里用哪个就用哪个。再也不用麻烦地重新加载解析了！
创建节点并设置3D模型
好，我们来新建几个节点，把它们设定成我们之前加入的那个3D模型！操作起来特别直接明了，只要轻松设个参数，就能在场景里瞧见我们心仪的那款3D模型。
var array = [];
for(var name in modelMap){
var model = modelMap[name];//modelMap 中的模型
array.push(model);
if(name === 'pointer'){//obj 文件中的一个模型 名称为 pointer
model.mat = {//矩阵变化参数，可对模型进行矩阵变化后导入
func: function(data){
var start = Math.PI * 0.736,
range = Math.PI * 1.49,
angle = start - range * data.a('meter.value') / 4;//动态获取了 meter.value 的值
return ht.Default.createMatrix([//将一组JSON描述的缩放、移动和旋转等操作转换成对应的变化矩阵
{ t3: [0, -82.5, 0] },
{ r3: [0, 0, angle] },
{ t3: [0, 82.5, 0] }
]);
}
};
}
if(name === 'switch'){//obj 文件中的一个模型 名称为 switch
model.mat = {
func: function(data){
return ht.Default.createMatrix([
{ t3: [0, 48.5, 0] },
{ r3: [0, 0, data.a('meter.angle')] },
{ t3: [0, -48.5, 0] }
]);
}
};
model.color = {
func: function(data){
if(data.a('meter.angle')){
return 'rgb(186, 0, 0)';
}else{
return 'black';
}
}
};
}
}
ht.Default.setShape3dModel('meter', array);//注册3D模型，请参考modeling建模手册 第一参数为模型名称，第二参数为 JSON 类型对象
这样一来，我们能更快地给场景加3D模型和修改它们，让干活儿更轻松高效！
视线效果设置
咱们就简单改变下eye和center的数值，让画面看起来更立体、有趣！这么一调整，场景立马变得真实多了！
for(var i=0; i我们在这边为节点添加两个标注，作为文字提示，可以通过重载 getNote/getNote2（HT 中一个节点支持双标注，所以提供了 note2 第二个标注） 函数重载 note 的命名方法，当然 HT 中其他类似的文字提示也可以通过这种途径来改变文字的显示信息，这里我们通过数据绑定获取 meter.value 以及 meter.angle 两个属性的动态数据：
g3d.getNote = function(data){//重载 getNote 方法 return 'Value:' + data.a('meter.value').toFixed(2); }; g3d.getNote2 = function(data){ var value = Math.round(data.a('meter.angle') / Math.PI * 180);//获取了 meter.angle 属性，数据实时变化 return value ? 'Angle:' + value : 'Switch is off'; };调了这些参数后，你能享受到更真实的视觉效果，身临其境般的感觉更强烈！
formPane表单面板的解析
我们最后来说说右边下面那个“formPane”表格！用“addRow”这个小工具，可以轻松地在表里加几行。这次我们就做个实验，给表添2行出来，前1行再分2份。
这个表单让我们能轻松调整属性栏里的值，还能用JSON文件直接查看3D场景变动，既简单明了又快捷省事！
var oldEye = g3d.getEye().slice(0), oldCenter = g3d.getCenter().slice(0), newEye = [200, 300, 650], newCenter = [0, params.rawS3[1]/2, 0]; ht.Default.startAnim({//动画 duration: 1000,//持续时间 easing: function(t){ //动画缓动函数，默认采用 ht.Default.animEasing return (t *= 2)整个左边实现完成~接着该实现右上部分，属性值的显示以及控制，我们总共添加了四个属性：名称、meter.value、meter.angle以及旋转 rotation，通过数据绑定操作属性栏中的值来改变 3D 模型中的显示状态，数据绑定我们通过获取 accessType 以及 name 中的值来配合调用到这个属性：
propertyView.addProperties([//用 json 的数组参数方式批量添加属性信息 { name: 'name',//属性名 这里不用设置 accessType，因为 accessType 默认的值为 setName/getName 这种格式 editable: true//设置为可编辑状态 }, { name: 'meter.value',//用于存取name属性，该属性结合accessType属性最终实现对Data属性的存取 accessType: 'attr',//通过 getAttr/setAttr 获取或设置属性值 editable: true, slider: { min: 0, max: 4 } }, { name: 'meter.angle', accessType: 'attr', editable: true, formatValue: function(value){//一般用于将数字转换更易读的文本格式 return Math.round(value / Math.PI * 180); }, slider: { min: 0, max: Math.PI, step: Math.PI/180*5,//每移动一下滑动的步进 getToolTip: function(){//设置鼠标放在图元上的文字提示 return Math.round(this.getValue() / Math.PI * 180); } } }, { name: 'rotation', editable: true, formatValue: function(value){ return Math.round(value / Math.PI * 180); }, slider: { min: -Math.PI, max: Math.PI, step: Math.PI/180*5, getToolTip: function(){ return Math.round(this.getValue() / Math.PI * 180); } } } ]);总结与思考
这篇文章告诉你怎么用HTML5Canvas做一个3D场景，一步一步教你，保证你看得懂！先是建场景，然后加元素，最后用JSON改动3D场景，包会！
看看这个例子，你就会知道HTML5Canvas在3D图形处理方面到底有多牛了。虽然我们只是刚开始研究这个，但这只是HTML5Canvas潜力的冰山一角。如果你有什么看法或者问题，欢迎随时在评论区和大家分享。让我们一起来挖掘这个神器的更多可能性！
formPane.addRow([//向表单组件中添加行 { id: 'export', button: {//按钮 label: 'Export JSON', onClicked: function(){//点击时触发的函数 var json = dataModel.serialize(); formPane.v('textArea', json); } } }, { button: { label: 'Import JSON', onClicked: function(){ dataModel.clear();//清空数据模型 dataModel.deserialize(formPane.v('textArea'));//将获取到的 textArea 中的数据反序列化，是下面一行的 id 值 } } } ], [0.1, 0.1]); //最后的参数是这行的宽度分配比例 小于1的值为比例，大于1为实际值 formPane.addRow([ { id: 'textArea', textArea: { } } ], [0.1], 0.1);
评论0