最终demo -> 3d魔方

  体验方法:

  • 浮动鼠标找到合适的位置,按空格键暂停
  • 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后放开,比如下图:

【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP(鼠标点击1处,然后一直移动到2处松开,中间一行的3*3模块绕图示方向发生转动)

  • 按空格键,魔方恢复转动,继续寻找下一个要翻动的目标

  示意图如下(请尽量使用chrome):

【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP

  

正方体绘制回顾

  Canvas之蛋疼的正方体绘制体验 说到了如何用canvas在画布上绘制三维效果的正方体,并且最终给出了一个多正方体的demo ->多正方体

  具体的过程可以参照前文,这里简要的再做个概括。

  代码定义了四个对象,分别是garden(场景)、cube(正方体)、face(面)、ball(点),从属关系如下:【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP

  而魔方demo中,一个场景有27个正方体,每个正方体有6个面和8个点,每个面有4个点;每帧的渲染中先根据cube的体心排序(前文中说了这不是最佳方案),然后根据排序后的结果绘制每个cube的可见面。归根结底,每帧的渲染就是对每个正方体8个点的渲染!

  有了这部分经验,绘制一个无交互的魔方demo就可以手到擒来了 -> 无交互魔方

  无交互魔方demo和前面的多正方体demo最大的区别就是面的颜色,其实很简单,在初始化的时候可以传入一个color数组,比如这样:

// 红  橙  蓝  绿  黄  白
//  0  1   2   3   4   5
window.colors = ['#ff0000', '#ff6600', '#0000ff', '#00ff00', '#ffff00', '#ffffff'];
var color = [
  // 第一排
  [0, 5, 5, 3, 5, 5],
  [0, 5, 5, 5, 5, 5],
  [0, 2, 5, 5, 5, 5],
  [0, 5, 5, 3, 5, 5],
  [0, 5, 5, 5, 5, 5],
  [0, 2, 5, 5, 5, 5],
  [0, 5, 5, 3, 5, 4],
  [0, 5, 5, 5, 5, 4],
  [0, 2, 5, 5, 5, 4],

  // 第二排
  [5, 5, 5, 3, 5, 5],
  [5, 5, 5, 5, 5, 5],
  [5, 2, 5, 5, 5, 5],
  [5, 5, 5, 3, 5, 5],
  [5, 5, 5, 5, 5, 5],
  [5, 2, 5, 5, 5, 5],
  [5, 5, 5, 3, 5, 4],
  [5, 5, 5, 5, 5, 4],
  [5, 2, 5, 5, 5, 4],

  // 第三排
  [5, 5, 1, 3, 5, 5],
  [5, 5, 1, 5, 5, 5],
  [5, 2, 1, 5, 5, 5],
  [5, 5, 1, 3, 5, 5],
  [5, 5, 1, 5, 5, 5],
  [5, 2, 1, 5, 5, 5],
  [5, 5, 1, 3, 5, 4],
  [5, 5, 1, 5, 5, 4],
  [5, 2, 1, 5, 5, 4],
];

  初始化每个cube时多传入一个参数,这样就能实现你要的颜色了。

问题的关键

  如何交互,如何实现玩家想要的3*3模块的旋转才是问题的关键。

  我最终想到的是像demo一样选择两个相邻的正方体,然后一个监听mousedown事件,另一个监听mouseup事件,表面看上去,两个有顺序的正方体似乎能确定了那个想要旋转的3*3模块了(其实不然)。而在寻找3*3模块之前,我们首先要解决的是如何确定这两个正方体。

  • 两个正方体的确定

  因为我们在画布上展现出来的图案其实都是h5的原生api绘上去的,并不像dom一样能写个事件监听。如何得到这两个正方体,思来想去我觉得唯一方法就是点的判断。

  遍历27个正方体在二维空间的6*27个面,判断鼠标点击是否在面内。这里可以把场景内的cubes倒排,因为cubes在每帧中都要根据体心重新排序,越后面的越先绘制,而鼠标点击的cubes按多数情况下应该是离视点近的,所以可以从后到前遍历,这样可以加快寻找速度;而遍历一个正方体6个面时,不可见面也不用判断。这个问题的最后就是二维系上一个点在一个凸四边形内的判断。具体可以参考 -> 判断一个点是否在给定的凸四边形内

  我用了博文的第一种方法。

【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP

  由于数学能力的欠缺,一开始我把叉积当做点积了,debug了良久才发现。

  鼠标监听:

document.addEventListener('mousedown', function(event){
  window.rotateArray = [];
  var obj = canvas.getBoundingClientRect();
  // 鼠标点击的地方在canvas上的(x,y)坐标
  var x = event.clientX - obj.left;
  var y = event.clientY - obj.top;
  var v = new Vector2(x, y)
  var ans = getCubeIndex(v);
  if(ans)
    window.rotateArray.push(ans);
});

  getCubeIndex函数就是遍历27个cube和每个cube中6个面的一个两层循环。

  点在凸四边形的判断:

