Question

在本教程中：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;
        }
 }

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

Answer 1

最初的问题是使用“罪”和“cos”函数。你的theta是度，javascript的内置使用弧度。

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

确定问题与周围的代码有关。

（以下是您的代码的小提琴：http://jsfiddle.net/bvqswvnL/1/）

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

为了显示结果（以及功能正常），我添加了setInterval，以便持续旋转和绘制。

此外：

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

（这是结果http://jsfiddle.net/bvqswvnL/2/）

的小提琴

如何在javascript中创建这些processing.js函数？

1 个答案: