本文主要内容可能和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