// 判断点m是否在顺时针方向的a,b,c,d四个点组成的凸四边形内
function isPointIn(a, b, c, d, m) {
  var f = b.minus(a).dot(m.minus(a));
  if(f <= 0) return false;

  var f = c.minus(b).dot(m.minus(b));
  if(f <= 0) return false;

  var f = d.minus(c).dot(m.minus(c));
  if(f <= 0) return false;

  var f = a.minus(d).dot(m.minus(d));
  if(f <= 0) return false;
  return true;
}

  至此,2个被点击的正方体在27个cube中的位置已经找出。

  • 3*3模块的确定

  接着需要寻找由两个正方体确定的3*3模块。

  我们知道,玩魔方每次旋转的肯定是个3*3的模块,而这样的模块在一个魔方中有3*3=9个。而2个相邻的正方体能不能确定唯一的3*3模块?答案是不能的,如下图:

【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP

  上图1和2两个正方体确定了图示的两个3*3模块。其实如果两个正方体的位置是在魔方的棱上,那么就能确定两个。我们暂时不管它,一个也好,两个也罢,先把它找出来。

  怎么找?最开始我想到的是维护一个三维数组,初始化给每个cube一个index值,值和三维数组值相对应,每次魔方旋转时同时改变三维数组的值,这样找到这个3*3的模块就是遍历三维数组的三个维度,找到任一维度的3*3=9个正方体中如果有包含点击得到的两个正方体,则为一组解。后来被我放弃了,三维数组的维护实在是太麻烦了。

  最后我用深度搜索来解,寻找一条长度为8的闭合回路。已经确定了前两个值,因为这条闭合回路不会经过魔方最中心的那个正方体,所以每个点的下一个点的取值最多只有4种情况,最大复杂度也就O(4^6),完全在可控范围之内。而且搜过的点标记掉不用继续搜索,答案几乎秒出。

  深度搜索如下:

function dfs(index) {
  var cubes = garden.cubes;
  if(index === 8) {
    var dis = cubes[window.rotateArray[0]].pos3.getDistance(cubes[window.rotateArray[7]].pos3);
    if(Math.abs(dis - 60) > 10)
      return;

    // 判断8个点在一个平面
    var cubes = garden.cubes;
    var a = cubes[window.rotateArray[1]].pos3.minus(cubes[window.rotateArray[0]].pos3);
    var b = cubes[window.rotateArray[7]].pos3.minus(cubes[window.rotateArray[6]].pos3);

    // 找一个面的法向量
    var v = undefined;
    for(var i = 0; i < 27; i++) {
      var c = cubes[i].pos3;
      if(a.isPerpTo(c) && b.isPerpTo(c)) {
        v = c;
        break;
      }
      if(i === 26 && v === undefined) return;
    }

    // 判断任意相邻向量是否垂直法向量
    for(var i = 0; i < 7; i++) {
      var a = cubes[window.rotateArray[i]].pos3.minus(cubes[window.rotateArray[i + 1]].pos3);
      if(!a.isPerpTo(v)) return;
    }

    ////////////////////////////////////////////////
    // 如果是最前面的面,return
    var zz = 0;
    for(var i = 0; i < 8; i++)
      zz += cubes[window.rotateArray[i]].pos3.z;
    zz /= 8;
    if(zz < -40) return;

    // 如果是俄罗斯方块那种类型
    var vv = new Vector3();
    for(var i = 0; i < 8; i+=2) {
      vv.x += cubes[window.rotateArray[i]].pos3.x;
      vv.y += cubes[window.rotateArray[i]].pos3.y;
      vv.z += cubes[window.rotateArray[i]].pos3.z;
    }
    vv.x /= 4;
    vv.y /= 4;
    vv.z /= 4;
    var flag = false;
    for(var i = 0; i < 27; i++) {
      var vvv = cubes[i].pos3
      if(vv.getDistance(vvv) > 5) continue;
      flag = true;
      break;
    }
    if(!flag) return;

    for(var i = 0; i < 8; i++) {
      window.isFindRoute = true;
      window.rotateFinalArray[i] = window.rotateArray[i];
    }
    return;
  }

  if(window.isFindRoute) return;

  for(var i = 0; i < 27; i++) {
    if(window.hash[i]) continue;
    // 魔方中点不找,待会应该判断魔方中点,不应该直接赋值
    if(cubes[i].pos3.isEqual(new Vector3())) continue;
    var front = window.rotateArray[index - 1];
    var dis = cubes[front].pos3.getDistance(cubes[i].pos3);
    if(Math.abs(dis - 60) > 10) continue;
    window.rotateArray[index] = i;
    window.hash[i] = true;
    dfs(index + 1);
    window.hash[i] = false;
  }
}

  我是先找一条长度为8的闭合回路,找到后再进行判断:(其实边找边判断效率会更高)

  1、判断8个点是否在同一个面上。 可以任选两条不平行的向量做分别垂直于这两条向量的法向量,如果这8个点成面,则该法向量垂直于平面内两点组成的任意向量。

  2、如果是最前面的面,则return。 这个判断有点坑爹,先看下图:

