javascript - 将立方体旋转为等距

Question

我正在关注 this rotating cube教程，我正在尝试将立方体旋转到等距视角(45 度、30 度)。

我认为，问题是 rotateY 和 rotateX 函数改变了原始值，使得立方体中间的两个红点(视觉上)不重叠。 (如果这有任何意义的话)

我怎样才能同时在 X 轴和 Y 轴上旋转立方体，这样功能就不会相互影响？

const canvas = document.getElementById('stage');
    canvas.width = canvas.parentElement.clientWidth
    canvas.height = canvas.parentElement.clientHeight
    const context = canvas.getContext('2d');
    context.translate(200,200)

    var node0 = [-100, -100, -100];
    var node1 = [-100, -100,  100];
    var node2 = [-100,  100, -100];
    var node3 = [-100,  100,  100];
    var node4 = [ 100, -100, -100];
    var node5 = [ 100, -100,  100];
    var node6 = [ 100,  100, -100];
    var node7 = [ 100,  100,  100];
    var nodes = [node0, node1, node2, node3, node4, node5, node6, node7];

    var edge0  = [0, 1];
    var edge1  = [1, 3];
    var edge2  = [3, 2];
    var edge3  = [2, 0];
    var edge4  = [4, 5];
    var edge5  = [5, 7];
    var edge6  = [7, 6];
    var edge7  = [6, 4];
    var edge8  = [0, 4];
    var edge9  = [1, 5];
    var edge10 = [2, 6];
    var edge11 = [3, 7];
    var edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11];

    var draw = function(){

      for (var e=0; e<edges.length; e++){
        var n0 = edges[e][0]
        var n1 = edges[e][1]
        var node0 = nodes[n0];
        var node1 = nodes[n1];
        
        context.beginPath();
        context.moveTo(node0[0],node0[1]);
        context.lineTo(node1[0],node1[1]);
        context.stroke();
      }

      //draw nodes
      for (var n=0; n<nodes.length; n++){
        var node = nodes[n];
        context.beginPath();
        context.arc(node[0], node[1], 3, 0, 2 * Math.PI, false);
        context.fillStyle = 'red';
        context.fill();
      }
    }


    var rotateZ3D = function(theta){
      var sin_t = Math.sin(theta);
      var cos_t = Math.cos(theta);
      for (var n=0; n< nodes.length; n++){
        var node = nodes[n];
        var x = node[0];
        var y = node[1];
        node[0] = x * cos_t - y * sin_t;
        node[1] = y * cos_t + x * sin_t;
      };
    };

    var rotateY3D = function(theta){
      var sin_t = Math.sin(theta);
      var cos_t = Math.cos(theta);

      for (var n=0; n<nodes.length; n++){
        var node = nodes[n];
        var x = node[0];
        var z = node[2];
        node[0] = x * cos_t - z * sin_t;
        node[2] = z * cos_t + x * sin_t;
      }
    };

    var rotateX3D = function(theta){
      var sin_t = Math.sin(theta);
      var cos_t = Math.cos(theta);

      for (var n = 0; n< nodes.length; n++){
        var node = nodes[n];
        var y = node[1];
        var z = node[2];
        
        node[1] = y * cos_t - z * sin_t;
        node[2] = z * cos_t + y * sin_t;
      }
    }

    rotateY3D(Math.PI/4);
    rotateX3D(Math.PI/6);


    draw();

#stage {
  background-color: cyan;
 }

<canvas id="stage" height='500px' width='500px'></canvas>

编辑:我应该附上一张图片来进一步解释我想要实现的目标。我有一张等距(45°，30°)的房间图片，我用 Canvas 覆盖它，以便我可以在上面绘制立方体。如您所见，它略有偏差，我认为这是两个复合旋转的效果，因为每个函数都会改变原始节点坐标。

Answer 1

你想要投影而不是旋转

您的问题是您正在尝试应用投影但使用变换矩阵来执行此操作。

转换矩阵将使盒子保持其原始形状，每个轴与其他轴成 90 度。

您希望一个轴为 45 度，另一个为 30 度。仅靠轮换无法做到这一点。

投影矩阵

基本的 3 x 4 矩阵表示 4 个 3D 向量。这些向量是 3D 空间中 x,y,z 轴的方向和比例，第 4 个向量是原点。

投影矩阵移除了将坐标转换为 2D 空间的 z 部分。每个轴的z部分为0。

由于等距投影是平行的，我们可以创建一个矩阵来设置 Canvas 上的 2D 轴方向。

轴

45 度的 x 轴

const xAxis = Math.PI * ( 1 /  4);
iso.x.set(Math.cos(xAxis), Math.sin(xAxis), 0);

120 度的 y 轴

const yAxis = Math.PI * ( 4 / 6);
iso.y.set(Math.cos(yAxis), Math.sin(yAxis), 0);

还有页面上方的 z 轴

iso.z.set(0,-1,0);

转型

然后我们只需将每个顶点坐标乘以适当的轴

// m is the matrix (iso)
// a is vertex in
// b is vertex out
// m.o is origin (not used in this example
b.x = a.x * m.x.x + a.y * m.y.x + a.z * m.z.x + m.o.x;
b.y = a.x * m.x.y + a.y * m.y.y + a.z * m.z.y + m.o.y;
b.z = a.x * m.x.z + a.y * m.y.z + a.z * m.z.z + m.o.z;
//    ^^^^^^^^^^^   ^^^^^^^^^^^   ^^^^^^^^^^^  
//    move x dist   move y dist   move z dist
//    along x axis  along y axis  along y axis
//     45deg          120deg        Up -90deg

