使用骨骼动画技术可以将网格的顶点分配给若干骨头，通过给骨头设定关键帧和父子关系，可以赋予网格高度动态并具有传递性的变形 效果。这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼动画编辑和模型生成工具。
一、显示效果：
1、访问https://ljzc002.github.io/Bones/HTML/CstestSpaceCraft2.html查看测试页面：
屏幕右侧的Babylon.js场景中是一个初始网格。
2、在Chrome浏览器控制台输入“ImportMesh("","../ASSETS/SCENE/","SpaceCraft.babylon")”，载入之前编写的一个宇宙飞船模型，关于这个模型的编写方式可以参考https://www.cnblogs.com/ljzc002/p/9473438.html
3、点击“新增骨骼”按钮，会在左侧建立一个可折叠的骨头编辑区（标签的类名是div_flexible），一个编辑区分为六行，每行包括四个文本框。
4、在第一行的四个文本框中输入-1、0、0、0，点击这个编辑区的刷新按钮，将在场景中建立一个朝向(-1,0,0)方向距原点距离为0的平面，所有包含平面正面（或平面上）顶点的线会被标为绿色（“正面”可以理解为从平面出发，沿着平面法线方向移动可以到达这个顶点，数学上可以说“这个顶点到平面的距离为正”）
当顶点的数量较多时，上述计算会花费一定时间，控制台里会打印出当前的查找进度。
在编辑区的第二行输入0、1、0、-3(表示沿法线的反方向到原点的距离为3)会建立另一个平面，同时处于两个平面正面的顶点会被选中，最多可以建立6个这样的区分平面。
5、选定这些顶点作为一号骨头后，点击“编辑关键帧”按钮将打开一号骨头的关键帧编辑对话框
其中父骨骼索引设为0号骨骼，0号骨骼可以理解为模型的原点，在整个动画过程中保持不变；关节点坐标由三个文本框组成，表示这一块骨头和父骨头的连接点的位置，这里一号骨头的关节点设为(0,0,0)。下面的文本框里是表示关键帧矩阵的脚本，解读规则为“帧数@矩阵对象#帧数@矩阵对象”，其中的ms.xx是简写的Babylon.js矩阵构造函数，其对应关系如下：（代码位于CookBones.js文件中）
1 //在这里写对关键帧脚本的处理和骨骼模型导出 2 //定义一种简单的脚本简化输入 3 var ms={}//MatrixScript 4 ms.rx=function(rad)//绕x轴旋转 5 { 6 return BABYLON.Matrix.RotationX(rad); 7 } 8 ms.ry=function(rad)//绕y轴旋转 9 { 10 return BABYLON.Matrix.RotationY(rad); 11 } 12 ms.rz=function(rad)//绕z轴旋转 13 { 14 return BABYLON.Matrix.RotationZ(rad); 15 } 16 ms.m1=function(){//生成一个单位阵 17 return BABYLON.Matrix.Identity(); 18 } 19 ms.sc=function(x,y,z)//缩放,因为做了矩阵标准化，在现在的场景里缩放不会起作用！！ 20 { 21 return BABYLON.Matrix.Scaling(x,y,z); 22 } 23 ms.tr=function(x,y,z)//位移 24 { 25 return BABYLON.Matrix.Translation(x,y,z); 26 } 27 //0@ms.m1()#120@ms.rx(2)#240@ms.m1() 28 ms.fa=function(arr)//从数组生成矩阵 29 { 30 return BABYLON.Matrix.FromArray(arr); 31 } 32 33 var vs={}//VectorScript 34 vs.tr=function(vec3,matrix)//对向量进行矩阵变化 35 { 36 return BABYLON.Vector3.TransformCoordinates(vec3.clone(),matrix); 37 } 38 var pi=Math.PI;