【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP

  如果操作的是1和2两个正方体,得到两条回路如图。我们想要的应该是上面那个3*3模块的操作,剔除的是前面一块,这里我根据平均的z值进行判断,如果z太小(距离视点太近,认为是前面一块),则剔除。其实这是不准确的,所以demo有时会出错,而这点也是操作正方体体心无法解决的,如果要解决,程序复杂度可能要上升一个级别,要精确到对面的判断。所以这里采用了模糊判断。这也是最前面说的有两条回路如何选择的方法。

  3、找到了同一平面的闭合回路,但是不符合要求,如下:

【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP

  因为闭合回路所组成的3*3模块的中心肯定是魔方上某正方体的体心,这里就根据此近似判断。

  至此,我们得到了需要翻转的3*3=9个正方体。

  • 旋转轴的确定

  得到了需要翻转的正方体,最后只需要得到翻转轴即可。

  我们已经得到绕x轴和y轴旋转后的坐标变化,那么是否有绕任意轴的坐标变化公式呢?luckily,答案是有的 -> 三维空间里一个点绕矢量旋转后的新的点的坐标

  【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP

  这样就好办了,我们可以获取需要翻转面的法向量,然后单位化即可。而这条法向量其实肯定经过27个正方体中某个的体心,遍历即可。但是一个面的法向量有两条,还好我们获取的闭合回路是有方向的,因为翻转的角度肯定是90度,我们可以知道3*3模块中某个正方体翻转90度后的实际位置,其实就是闭合回路往前两个的正方体的位置;我们获取的任一法向量,将值代入函数中进行计算,选择某个正方体,如果该正方体绕该法向量旋转90度后得到的值就是正确的位置,即这条法向量为正解。(实际上另一条需要旋转270度)

  于是我们写成一个rotateP函数:

