【发布时间】：2017-11-15 03:13:53
【问题描述】：
我正在关注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°）的房间图片，我用画布覆盖它，这样我就可以在上面绘制立方体。正如你所看到的，它有点偏离，我认为它是两个复合旋转的效果，因为每个函数都会改变原始节点坐标。
【问题讨论】：
-
我通过旋转 X 得到了想要的效果：(Math.atan( - 1 / Math.sqrt( 2 ) ) ) 而不是 (Math.PI/6)。我不明白为什么。
-
您希望边缘与水平线之间的角度为 30 度，但这并不意味着您旋转 30 度。维基百科在这里解释：en.wikipedia.org/wiki/Isometric_projection#Rotation_angles
标签： javascript canvas processing.js