如何在 javascript 中实现这些 processing.js 功能？

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

最初的问题是使用 "sin" 和 "cos" 函数。您的 theta 以度为单位，而 javascript 的内置单位使用弧度。

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

解决问题后，问题出在周围的代码上。

（这是一个 fiddle 和您的代码：http://jsfiddle.net/bvqswvnL/1/）

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

为了显示结果（和函数工作）我添加了一个 setInterval 所以点不断地 rotated 和 draw.

还有：

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

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

如何在 javascript 中实现这些 processing.js 功能？

How can I make these processing.js functions in javascript?

javascript

trigonometry

khan-academy