0

在本教程中：https ://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-3d-shapes/a/rotating-3d-shapes它展示了如何制作 3d 形状并旋转它们。我按照这些步骤在 javascript 中而不是 processing.js 中重新创建所有内容，但由于某种原因无法执行这些功能（在 javascript 中）：

var rotateY3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = 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 * cosTheta - z * sinTheta;
      node[2] = z * cosTheta + x * sinTheta;
   }
};

这是我的尝试：

var rotateZ3D = function (theta) {
        var sinTheta = Math.sin(theta);
        var cosTheta = Math.cos(theta);
        for (var n = 0; n<nodes.length; n++) {

            var x = nodes[n][0];
            var y = nodes[n][1];
            nodes[n][0] = x * cosTheta - y * sinTheta;
            nodes[n][1] = y * cosTheta + x * sinTheta;
        }
 }

有人可以告诉我我做错了什么，或者我是否必须完全不同地去做？

4

1 回答 1

0

最初的问题在于“sin”和“cos”函数的使用。你theta的度数和javascript的内置使用弧度。

（如果需要，可以在问题评论中找到转换详细信息）

修复后问题出在周围的代码上。

（这里是你的代码的小提琴：http: //jsfiddle.net/bvqswvnL/1/）

首先要查看旋转的任何结果，您应该在旋转draw之后调用该函数rotateZ3D。

为了显示结果（和功能工作），我添加了 a setInterval，因此点不断旋转并绘制。

还：

  • board.restore();在函数末尾添加了 a ，draw因此转换不会“堆积”；
  • 改为board.lineTo(node1[1], node1[1])（board.lineTo(node1[0], node1[1])猜这是实际意图；

（这里是一个结果http://jsfiddle.net/bvqswvnL/2/的小提琴）

于 2015-08-07T16:57:32.387 回答