为什么我的台词不匹配？

Question

编辑：所以显然，PI在JavaScript中是有限的(这是有道理的(。但这给我留下了一个大问题。计算所需角度的下一个最佳方法是什么？

好的，首先，我的代码：http://jsfiddle.net/joshlalonde/vtfyj/34/

我正在绘制打开到120度角的立方体。因此，坐标是根据 (h(8 和 θ (120( 计算的。

在第 46 行，我有一个 for 循环，其中包含一个用于创建行/列的嵌套 for 循环。

这有点微妙，但我注意到线条并不完全匹配。用于计算每个立方体位置的代码在第 49 行。立方体原点的第一个参数(我的 x 值(中的一件事是关闭的。谁能帮忙弄清楚它是什么？

var cube = new Cube(
            origin.x + (j * -w * (Math.PI)) +
            (i * w * (Math.PI))
            , origin.y + j * (h / 2) +
            i * (h / 2) +
            (-k*h), h);

抱歉，如果这令人困惑。I、j 和 k 是指由 for 循环递增的变量。所以基本上，一个三维的循环。

我认为问题出在Math.PI上。宽度不是问题，或者我相信。我最初使用的是 3.2(我不知何故猜到了，它似乎排得很好。但我不知道神奇的数字是什么(。我猜这与转换为弧度的角度有关，但我不明白为什么 Math.PI/180 不是解决方案。我尝试了多种方法。60(度数(* Math.PI/180 不起作用。这是干什么用的？

编辑：这可能只是一个与JavaScript相关的数学问题。数学在理论上是正确的，但无法正确计算。我会接受这些不完美，以免以非正统的方式重写代码。我可以说使用三角数学需要很多时间来规避。

Answer 1

有 2 个问题...

1. 将第 35 行更改为 var w=h*Math.sin(30); 。 此处的30与Cube getWidth方法中的this.theta / 4匹配，因为this.theta等于 120。

2. 使用以下代码生成新多维数据集的位置。 你不需要Math.Pi. 您需要在计算中同时使用立方体宽度和高度。

   var cube = new Cube(
       origin.x+ -j*w - i*h,
       origin.y + -j*w/2 + i*h/2,
       h);
   

Answer 2

好的，

我找到了解决方案！这真的很简单 - 我使用度而不是弧度。

function Cube(x, y, h) {
this.x = x
this.y = y
this.h = h;
this.theta = 120*Math.PI/180;
this.getWidth = function () {
    return (this.h * Math.sin(this.theta / 2));
};
this.width = this.getWidth();
this.getCorner = function () {
    return  (this.h / 2);
};
this.corner = this.getCorner();

}

所以显然Javascript trig函数使用Radians，所以这是一个问题。我所做的下一个修复是立方体中每个点的偏移量。它不需要一个！(哦，为什么。但无论它如何工作。我留下了旧代码，以防万一我以后发现原因(。

 function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw a black canvas
var h = 32;
var width = Math.sin(60*Math.PI/180);
var w = h*width;
var row = 9; // column and row will always be same (to make cube)
var column = row;
var area = row * column;
var height = 1;
row--;
column--;
height--;
var origin = {
    x: canvas.width / 2,
    y: (canvas.height / 2) - (h * column/2) + height*h
};
var offset = Math.sqrt(3)/2;
offset = 1;
for (var i = 0; i <= row; i++) {
    for (var j = 0; j <= column; j++) {
        for (var k = 0; k <= height; k++) {
        var cube = new Cube(
            origin.x + (j * -w * offset) +
            (i * w * offset)
            , origin.y + (j * (h / 2) * offset) +
            (i * (h / 2) * offset) +
            (-k*h*offset), h);
            var cubes = {};  
        cubes[i+j+k] = cube; // Store to array
        if (j == column) {
            drawCube(2, cube);
        }
        if (i == row) {
            drawCube(1, cube);
        }
        if (k == height) {
        drawCube(0,cube);
        }
        }
    }
}

}

在此处查看完整的Jsfiddle：http://jsfiddle.net/joshlalonde/vtfyj/41/