babylon.js魔方建模

本文主要内容可能和babylon并无太紧密的关联， 主要是对旋转（ 空间想象力 ）的练习。 本来想写个魔方练练，就想着顺便练练baboly. 结果反正是最重要的交互逻辑没有实现。

标题已经说明了本文的主题是建模，也就是说，是可以用建模软件来替代这部分的代码实现。不过，从性能上说，肯定是直接代码顶点实现要好些。

关于拧转魔方

之前想到一个思路，就是每次触发转动时其实，就要知道转动的那一层，把八个块都添加到中间的chidren里，这样就可以一起转动了。缺点就是要能判断开始和结束，每次转动开始就整体化，结束就把八个块再移回去，似乎，还不如直接用改变旋转中心的办法。

开始建模

魔方的组成

我是要做一个魔方，因此，常规的立方体并不适用，因为需要每个面都有独立的颜色，也许用立方体纹理可以解决，但是合成这个天空盒就很麻烦。 直接用多个平面拼凑吧， 这样最少可以减少一半的面。

实际上 ，魔方的每一小块最多就只会显示三个面，其余的面看不到，就可以直接认为没有，那我们就可以偷工减料。 现实的魔方也是这样的，不过，这里可以比它更省

一个魔方小块，实际上就只有三种，拆过魔方的都知道。 没拆过的，现在你也会知道了。

代码接之前的初次使用babylon.js

八个顶角

先来做顶角的类。我这里直接用普通函数，因为不知道babylonjs的分组是怎么做的，我直接用Mesh这个类。

默认是 顶层的 左上角。 那么我们就需要三个面， 上面， 左面和后面。这个函数应该让外部传入每个面的颜色。 至于最后一个参数，是否是底层。是因为遇到麻烦了。

左手系的问题是在这个过程中发现的。 这里，假装我已经知道是左手系，那么想要换成右手系，就直接z取反即可。 用plane通过旋转变换以及平移变换得到一个角，其他的七个角都可以通过一定的旋转变换得到。 我之前确实是这么想的。但是，实际做起来有点问题。

/**
 * 八个角作为角来说只需要三个面 这里以上面的左上角为默认
 */
let id=0 ;
function createCornerBox(colorUp:Color3 , colorLeft:Color3, colorBack:Color3,down = 0 ){ let group= new Mesh('p'+id);let mat= new StandardMaterial('sd'+id) ;let upMat = mat, leftMat = mat.clone('left'+id), backMat = mat.clone('back'+id) ;upMat.diffuseColor= colorUp ;leftMat.diffuseColor = colorLeft ;backMat.diffuseColor = colorBack;const upFace = MeshBuilder.CreatePlane('upF'+id) ;upFace.material = upMat ;upFace.rotation.x = PI*(.5 + down);// babylon的旋转方向是反着来的？upFace.position.y=.5+down ;const leftFace =M