rotateP: function() {
  if(this.cube.isRotate) {
     this.cube.index++;

    // 一个点达到60改变isRotate值?应该8个点全部达到吧
    if(this.cube.index === 480) {
      this.cube.isRotate = false;
      this.cube.index = 0;
    }

    var c = Math.cos(this.cube.garden.angleP);
    var s = Math.sin(this.cube.garden.angleP);

    // (x,y,z)为经过原点的单位向量
    var x = this.cube.rotateVector.x;
    var y = this.cube.rotateVector.y;
    var z = this.cube.rotateVector.z;
    var new_x = (x * x * (1 - c) + c) * this.pos3.x + (x * y * (1 - c) - z * s) * this.pos3.y + (x * z * (1 - c) + y * s) * this.pos3.z;
    var new_y = (y * x * (1 - c) + z * s) * this.pos3.x + (y * y * (1 - c) + c) * this.pos3.y + (y * z * (1 - c) - x * s) * this.pos3.z;
    var new_z = (x * z * (1 - c) - y * s) * this.pos3.x + (y * z * (1 - c) + x * s) * this.pos3.y + (z * z * (1 - c) + c) * this.pos3.z;
    this.pos3.reset(new_x, new_y, new_z);
  } 

  这样在每帧的渲染中,需要旋转的cube的点的坐标的位置也会随着rotateP函数改变,于是出现旋转效果。

总结

  完整代码:

 <!DOCTYPE html>
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title> 3d魔方 </title>
     <script>
       window.onload = function() {
         var canvas = document.getElementById('canvas');
         var ctx = canvas.getContext('2d');
         var garden = new Garden(canvas);
         window.garden = garden;

         // 0红 1橙 3蓝 4绿 5黄 6白 // face面绘制顺序 前 右 后 左 上 下
         window.colors = ['#ff0000', '#ff6600', '#0000ff', '#00ff00', '#ffff00', '#ffffff'];

         // 记录鼠标操作的两个cube的index值
         window.rotateArray = [];
         window.isStill = false;

         // 设置二维视角原点(一般为画布中心)
         garden.setBasePoint(500, 250);

         var color = [
           // 第一排
           [2, 5, 5, 5, 5, 5],
           [0, 5, 5, 5, 0, 5],
           [2, 0, 5, 5, 4, 5],
           [0, 5, 5, 4, 5, 5],
           [4, 5, 5, 5, 5, 5],
           [5, 3, 5, 5, 5, 5],
           [3, 5, 5, 5, 5, 0],
           [0, 5, 5, 5, 5, 3],
           [1, 4, 5, 5, 5, 2],

           // 第二排
           [5, 5, 3, 5, 1, 5],
           [5, 5, 3, 5, 2, 5],
           [5, 5, 3, 5, 0, 5],
           [5, 5, 5, 0, 5, 5],
           [5, 5, 5, 5, 5, 5],
           [5, 1, 1, 5, 5, 5],
           [5, 5, 0, 3, 5, 4],
           [5, 5, 5, 5, 5, 3],
           [5, 1, 3, 5, 5, 3],

           // 第三排
           [5, 5, 3, 2, 4, 5],
           [5, 5, 1, 5, 4, 5],
           [5, 2, 0, 5, 4, 5],
           [5, 5, 1, 3, 5, 5],
           [5, 5, 1, 5, 5, 5],
           [5, 2, 3, 5, 5, 5],
           [5, 5, 1, 4, 5, 5],
           [5, 5, 1, 5, 5, 2],
           [5, 2, 5, 5, 5, 1],
         ];

         var r = 60;
         var num = 0;
         var a = [-r, 0, r];

         // 初始化
         for(var l = 0; l < 3; l++)  // z轴
           for(var j = 0; j < 3; j++) // y轴
             for(var i = 0; i < 3; i++)  { // x轴
               var v = new Vector3(a[i], a[j], a[l]);
               garden.createCube(v, r / 2 - 2, color[num++]); // 初始化cube的index值
             }

         garden.setListener();
         addListener();

         // 渲染
         setInterval(function() {garden.render();}, 1000 / 60);
       };

       function addListener() {
         document.addEventListener('mousedown', function(event){
           window.rotateArray = [];
           var obj = canvas.getBoundingClientRect();
           // 鼠标点击的地方在canvas上的(x,y)坐标
           var x = event.clientX - obj.left;
           var y = event.clientY - obj.top;
           var v = new Vector2(x, y)
           var ans = getCubeIndex(v);
           if(ans)
             window.rotateArray.push(ans);
         });

         document.addEventListener('mouseup', function(event){
           var obj = canvas.getBoundingClientRect();
           // 鼠标点击的地方在canvas上的(x,y)坐标
           var x = event.clientX - obj.left;
           var y = event.clientY - obj.top;
           var v = new Vector2(x, y)
           var ans = getCubeIndex(v);
           if(ans)
             window.rotateArray.push(ans);

           window.isFindRoute = false;
           window.hash = [];
           window.hash[window.rotateArray[0]] = window.hash[window.rotateArray[1]] = true;

           // 保存回路答案
           window.rotateFinalArray = [];
           dfs(2);

           // 计算中间点在cube数组中的位置
           var index = getMiddleCube();
           rotateFinalArray.push(index);

           // 必定是体心指向某个cube中心的一条向量,返回该cube的index
           var index2 = getRotateVector();

           var cubes = garden.cubes;
           for(var i = 0; i < rotateFinalArray.length; i++) {
             cubes[rotateFinalArray[i]].isRotate = true;
             cubes[rotateFinalArray[i]].rotateVector = cubes[index2].pos3.normalize();
           }
         });

         document.onkeydown = function(e) {
           if(e.keyCode === 32) {
             window.isStill = !window.isStill;
           }
         }
       }

       function dfs(index) {
         var cubes = garden.cubes;
         if(index === 8) {
           var dis = cubes[window.rotateArray[0]].pos3.getDistance(cubes[window.rotateArray[7]].pos3);
           if(Math.abs(dis - 60) > 10)
             return;

           // 判断同一平面
           var cubes = garden.cubes;
           var a = cubes[window.rotateArray[1]].pos3.minus(cubes[window.rotateArray[0]].pos3);
           var b = cubes[window.rotateArray[7]].pos3.minus(cubes[window.rotateArray[6]].pos3);

           // 找一个面的法向量,如果8点成面,那么肯定有两条符合的向量
           var v = undefined;
           for(var i = 0; i < 27; i++) {
             var c = cubes[i].pos3;
             if(a.isPerpTo(c) && b.isPerpTo(c)) {
               v = c;
               break;
             }
             if(i === 26 && v === undefined) return;
           }

           // 判断任意相邻向量是否垂直法向量
           for(var i = 0; i < 7; i++) {
             var a = cubes[window.rotateArray[i]].pos3.minus(cubes[window.rotateArray[i + 1]].pos3);
             if(!a.isPerpTo(v)) return;
           }

           // 如果是最前面的面,return
           var zz = 0;
           for(var i = 0; i < 8; i++)
             zz += cubes[window.rotateArray[i]].pos3.z;
           zz /= 8;
           if(zz < -40) return;

           // 如果是俄罗斯方块那种类型
           var vv = new Vector3();
           for(var i = 0; i < 8; i+=2) {
             vv.x += cubes[window.rotateArray[i]].pos3.x;
             vv.y += cubes[window.rotateArray[i]].pos3.y;
             vv.z += cubes[window.rotateArray[i]].pos3.z;
           }
           vv.x /= 4;
           vv.y /= 4;
           vv.z /= 4;
           var flag = false;
           for(var i = 0; i < 27; i++) {
             var vvv = cubes[i].pos3
             if(vv.getDistance(vvv) > 5) continue;
             flag = true;
             break;
           }
           if(!flag) return;

           for(var i = 0; i < 8; i++) {
             window.isFindRoute = true;
             window.rotateFinalArray[i] = window.rotateArray[i];
           }
           return;
         }

         if(window.isFindRoute) return;

         for(var i = 0; i < 27; i++) {
           if(window.hash[i]) continue;
           // 魔方中点不找
           if(cubes[i].pos3.isEqual(new Vector3())) continue;
           var front = window.rotateArray[index - 1];
           var dis = cubes[front].pos3.getDistance(cubes[i].pos3);
           if(Math.abs(dis - 60) > 10) continue;
           window.rotateArray[index] = i;
           window.hash[i] = true;
           dfs(index + 1);
           window.hash[i] = false;
         }
       }

       // 不在同一条直线的两个向量才能确定一个平面
       function getRotateVector() {
         // 垂直于rotate面的任意两条向量
         var cubes = garden.cubes;
         var a = cubes[window.rotateFinalArray[1]].pos3.minus(cubes[window.rotateFinalArray[0]].pos3);
         var b = cubes[window.rotateFinalArray[7]].pos3.minus(cubes[window.rotateFinalArray[6]].pos3);

         // 这里应该有两个
         for(var i = 0; i < 27; i++) {
           var c = cubes[i].pos3;
           // 因为有两个向量,所以通过istrue函数判断是否是答案所要的向量
           if(a.isPerpTo(c) && b.isPerpTo(c) && isTrue(i))
             return i;
         }
       }

       // 判断window.rotateFinalArray里的第0个cube经过90度旋转是否能到达第2个cube的位置,判断体心即可
       function isTrue(index) {
         var cubes = garden.cubes;
         // 旋转向量
         var v = cubes[index].pos3;
         // 单位化
         v = v.normalize();

         var a = cubes[window.rotateFinalArray[0]];
         var c = Math.cos(Math.PI / 2);
         var s = Math.sin(Math.PI / 2);
         // (x,y,z)为经过原点的单位向量
         var x = v.x;
         var y = v.y;
         var z = v.z;
         var new_x = (x * x * (1 - c)+c) * a.pos3.x + (x*y*(1-c)-z*s) * a.pos3.y + (x*z*(1-c)+y*s) * a.pos3.z;
         var new_y = (y*x*(1-c)+z*s) * a.pos3.x + (y*y*(1-c)+c) * a.pos3.y + (y*z*(1-c)-x*s) * a.pos3.z;
         var new_z = (x*z*(1-c)-y*s) * a.pos3.x + (y*z*(1-c)+x*s) * a.pos3.y + (z*z*(1-c)+c) * a.pos3.z;
         var b = new Vector3(new_x, new_y, new_z);

         // 判断旋转后所得的b向量是否和rotateArray[2]相同
         var f = b.isEqual(cubes[window.rotateFinalArray[2]].pos3);
         return f;
       }

       function getMiddleCube() {
         var v = new Vector3();
         var cubes = garden.cubes;
         for(var i = 0; i < 8; i += 2) {
           v.x += cubes[window.rotateFinalArray[i]].pos3.x;
           v.y += cubes[window.rotateFinalArray[i]].pos3.y;
           v.z += cubes[window.rotateFinalArray[i]].pos3.z;
         }

         v.x /= 4;
         v.y /= 4;
         v.z /= 4;
         for(var i = 0; i < 27; i++) {
           if(v.isEqual(cubes[i].pos3))
             return i;
         }
       }

       function getCubeIndex(v) {
         var length = garden.cubes.length;
         var cubes = garden.cubes;
         // 遍历cube,因为经过排序前面的cube先绘,所以倒着判断
         var num = 0;
         for(var i = length -1 ; i >= 0; i--) {
           // 遍历六个面
           for(var j = 5; j>=0; j--) {
             num ++;
             var f = cubes[i].f[j];
             if(f.angle < 0) continue; // 夹角大于90不可见
             // 可见则判断
             var isFound = isPointIn(f.a.pos2, f.d.pos2, f.c.pos2, f.b.pos2, v);
             if(isFound) { // 找到了
               // 越大越晚绘,所以越前面
               return i;
             }
           }
         }
       }

       // 判断点m是否在顺时针方向的a,b,c,d四个点组成的凸四边形内
       function isPointIn(a, b, c, d, m) {
         var f = b.minus(a).dot(m.minus(a));
         if(f <= 0) return false;

         var f = c.minus(b).dot(m.minus(b));
         if(f <= 0) return false;

         var f = d.minus(c).dot(m.minus(c));
         if(f <= 0) return false;

         var f = a.minus(d).dot(m.minus(d));
         if(f <= 0) return false;
         return true;
       }

       // Garden类
       function Garden(canvas) {
         this.canvas = canvas;
         this.ctx = this.canvas.getContext('2d');

         // 三维系在二维上的原点
         this.vpx = undefined;
         this.vpy = undefined;
         this.cubes = [];
         this.angleY = Math.PI / 180 * 0;
         this.angleX = Math.PI / 180 * 0;
         this.angleP = Math.PI / 180 * 1.5;
       }

       Garden.prototype = {
         setBasePoint: function(x, y) {
           this.vpx = x;
           this.vpy = y;
         },

         createCube: function(v, r, color, index) {
           this.cubes.push(new Cube(this, v, r, color));
         },

         render: function() {
           this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
           this.cubes.sort(function (a, b) {
             if(b.pos3.z !== a.pos3.z)
               return b.pos3.z - a.pos3.z;
             else if(b.pos3.x !== a.pos3.x) {
               if(b.pos3.x >= 0 && a.pos3.x >= 0 || b.pos3.x <= 0 && a.pos3.x <= 0)
                 return Math.abs(b.pos3.x) - Math.abs(a.pos3.x);
               else return b.pos3.x - a.pos3.x;
             } else {
               if(b.pos3.y >= 0 && a.pos3.y >= 0 || b.pos3.y <= 0 && a.pos3.y <= 0)
                 return Math.abs(b.pos3.y) - Math.abs(a.pos3.y);
               else return b.pos3.y - a.pos3.y;
             }
           });

           for(var i = 0; i < this.cubes.length; i++) {
             this.cubes[i].render();
           }
         },

         setListener: function() {
           var that = this;
           document.addEventListener('mousemove', function(event){
             var obj = canvas.getBoundingClientRect();
             var x = event.clientX - obj.top - that.vpx;
             var y = event.clientY - obj.left - that.vpy;
             that.angleY = -x * 0.0001;
             that.angleX = y * 0.0001;
           });
         }
       };

       // Cube类
       function Cube(garden, v, r, color) {
         this.garden = garden;

         // 正方体中心和半径
         this.pos3 = v;
         this.r = r;

         // this.angleX = Math.PI / 180 * 1;
         // this.angleY = Math.PI / 180 * 1;

         // cube的8个点
         this.p = [];

         // cube的6个面
         this.f = [];

         // 6个面的颜色集
         this.colors = color;  // color数组

         // 是否在玩家需要翻转的3*3矩形中
         this.isRotate = false;

         // rotateP函数中围绕的轴的单位向量
         this.rotateVector = new Vector3(1, 0, 0);

         // 已翻转的次数,每次翻转1.5度,需要翻转60次
         this.index = 0;

         this.init();
       }

       Cube.prototype = {
         init: function() {
           // 正方体的每个顶点都是一个ball类实现
           this.p[0] = new Ball(this, this.pos3.x - this.r, this.pos3.y - this.r, this.pos3.z - this.r);
           this.p[1] = new Ball(this, this.pos3.x - this.r, this.pos3.y + this.r, this.pos3.z - this.r);
           this.p[2] = new Ball(this, this.pos3.x + this.r, this.pos3.y + this.r, this.pos3.z - this.r);
           this.p[3] = new Ball(this, this.pos3.x + this.r, this.pos3.y - this.r, this.pos3.z - this.r);
           this.p[4] = new Ball(this, this.pos3.x - this.r, this.pos3.y - this.r, this.pos3.z + this.r);
           this.p[5] = new Ball(this, this.pos3.x - this.r, this.pos3.y + this.r, this.pos3.z + this.r);
           this.p[6] = new Ball(this, this.pos3.x + this.r, this.pos3.y + this.r, this.pos3.z + this.r);
           this.p[7] = new Ball(this, this.pos3.x + this.r, this.pos3.y - this.r, this.pos3.z + this.r);

           // 正方体6个面
           this.f[0] = new Face(this, this.p[0], this.p[1], this.p[2], this.p[3], this.colors[0]);
           this.f[1] = new Face(this, this.p[3], this.p[2], this.p[6], this.p[7], this.colors[1]);
           this.f[2] = new Face(this, this.p[6], this.p[5], this.p[4], this.p[7], this.colors[2]);
           this.f[3] = new Face(this, this.p[4], this.p[5], this.p[1], this.p[0], this.colors[3]);
           this.f[4] = new Face(this, this.p[0], this.p[3], this.p[7], this.p[4], this.colors[4]);
           this.f[5] = new Face(this, this.p[5], this.p[6], this.p[2], this.p[1], this.colors[5]);
         },

         render: function() {
           for(var i = 0; i < 8; i++)
             this.p[i].render();

           // 八个点的坐标改变完后,改变cube体心坐标,为下一帧cube的排序作准备
           this.changeCoordinate();

           for(var i = 0; i < 6; i++)
             this.f[i].angle = this.f[i].getAngle();

           // 从小到大排
           // 不排序会闪
           this.f.sort(function (a, b) {
             return a.angle > b.angle;
           });

           for(var i = 0; i < 6; i++) {
             // 夹角 < 90,绘制
             if(this.f[i].angle > 0)
               this.f[i].draw();
           }
         },

         // cube体心坐标改变
         changeCoordinate: function() {
           this.pos3.x = this.pos3.y = this.pos3.z = 0;
           for(var i = 0; i < 8; i++) {
             this.pos3.x += this.p[i].pos3.x;
             this.pos3.y += this.p[i].pos3.y;
             this.pos3.z += this.p[i].pos3.z;
           }
           this.pos3.x /= 8;
           this.pos3.y /= 8;
           this.pos3.z /= 8;
         }
       };

       // Face类
       // a, b, c, d为四个ball类
       // color为数字
       function Face(cube, a, b, c, d, color) {
         this.cube = cube;
         this.a = a;
         this.b = b;
         this.c = c;
         this.d = d;
         // this.color = '#' + ('00000' + parseInt(Math.random() * 0xffffff).toString(16)).slice(-6);
         this.color = window.colors[color];
         // 面的法向量和面心到视点向量的夹角的cos值
         this.angle = undefined;
       }

       Face.prototype = {
         draw: function() {
           var ctx = this.cube.garden.ctx;
           ctx.beginPath();
           ctx.fillStyle = this.color;
           ctx.moveTo(this.a.pos2.x, this.a.pos2.y);
           ctx.lineTo(this.b.pos2.x, this.b.pos2.y);
           ctx.lineTo(this.c.pos2.x, this.c.pos2.y);
           ctx.lineTo(this.d.pos2.x, this.d.pos2.y);
           ctx.closePath();
           ctx.fill();
         },

         // 获取面的法向量和z轴夹角
         getAngle: function() {
           var x = (this.a.pos3.x + this.b.pos3.x + this.c.pos3.x + this.d.pos3.x) / 4 - this.cube.pos3.x;
           var y = (this.a.pos3.y + this.b.pos3.y + this.c.pos3.y + this.d.pos3.y) / 4 - this.cube.pos3.y;
           var z = (this.a.pos3.z + this.b.pos3.z + this.c.pos3.z + this.d.pos3.z) / 4 - this.cube.pos3.z;
           // 面的法向量
           var v = new Vector3(x, y, z);

           // 视点设为(0,0,-500)
           var x = 0 - (this.a.pos3.x + this.b.pos3.x + this.c.pos3.x + this.d.pos3.x) / 4;
           var y = 0  - (this.a.pos3.y + this.b.pos3.y + this.c.pos3.y + this.d.pos3.y) / 4;
           var z = - 500 - (this.a.pos3.z + this.b.pos3.z + this.c.pos3.z + this.d.pos3.z) / 4;
           // 面心指向视点的向量
           var v2 = new Vector3(x, y, z);
           return v.dot(v2);
         }
       };

       // Ball类
       function Ball(cube, x, y, z) {
         this.cube = cube;

         // 三维上坐标
         this.pos3 = new Vector3(x, y, z)

         // 二维上坐标
         this.pos2 = new Vector2();
       }

       Ball.prototype = {
         // 绕y轴变化,得出新的x,z坐标
         rotateY: function() {
           if(window.isStill) return;
           var cosy = Math.cos(this.cube.garden.angleY);
           var siny = Math.sin(this.cube.garden.angleY);
           var x1 = this.pos3.z * siny + this.pos3.x * cosy;
           var z1 = this.pos3.z * cosy - this.pos3.x * siny;
           this.pos3.reset(x1, this.pos3.y, z1);
         },

         // 绕x轴变化,得出新的y,z坐标
         rotateX: function() {
           if(window.isStill) return;
           var cosx = Math.cos(this.cube.garden.angleX);
           var sinx = Math.sin(this.cube.garden.angleX);
           var y1 = this.pos3.y * cosx - this.pos3.z * sinx;
           var z1 = this.pos3.y * sinx + this.pos3.z * cosx;
           this.pos3.reset(this.pos3.x, y1, z1);
         },

         // 绕任意穿过原点的轴旋转
         rotateP: function() {
           if(this.cube.isRotate) {
              this.cube.index++;
             // 8 * 60
             if(this.cube.index === 480) {
               this.cube.isRotate = false;
               this.cube.index = 0;
             }

             var c = Math.cos(this.cube.garden.angleP);
             var s = Math.sin(this.cube.garden.angleP);
             // (x,y,z)为经过原点的单位向量
             var x = this.cube.rotateVector.x;
             var y = this.cube.rotateVector.y;
             var z = this.cube.rotateVector.z;
             var new_x = (x * x * (1 - c)+c) * this.pos3.x + (x*y*(1-c)-z*s) * this.pos3.y + (x*z*(1-c)+y*s) * this.pos3.z;
             var new_y = (y*x*(1-c)+z*s) * this.pos3.x + (y*y*(1-c)+c) * this.pos3.y + (y*z*(1-c)-x*s) * this.pos3.z;
             var new_z = (x*z*(1-c)-y*s) * this.pos3.x + (y*z*(1-c)+x*s) * this.pos3.y + (z*z*(1-c)+c) * this.pos3.z;
             this.pos3.reset(new_x, new_y, new_z);
           }
         },

         getPositionInTwoDimensionalSystem: function(a) {
           // focalLength 表示当前焦距,一般可设为一个常量
           var focalLength = 300;
           // 把z方向扁平化
           var scale = focalLength / (focalLength + this.pos3.z);
           this.pos2.x = this.cube.garden.vpx + this.pos3.x * scale;
           this.pos2.y = this.cube.garden.vpy + this.pos3.y * scale;
         },

         render: function() {
           this.rotateX();
           this.rotateY();
           this.rotateP();
           this.getPositionInTwoDimensionalSystem();
         }
       };

       // 向量
       function Vector3(x, y, z) {
         this.x = x || 0;
         this.y = y || 0;
         this.z = z || 0;
       }

       Vector3.prototype.reset = function(x, y, z) {
         this.x = x;
         this.y = y;
         this.z = z;
       }

       // 向量点积,大于0为0~90度
       Vector3.prototype.dot = function(v) {
         return this.x * v.x + this.y * v.y + this.z * v.z;
       };

       Vector3.prototype.length = function() {
         return Math.sqrt(this.sqrLength());
       };

       Vector3.prototype.sqrLength = function() {
         return this.x * this.x + this.y * this.y + this.z * this.z;
       };

       Vector3.prototype.getDistance = function(v) {
         var dis = (this.x - v.x) * (this.x - v.x) + (this.y - v.y) * (this.y - v.y) + (this.z - v.z) * (this.z - v.z);
         return Math.sqrt(dis);
       };

       // 近似判断两个向量是否是同一个
       // 因为程序中基本上是判断3*3*3的27个点是否是同一个,不同的点距离实在太远
       Vector3.prototype.isEqual = function(v) {
         if(this.getDistance(v) < 30) return true;
         else return false;
       };

       // 标准化,单位长度为1
       Vector3.prototype.normalize = function() {
         var inv = 1 / this.length();
           return new Vector3(this.x * inv, this.y * inv, this.z * inv);
       }

       // 是否垂直,点积为0
       Vector3.prototype.isPerpTo = function(v) {
         var ans = this.dot(v);
         if(Math.abs(ans) < 5) return true;
         return false;
       }

       // 向量ab,即为b向量减去a向量返回的新向量
       Vector3.prototype.minus = function(v) {
         return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z);
       }

       ////////////////////////////////////////
       // 二维向量
       function Vector2(x, y) {
         this.x = x || 0;
         this.y = y || 0;
       }

       Vector2.prototype.reset = function(x, y) {
         this.x = x;
         this.y = y;
       }

       // 向量叉乘
       Vector2.prototype.dot = function(v) {
         return this.x * v.y - v.x * this.y;
       };

       Vector2.prototype.minus = function(v) {
         return new Vector2(this.x - v.x, this.y - v.y);
       }
     </script>
   </head>
   <body bgcolor='#000'>
     <canvas id='canvas' width=1000 height=600 style='background-color:#000'>
       This browser does not support html5.
     </canvas>
   </body>
 </html>

  其实这是蛮坑爹的体验,h5原生api不适合做这种3d效果。但重要的是思考过程,不是结果。

  这只是一个demo,如果要做一个真正的魔方游戏,还需要以下几点:

  • 魔方颜色初始化

  现在魔方的颜色我是随意设置的,如果是个可玩的游戏,先得初始化复原后的魔方颜色,然后在游戏loading过程中随机打乱。

  • 3*3模块的精确判断

  之前我也说了,3*3模块的判断是不精确的,更极端的例子见下图:

【自己给自己题目做】:如何在Canvas上实现魔方效果-LMLPHP

  此时我鼠标操作的是1和2区域,我想旋转的是黑色箭头围成的模块,但是实际程序中旋转了黄色箭头围成的3*3,这就是因为我的模糊判断。我无法确定到底是哪一个,因为我一直是根据体心来判断的,如果要得到正确的结果,就要上升到正方体面的判断,我不知道代码量要增加几倍。(所以demo操作时尽量操作离视点近的面)

  • 游戏结果判断

  如果在确定3*3步骤使用维护三维数组的方法,这里判断相对简单;但是如果不,又得回到面的判断上,同上,很复杂。

  • 其他

  增加loading、计时等等。

  如果有更好的方法或建议欢迎与我交流~

  

05-11 13:43