以上代码示例

我在代码片段中列出了一个非常基本的矩阵以供引用。

该代码段使用您的近似布局创建 3D 对象。

转换需要第二个对象作为结果

我还添加了一个 projectIso，它采用 x、y、z 轴的方向和 x、y、z 轴的比例，并创建一个如上所述的投影矩阵。

这样上面的就完成了

const mat = Mat().projectIso(
    Math.PI * ( 1 / 4), 
    Math.PI * ( 4 / 6),
    Math.PI * ( 3 / 2)  // up
); // scales default to 1

const ctx = canvas.getContext('2d');

var w = canvas.width;
var h = canvas.height;
var cw = w / 2;  // center 
var ch = h / 2;

const V = (x,y,z) => ({x,y,z,set(x,y,z){this.x = x;this.y = y; this.z = z}});
const Mat = () => ( {
   x : V(1,0,0),
   y : V(0,1,0),
   z : V(0,0,1),
   o : V(0,0,0), // origin
   ident(){
      const m = this;
      m.x.set(1,0,0);
      m.y.set(0,1,0);
      m.z.set(0,0,1);
      m.o.set(0,0,0);
      return m;
   },
   rotX(r) {
      const m = this.ident();      
      m.y.set(0, Math.cos(r), Math.sin(r));
      m.z.set(0, -Math.sin(r), Math.cos(r));
      return m;      
   },
   rotY(r) {
      const m = this.ident();      
      m.x.set(Math.cos(r), 0, Math.sin(r));
      m.z.set(-Math.sin(r), 0, Math.cos(r));
      return m;      
   },      
   rotZ(r) {
      const m = this.ident();      
      m.x.set(Math.cos(r), Math.sin(r), 0);
      m.y.set(-Math.sin(r), Math.cos(r), 0);
      return m;      
   },    
   projectIso(xAxis, yAxis, zAxis, xScale = 1, yScale = 1, zScale = 1) {
      const m = this.ident();      
      iso.x.set(Math.cos(xAxis) * xScale, Math.sin(xAxis) * xScale, 0);
      iso.y.set(Math.cos(yAxis) * yScale, Math.sin(yAxis) * yScale, 0);
      iso.z.set(Math.cos(zAxis) * zScale, Math.sin(zAxis) * zScale, 0);
      return m;
   },
   transform(obj, result){
      const m = this;
      const na = obj.nodes;
      const nb = result.nodes;
      var i = 0;
      while(i < na.length){
         const a = na[i];
         const b = nb[i++];
         b.x = a.x * m.x.x + a.y * m.y.x + a.z * m.z.x + m.o.x;
         b.y = a.x * m.x.y + a.y * m.y.y + a.z * m.z.y + m.o.y;
         b.z = a.x * m.x.z + a.y * m.y.z + a.z * m.z.z + m.o.z;
      }
      return result;
   }
});

// create a box
const Box = (size = 35) =>( {
  nodes: [
    V(-size, -size, -size),
    V(-size, -size, size),
    V(-size, size, -size),
    V(-size, size, size),
    V(size, -size, -size),
    V(size, -size, size),
    V(size, size, -size),
    V(size, size, size),
  ],
  edges: [[0, 1],[1, 3],[3, 2],[2, 0],[4, 5],[5, 7],[7, 6],[6, 4],[0, 4],[1, 5],[2, 6],[3, 7]],
});

// draws a obj that has nodes, and edges

function draw(obj) {
    ctx.fillStyle = 'red';
  const edges =  obj.edges;
  const nodes =  obj.nodes;
  var i = 0;
  ctx.beginPath();
  while(i < edges.length){
    var edge = edges[i++];
    ctx.moveTo(nodes[edge[0]].x, nodes[edge[0]].y);
    ctx.lineTo(nodes[edge[1]].x, nodes[edge[1]].y);
    
  }
  ctx.stroke();    
  i = 0;
  ctx.beginPath();
  while(i < nodes.length){
    const x = nodes[i].x;
    const y = nodes[i++].y;
    ctx.moveTo(x+3,y);
    ctx.arc(x,y, 3, 0, 2 * Math.PI, false);
  }
  ctx.fill();
}

// create boxes (box1 is the projected result)
var box = Box();
var box1 = Box();
var box2 = Box();

// create the projection matrix
var iso = Mat();
// angles for X, and Y axis
const xAxis = Math.PI * ( 1 / 4);
const yAxis = Math.PI * ( 4 / 6);
iso.x.set(Math.cos(xAxis), Math.sin(xAxis),0);
iso.y.set(Math.cos(yAxis), Math.sin(yAxis), 0);
// the direction of Z
iso.z.set(0, -1, 0);

// center rendering
    
ctx.setTransform(1,0,0,1,cw* 0.5,ch);

// transform and render
draw(iso.transform(box,box1));

iso.projectIso(Math.PI * ( 1 / 6), Math.PI * ( 5 / 6), -Math.PI * ( 1 / 2))
ctx.setTransform(1,0,0,1,cw* 1,ch);
draw(iso.transform(box,box1));

iso.rotY(Math.PI / 4);
iso.transform(box,box1);
iso.rotX(Math.atan(1/Math.SQRT2));
iso.transform(box1,box2);
ctx.setTransform(1,0,0,1,cw* 1.5,ch);
draw(box2);

<canvas id="canvas" height='200' width='500'></canvas>