盒子的简单正交投影
simple orthographic projection of a box
如果我能使用正确的术语，这个问题可能会更简单，但我对计算机图形学了解不多。我想做的是将一个盒子（长方体？- 3d 中的矩形）投影（正交）到 3 个平面（top/front/side 视图）。
我有这些限制
- 长方体的面平行于投影平面。所以盒子的一个面是投影。
- 只需要考虑矩形。
我使用 d3 绘制二维表示，并且对它的工作原理有一些直觉。所以，逻辑可能是这样的（如上图所示）
for top view, move the coordinate to top, left of the box, and discard height (y axis)
for front view, keep the coordinate, and discard depth (z axis)
for left side view, move coordinate to bottom, left and discard length (x axis)
我已经阅读了一些关于如何使用投影矩阵来简化计算的 opengl 教程，但我的情况更简单，所以我希望我不必将盒子的每条边都视为向量并应用多重矩阵变换在上面。此外，我了解将笛卡尔坐标转换为 svg 坐标的复杂性，但只要了解将盒子正交投影到 3 平面的正式方法就足够了。
有没有矩阵可以用来得到矩形的投影坐标？请帮我把这个问题形式化（这是一个已知的投影吗？）
如有不明之处请告知
提前致谢。
所以我的 WebGL WebGL WebGL 大脑在下面发布了 "generic-ish" 解决方案，您可以从任何角度任何方向查看
但是，如果您只想要右视图、俯视图和前视图，那么您只需使用每个点的 3 个坐标中的 2 个坐标 front = (x, y), top = (x, z), right = (z, y)
你只需在 2d 中的所有点之间画线（或者你在点之间画的任何东西），就像这样
var cubeVertices = [
-1, -1, -1, // 0
1, -1, -1, // 1
1, 1, -1, // 2
-1, 1, -1, // 3
-1, -1, 1, // 4
1, -1, 1, // 5
1, 1, 1, // 6
-1, 1, 1, // 7
//
// making some points in the middle for letters
//
-.5, -.5, 0, // 8 8 +--+ 9
-.3, -.5, 0, // 9 |
-.5, -.4, 0, // 10 10 +--+ 11
-.3, -.4, 0, // 11 |
-.5, -.3, 0, // 12 12 +
// 15
.3, 0, .3, // 13 13 +-+-+ 14
.5, 0, .3, // 14 |
.4, 0, .3, // 15 |
.4, 0, .5, // 16 + 16
0, -.5, -.5, // 17 17 +---+ 18
0, -.5, .5, // 18 | |
0, .5, -.5, // 19 20 +---+ 21
0, 0, -.5, // 20 | \
0, 0, .5, // 21 | \
0, .5, .5, // 22 19 + + 22
];
var indices = [
0, 1,
1, 2,
2, 3,
3, 0,
4, 5,
5, 6,
6, 7,
7, 4,
0, 4,
1, 5,
2, 6,
3, 7,
// f / front
8, 9,
8, 12,
10, 11,
// t / top
13, 14,
15, 16,
// r / right
17, 18,
18, 21,
17, 19,
20, 21,
20, 22,
];
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
ctx.font = "20px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// make 3 areas in canvas
ctx.fillStyle = "#FEE";
ctx.fillRect(width / 3 * 0, 0, width / 3, height);
ctx.fillStyle = "#EFE";
ctx.fillRect(width / 3 * 1, 0, width / 3, height);
ctx.fillStyle = "#EEF";
ctx.fillRect(width / 3 * 2, 0, width / 3, height);
ctx.fillStyle = "#000";
// Draw front
ctx.save();
ctx.translate(width / 6 * 1, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 0, 1, height / 4);
ctx.stroke();
ctx.fillText("front", 0, 60);
ctx.restore();
// Draw top
ctx.save();
ctx.translate(width / 6 * 3, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 0, 2, height / 4);
ctx.stroke();
ctx.fillText("top", 0, 60);
ctx.restore();
// Draw right
ctx.save();
ctx.translate(width / 6 * 5, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 2, 1, height / 4);
ctx.stroke();
ctx.fillText("right", 0, 60);
ctx.restore();
function addLines(ctx, vertices, indices, xIndex, yIndex, scale) {
for (var ii = 0; ii < indices.length; ii += 2) {
var offset0 = indices[ii + 0] * 3;
var offset1 = indices[ii + 1] * 3;
var p0 = vertices.slice(offset0, offset0 + 3);
var p1 = vertices.slice(offset1, offset1 + 3);
ctx.moveTo(p0[xIndex] * scale, p0[yIndex] * scale);
ctx.lineTo(p1[xIndex] * scale, p1[yIndex] * scale);
}
}
<canvas id="c"></canvas>
左用(-x, y)，下用(x, -z)，后用(-x, y)
通用解决方案（从任何角度看）
您可能想查看 this article 和之前的几篇文章。
如果您有 3d 矩阵库，最简单的方法是使用 lookat 函数将 ortho 矩阵与视图矩阵相乘。（大多数 3d 库都有正交投影函数和观察功能）
othro * inverse(lookAt(eye, target, up));
前面在哪里
eye = [0, 0, 1];
target = [0, 0, 0];
up = [0, 1, 0];
左边是
eye = [-1, 0, 0];
target = [0, 0, 0];
up = [0, 1, 0];
顶部在哪里
eye = [0, 1, 0];
target = [0, 0, 0];
up = [0, 0, -1];
当然，如果你将相机放在直轴上，你可以通过插入正确的值自己制作矩阵，如果你查看任何 ortho 和 lookAt 函数或只要 运行 它们一旦具有上述值就应该很清楚矩阵需要是什么。我认为使用图书馆可能更容易。更好的是，如果你试图让你的盒子的一个面成为你的视锥体的开始，你可以将盒子坐标插入任何典型的 ortho 函数
这是典型的
function ortho(left, right, bottom, top, near, far) {
return [
2 / (right - left), 0, 0, 0,
0, 2 / (top - bottom), 0, 0,
0, 0, -1 / (far - near), 0,
(right + left) / (left - right),
(top + bottom) / (bottom - top),
-near / (near - far),
1,
];
}
如果不清楚的话，这个矩阵所做的就是缩放每个维度，以便 right - left、top - bottom 和 far - near 的范围都变成 2 个单位大。这分别是前 3 行。最后一行将每个维度中的单位移动 -1 个单位，这样您最终会得到每个维度中从 -1 到 +1 的值，因为这是 GL/WebGL 需要能够呈现的值。参见 this article。
这是一个例子
"use strict";
var ThreeDMath = (function() {
var subVector = function(a, b) {
var r = [];
var aLength = a.length;
for (var i = 0; i < aLength; ++i)
r[i] = a[i] - b[i];
return r;
};
var dot = function(a, b) {
var r = 0.0;
var aLength = a.length;
for (var i = 0; i < aLength; ++i)
r += a[i] * b[i];
return r;
};
var cross = function(a, b) {
return [a[1] * b[2] - a[2] * b[1],
a[2] * b[0] - a[0] * b[2],
a[0] * b[1] - a[1] * b[0]
];
};
var normalize = function(a) {
var r = [];
var n = 0.0;
var aLength = a.length;
for (var i = 0; i < aLength; ++i)
n += a[i] * a[i];
n = Math.sqrt(n);
if (n > 0.00001) {
for (var i = 0; i < aLength; ++i)
r[i] = a[i] / n;
} else {
r = [0, 0, 0];
}
return r;
};
var transformPoint = function(m, v) {
var v0 = v[0];
var v1 = v[1];
var v2 = v[2];
var d = v0 * m[0 * 4 + 3] + v1 * m[1 * 4 + 3] + v2 * m[2 * 4 + 3] + m[3 * 4 + 3];
return [(v0 * m[0 * 4 + 0] + v1 * m[1 * 4 + 0] + v2 * m[2 * 4 + 0] + m[3 * 4 + 0]) / d,
(v0 * m[0 * 4 + 1] + v1 * m[1 * 4 + 1] + v2 * m[2 * 4 + 1] + m[3 * 4 + 1]) / d,
(v0 * m[0 * 4 + 2] + v1 * m[1 * 4 + 2] + v2 * m[2 * 4 + 2] + m[3 * 4 + 2]) / d
];
};
var identity = function() {
return [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
];
};
var multiplyMatrix = function(a, b) {
var a00 = a[0 * 4 + 0];
var a01 = a[0 * 4 + 1];
var a02 = a[0 * 4 + 2];
var a03 = a[0 * 4 + 3];
var a10 = a[1 * 4 + 0];
var a11 = a[1 * 4 + 1];
var a12 = a[1 * 4 + 2];
var a13 = a[1 * 4 + 3];
var a20 = a[2 * 4 + 0];
var a21 = a[2 * 4 + 1];
var a22 = a[2 * 4 + 2];
var a23 = a[2 * 4 + 3];
var a30 = a[3 * 4 + 0];
var a31 = a[3 * 4 + 1];
var a32 = a[3 * 4 + 2];
var a33 = a[3 * 4 + 3];
var b00 = b[0 * 4 + 0];
var b01 = b[0 * 4 + 1];
var b02 = b[0 * 4 + 2];
var b03 = b[0 * 4 + 3];
var b10 = b[1 * 4 + 0];
var b11 = b[1 * 4 + 1];
var b12 = b[1 * 4 + 2];
var b13 = b[1 * 4 + 3];
var b20 = b[2 * 4 + 0];
var b21 = b[2 * 4 + 1];
var b22 = b[2 * 4 + 2];
var b23 = b[2 * 4 + 3];
var b30 = b[3 * 4 + 0];
var b31 = b[3 * 4 + 1];
var b32 = b[3 * 4 + 2];
var b33 = b[3 * 4 + 3];
return [a00 * b00 + a01 * b10 + a02 * b20 + a03 * b30,
a00 * b01 + a01 * b11 + a02 * b21 + a03 * b31,
a00 * b02 + a01 * b12 + a02 * b22 + a03 * b32,
a00 * b03 + a01 * b13 + a02 * b23 + a03 * b33,
a10 * b00 + a11 * b10 + a12 * b20 + a13 * b30,
a10 * b01 + a11 * b11 + a12 * b21 + a13 * b31,
a10 * b02 + a11 * b12 + a12 * b22 + a13 * b32,
a10 * b03 + a11 * b13 + a12 * b23 + a13 * b33,
a20 * b00 + a21 * b10 + a22 * b20 + a23 * b30,
a20 * b01 + a21 * b11 + a22 * b21 + a23 * b31,
a20 * b02 + a21 * b12 + a22 * b22 + a23 * b32,
a20 * b03 + a21 * b13 + a22 * b23 + a23 * b33,
a30 * b00 + a31 * b10 + a32 * b20 + a33 * b30,
a30 * b01 + a31 * b11 + a32 * b21 + a33 * b31,
a30 * b02 + a31 * b12 + a32 * b22 + a33 * b32,
a30 * b03 + a31 * b13 + a32 * b23 + a33 * b33
];
};
var inverse = function(m) {
var tmp_0 = m[2 * 4 + 2] * m[3 * 4 + 3];
var tmp_1 = m[3 * 4 + 2] * m[2 * 4 + 3];
var tmp_2 = m[1 * 4 + 2] * m[3 * 4 + 3];
var tmp_3 = m[3 * 4 + 2] * m[1 * 4 + 3];
var tmp_4 = m[1 * 4 + 2] * m[2 * 4 + 3];
var tmp_5 = m[2 * 4 + 2] * m[1 * 4 + 3];
var tmp_6 = m[0 * 4 + 2] * m[3 * 4 + 3];
var tmp_7 = m[3 * 4 + 2] * m[0 * 4 + 3];
var tmp_8 = m[0 * 4 + 2] * m[2 * 4 + 3];
var tmp_9 = m[2 * 4 + 2] * m[0 * 4 + 3];
var tmp_10 = m[0 * 4 + 2] * m[1 * 4 + 3];
var tmp_11 = m[1 * 4 + 2] * m[0 * 4 + 3];
var tmp_12 = m[2 * 4 + 0] * m[3 * 4 + 1];
var tmp_13 = m[3 * 4 + 0] * m[2 * 4 + 1];
var tmp_14 = m[1 * 4 + 0] * m[3 * 4 + 1];
var tmp_15 = m[3 * 4 + 0] * m[1 * 4 + 1];
var tmp_16 = m[1 * 4 + 0] * m[2 * 4 + 1];
var tmp_17 = m[2 * 4 + 0] * m[1 * 4 + 1];
var tmp_18 = m[0 * 4 + 0] * m[3 * 4 + 1];
var tmp_19 = m[3 * 4 + 0] * m[0 * 4 + 1];
var tmp_20 = m[0 * 4 + 0] * m[2 * 4 + 1];
var tmp_21 = m[2 * 4 + 0] * m[0 * 4 + 1];
var tmp_22 = m[0 * 4 + 0] * m[1 * 4 + 1];
var tmp_23 = m[1 * 4 + 0] * m[0 * 4 + 1];
var t0 = (tmp_0 * m[1 * 4 + 1] + tmp_3 * m[2 * 4 + 1] + tmp_4 * m[3 * 4 + 1]) -
(tmp_1 * m[1 * 4 + 1] + tmp_2 * m[2 * 4 + 1] + tmp_5 * m[3 * 4 + 1]);
var t1 = (tmp_1 * m[0 * 4 + 1] + tmp_6 * m[2 * 4 + 1] + tmp_9 * m[3 * 4 + 1]) -
(tmp_0 * m[0 * 4 + 1] + tmp_7 * m[2 * 4 + 1] + tmp_8 * m[3 * 4 + 1]);
var t2 = (tmp_2 * m[0 * 4 + 1] + tmp_7 * m[1 * 4 + 1] + tmp_10 * m[3 * 4 + 1]) -
(tmp_3 * m[0 * 4 + 1] + tmp_6 * m[1 * 4 + 1] + tmp_11 * m[3 * 4 + 1]);
var t3 = (tmp_5 * m[0 * 4 + 1] + tmp_8 * m[1 * 4 + 1] + tmp_11 * m[2 * 4 + 1]) -
(tmp_4 * m[0 * 4 + 1] + tmp_9 * m[1 * 4 + 1] + tmp_10 * m[2 * 4 + 1]);
var d = 1.0 / (m[0 * 4 + 0] * t0 + m[1 * 4 + 0] * t1 + m[2 * 4 + 0] * t2 + m[3 * 4 + 0] * t3);
return [d * t0, d * t1, d * t2, d * t3,
d * ((tmp_1 * m[1 * 4 + 0] + tmp_2 * m[2 * 4 + 0] + tmp_5 * m[3 * 4 + 0]) -
(tmp_0 * m[1 * 4 + 0] + tmp_3 * m[2 * 4 + 0] + tmp_4 * m[3 * 4 + 0])),
d * ((tmp_0 * m[0 * 4 + 0] + tmp_7 * m[2 * 4 + 0] + tmp_8 * m[3 * 4 + 0]) -
(tmp_1 * m[0 * 4 + 0] + tmp_6 * m[2 * 4 + 0] + tmp_9 * m[3 * 4 + 0])),
d * ((tmp_3 * m[0 * 4 + 0] + tmp_6 * m[1 * 4 + 0] + tmp_11 * m[3 * 4 + 0]) -
(tmp_2 * m[0 * 4 + 0] + tmp_7 * m[1 * 4 + 0] + tmp_10 * m[3 * 4 + 0])),
d * ((tmp_4 * m[0 * 4 + 0] + tmp_9 * m[1 * 4 + 0] + tmp_10 * m[2 * 4 + 0]) -
(tmp_5 * m[0 * 4 + 0] + tmp_8 * m[1 * 4 + 0] + tmp_11 * m[2 * 4 + 0])),
d * ((tmp_12 * m[1 * 4 + 3] + tmp_15 * m[2 * 4 + 3] + tmp_16 * m[3 * 4 + 3]) -
(tmp_13 * m[1 * 4 + 3] + tmp_14 * m[2 * 4 + 3] + tmp_17 * m[3 * 4 + 3])),
d * ((tmp_13 * m[0 * 4 + 3] + tmp_18 * m[2 * 4 + 3] + tmp_21 * m[3 * 4 + 3]) -
(tmp_12 * m[0 * 4 + 3] + tmp_19 * m[2 * 4 + 3] + tmp_20 * m[3 * 4 + 3])),
d * ((tmp_14 * m[0 * 4 + 3] + tmp_19 * m[1 * 4 + 3] + tmp_22 * m[3 * 4 + 3]) -
(tmp_15 * m[0 * 4 + 3] + tmp_18 * m[1 * 4 + 3] + tmp_23 * m[3 * 4 + 3])),
d * ((tmp_17 * m[0 * 4 + 3] + tmp_20 * m[1 * 4 + 3] + tmp_23 * m[2 * 4 + 3]) -
(tmp_16 * m[0 * 4 + 3] + tmp_21 * m[1 * 4 + 3] + tmp_22 * m[2 * 4 + 3])),
d * ((tmp_14 * m[2 * 4 + 2] + tmp_17 * m[3 * 4 + 2] + tmp_13 * m[1 * 4 + 2]) -
(tmp_16 * m[3 * 4 + 2] + tmp_12 * m[1 * 4 + 2] + tmp_15 * m[2 * 4 + 2])),
d * ((tmp_20 * m[3 * 4 + 2] + tmp_12 * m[0 * 4 + 2] + tmp_19 * m[2 * 4 + 2]) -
(tmp_18 * m[2 * 4 + 2] + tmp_21 * m[3 * 4 + 2] + tmp_13 * m[0 * 4 + 2])),
d * ((tmp_18 * m[1 * 4 + 2] + tmp_23 * m[3 * 4 + 2] + tmp_15 * m[0 * 4 + 2]) -
(tmp_22 * m[3 * 4 + 2] + tmp_14 * m[0 * 4 + 2] + tmp_19 * m[1 * 4 + 2])),
d * ((tmp_22 * m[2 * 4 + 2] + tmp_16 * m[0 * 4 + 2] + tmp_21 * m[1 * 4 + 2]) -
(tmp_20 * m[1 * 4 + 2] + tmp_23 * m[2 * 4 + 2] + tmp_17 * m[0 * 4 + 2]))
];
};
var perspective = function(angle, aspect, near, far) {
var f = Math.tan(Math.PI * 0.5 - 0.5 * angle);
var rangeInv = 1.0 / (near - far);
return [
f / aspect, 0, 0, 0,
0, f, 0, 0,
0, 0, (near + far) * rangeInv, -1,
0, 0, near * far * rangeInv * 2, 0
];
};
var cameraLookAt = function(eye, target, up) {
var vz = normalize(subVector(eye, target));
var vx = normalize(cross(up, vz));
var vy = cross(vz, vx);
return inverse([
vx[0], vx[1], vx[2], 0,
vy[0], vy[1], vy[2], 0,
vz[0], vz[1], vz[2], 0, -dot(vx, eye), -dot(vy, eye), -dot(vz, eye), 1
]);
};
var lookAt = function(eye, target, up) {
return inverse(cameraLookAt(
eye, target, up));
};
function ortho(left, right, bottom, top, near, far) {
return [
2 / (right - left), 0, 0, 0,
0, 2 / (top - bottom), 0, 0,
0, 0, -1 / (far - near), 0,
(right + left) / (left - right),
(top + bottom) / (bottom - top), -near / (near - far),
1,
];
}
return {
identity: identity,
perspective: perspective,
cameraLookAt: cameraLookAt,
lookAt: lookAt,
multiplyMatrix: multiplyMatrix,
transformPoint: transformPoint,
ortho: ortho,
};
})();
var m=ThreeDMath;
window.onload=main;
function main() {
var cubeVertices=[
-1, -1, -1, // 0
1, -1, -1, // 1
1, 1, -1, // 2
-1, 1, -1, // 3
-1, -1, 1, // 4
1, -1, 1, // 5
1, 1, 1, // 6
-1, 1, 1, // 7
//
// making some points in the middle for letters
//
-.5, -.5, 0, // 8 8 +--+ 9
-.3, -.5, 0, // 9 |
-.5, -.4, 0, // 10 10 +--+ 11
-.3, -.4, 0, // 11 |
-.5, -.3, 0, // 12 12 +
// 15
.3, 0, .3, // 13 13 +-+-+ 14
.5, 0, .3, // 14 |
.4, 0, .3, // 15 |
.4, 0, .5, // 16 + 16
0, -.5, -.5, // 17 17 +---+ 18
0, -.5, .5, // 18 | |
0, .5, -.5, // 19 20 +---+ 21
0, 0, -.5, // 20 | \
0, 0, .5, // 21 | \
0, .5, .5, // 22 19 + + 22
];
var indices=[
0, 1,
1, 2,
2, 3,
3, 0,
4, 5,
5, 6,
6, 7,
7, 4,
0, 4,
1, 5,
2, 6,
3, 7,
// f / front
8, 9,
8, 12,
10, 11,
// t / top
13, 14,
15, 16,
// r / right
17, 18,
18, 21,
17, 19,
20, 21,
20, 22,
];
var canvas=document.getElementById("c");
var ctx=canvas.getContext("2d");
var then=0;
function render(clock) {
clock *=0.001;
var scale=2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.lineWidth=1;
ctx.strokeStyle="black";
var fieldOfView=Math.PI * 0.25;
var aspect=canvas.clientWidth / canvas.clientHeight;
var projection=m.perspective(fieldOfView, aspect, 1, 500);
var radius=5;
var eye=[ Math.sin(clock) * radius, 1, Math.cos(clock) * radius];
var target=[0, 0, 0];
var up=[0, 1, 0];
// left, right, bottom, top, near, far
var projection = m.ortho(-2 * aspect, 2 * aspect, -2, 2, -2, 2);
switch (clock % 4 | 0) {
// front
case 0:
var eye = [0, 0, 1];
var target = [0, 0, 0];
var up = [0, 1, 0];
break;
// right
case 1:
var eye = [1, 0, 0];
var target = [0, 0, 0];
var up = [0, 1, 0];
break;
// top
case 2:
var eye = [0, 1, 0];
var target = [0, 0, 0];
var up = [0, 0, -1];
break;
case 3:
var eye = [Math.sin(clock), 1, Math.cos(clock)];
var target = [0, 0, 0];
var up = [0, 1, 0];
break;
}
var view=m.lookAt(eye, target, up);
var worldViewProjection=m.multiplyMatrix(view, projection);
drawLines(cubeVertices, indices, worldViewProjection);
ctx.restore();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
function drawLines(cubeVertices, indices, worldViewProjection) {
ctx.beginPath();
// transform points
var points=[];
for (var ii=0;
ii < cubeVertices.length;
ii +=3) {
points.push(clipSpaceToCanvasSpace(m.transformPoint( worldViewProjection, [
cubeVertices[ii + 0], cubeVertices[ii + 1], cubeVertices[ii + 2]])));
}
for (var ii=0;
ii < indices.length;
ii +=2) {
var p0=points[indices[ii + 0]];
var p1=points[indices[ii + 1]];
ctx.moveTo(p0[0], p0[1]);
ctx.lineTo(p1[0], p1[1]);
}
ctx.stroke();
}
// clip space is -1 to 1
function clipSpaceToCanvasSpace(p) {
return [
(p[0] + 1) * ctx.canvas.width / 2,
(p[1] + 1) * ctx.canvas.height / 2,
];
}
}
<canvas id="c"></canvas>
话虽如此，您没有理由需要使用该正交矩阵。如果您不使用它，您的单位将保留在它们开始时的 space。换句话说，邻位矩阵的唯一要点是将 l<->r、t<->b、f<->n 缩放到 -1<->+1。您可能不需要任何缩放，或者您需要缩放到其他一些单位。
如果我能使用正确的术语，这个问题可能会更简单，但我对计算机图形学了解不多。我想做的是将一个盒子（长方体？- 3d 中的矩形）投影（正交）到 3 个平面（top/front/side 视图）。
我有这些限制
- 长方体的面平行于投影平面。所以盒子的一个面是投影。
- 只需要考虑矩形。
我使用 d3 绘制二维表示，并且对它的工作原理有一些直觉。所以，逻辑可能是这样的（如上图所示）
for top view, move the coordinate to top, left of the box, and discard height (y axis)
for front view, keep the coordinate, and discard depth (z axis)
for left side view, move coordinate to bottom, left and discard length (x axis)
我已经阅读了一些关于如何使用投影矩阵来简化计算的 opengl 教程，但我的情况更简单，所以我希望我不必将盒子的每条边都视为向量并应用多重矩阵变换在上面。此外，我了解将笛卡尔坐标转换为 svg 坐标的复杂性，但只要了解将盒子正交投影到 3 平面的正式方法就足够了。
有没有矩阵可以用来得到矩形的投影坐标？请帮我把这个问题形式化（这是一个已知的投影吗？）
如有不明之处请告知
提前致谢。
所以我的 WebGL WebGL WebGL 大脑在下面发布了 "generic-ish" 解决方案，您可以从任何角度任何方向查看
但是，如果您只想要右视图、俯视图和前视图，那么您只需使用每个点的 3 个坐标中的 2 个坐标 front = (x, y), top = (x, z), right = (z, y)
你只需在 2d 中的所有点之间画线（或者你在点之间画的任何东西），就像这样
var cubeVertices = [
-1, -1, -1, // 0
1, -1, -1, // 1
1, 1, -1, // 2
-1, 1, -1, // 3
-1, -1, 1, // 4
1, -1, 1, // 5
1, 1, 1, // 6
-1, 1, 1, // 7
//
// making some points in the middle for letters
//
-.5, -.5, 0, // 8 8 +--+ 9
-.3, -.5, 0, // 9 |
-.5, -.4, 0, // 10 10 +--+ 11
-.3, -.4, 0, // 11 |
-.5, -.3, 0, // 12 12 +
// 15
.3, 0, .3, // 13 13 +-+-+ 14
.5, 0, .3, // 14 |
.4, 0, .3, // 15 |
.4, 0, .5, // 16 + 16
0, -.5, -.5, // 17 17 +---+ 18
0, -.5, .5, // 18 | |
0, .5, -.5, // 19 20 +---+ 21
0, 0, -.5, // 20 | \
0, 0, .5, // 21 | \
0, .5, .5, // 22 19 + + 22
];
var indices = [
0, 1,
1, 2,
2, 3,
3, 0,
4, 5,
5, 6,
6, 7,
7, 4,
0, 4,
1, 5,
2, 6,
3, 7,
// f / front
8, 9,
8, 12,
10, 11,
// t / top
13, 14,
15, 16,
// r / right
17, 18,
18, 21,
17, 19,
20, 21,
20, 22,
];
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
ctx.font = "20px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// make 3 areas in canvas
ctx.fillStyle = "#FEE";
ctx.fillRect(width / 3 * 0, 0, width / 3, height);
ctx.fillStyle = "#EFE";
ctx.fillRect(width / 3 * 1, 0, width / 3, height);
ctx.fillStyle = "#EEF";
ctx.fillRect(width / 3 * 2, 0, width / 3, height);
ctx.fillStyle = "#000";
// Draw front
ctx.save();
ctx.translate(width / 6 * 1, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 0, 1, height / 4);
ctx.stroke();
ctx.fillText("front", 0, 60);
ctx.restore();
// Draw top
ctx.save();
ctx.translate(width / 6 * 3, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 0, 2, height / 4);
ctx.stroke();
ctx.fillText("top", 0, 60);
ctx.restore();
// Draw right
ctx.save();
ctx.translate(width / 6 * 5, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 2, 1, height / 4);
ctx.stroke();
ctx.fillText("right", 0, 60);
ctx.restore();
function addLines(ctx, vertices, indices, xIndex, yIndex, scale) {
for (var ii = 0; ii < indices.length; ii += 2) {
var offset0 = indices[ii + 0] * 3;
var offset1 = indices[ii + 1] * 3;
var p0 = vertices.slice(offset0, offset0 + 3);
var p1 = vertices.slice(offset1, offset1 + 3);
ctx.moveTo(p0[xIndex] * scale, p0[yIndex] * scale);
ctx.lineTo(p1[xIndex] * scale, p1[yIndex] * scale);
}
}
<canvas id="c"></canvas>
左用(-x, y)，下用(x, -z)，后用(-x, y)
通用解决方案（从任何角度看）
您可能想查看 this article 和之前的几篇文章。
如果您有 3d 矩阵库，最简单的方法是使用 lookat 函数将 ortho 矩阵与视图矩阵相乘。（大多数 3d 库都有正交投影函数和观察功能）
othro * inverse(lookAt(eye, target, up));
前面在哪里
eye = [0, 0, 1];
target = [0, 0, 0];
up = [0, 1, 0];
左边是
eye = [-1, 0, 0];
target = [0, 0, 0];
up = [0, 1, 0];
顶部在哪里
eye = [0, 1, 0];
target = [0, 0, 0];
up = [0, 0, -1];
当然，如果你将相机放在直轴上，你可以通过插入正确的值自己制作矩阵，如果你查看任何 ortho 和 lookAt 函数或只要 运行 它们一旦具有上述值就应该很清楚矩阵需要是什么。我认为使用图书馆可能更容易。更好的是，如果你试图让你的盒子的一个面成为你的视锥体的开始，你可以将盒子坐标插入任何典型的 ortho 函数
这是典型的
function ortho(left, right, bottom, top, near, far) {
return [
2 / (right - left), 0, 0, 0,
0, 2 / (top - bottom), 0, 0,
0, 0, -1 / (far - near), 0,
(right + left) / (left - right),
(top + bottom) / (bottom - top),
-near / (near - far),
1,
];
}
如果不清楚的话，这个矩阵所做的就是缩放每个维度，以便 right - left、top - bottom 和 far - near 的范围都变成 2 个单位大。这分别是前 3 行。最后一行将每个维度中的单位移动 -1 个单位，这样您最终会得到每个维度中从 -1 到 +1 的值，因为这是 GL/WebGL 需要能够呈现的值。参见 this article。
这是一个例子
"use strict";
var ThreeDMath = (function() {
var subVector = function(a, b) {
var r = [];
var aLength = a.length;
for (var i = 0; i < aLength; ++i)
r[i] = a[i] - b[i];
return r;
};
var dot = function(a, b) {
var r = 0.0;
var aLength = a.length;
for (var i = 0; i < aLength; ++i)
r += a[i] * b[i];
return r;
};
var cross = function(a, b) {
return [a[1] * b[2] - a[2] * b[1],
a[2] * b[0] - a[0] * b[2],
a[0] * b[1] - a[1] * b[0]
];
};
var normalize = function(a) {
var r = [];
var n = 0.0;
var aLength = a.length;
for (var i = 0; i < aLength; ++i)
n += a[i] * a[i];
n = Math.sqrt(n);
if (n > 0.00001) {
for (var i = 0; i < aLength; ++i)
r[i] = a[i] / n;
} else {
r = [0, 0, 0];
}
return r;
};
var transformPoint = function(m, v) {
var v0 = v[0];
var v1 = v[1];
var v2 = v[2];
var d = v0 * m[0 * 4 + 3] + v1 * m[1 * 4 + 3] + v2 * m[2 * 4 + 3] + m[3 * 4 + 3];
return [(v0 * m[0 * 4 + 0] + v1 * m[1 * 4 + 0] + v2 * m[2 * 4 + 0] + m[3 * 4 + 0]) / d,
(v0 * m[0 * 4 + 1] + v1 * m[1 * 4 + 1] + v2 * m[2 * 4 + 1] + m[3 * 4 + 1]) / d,
(v0 * m[0 * 4 + 2] + v1 * m[1 * 4 + 2] + v2 * m[2 * 4 + 2] + m[3 * 4 + 2]) / d
];
};
var identity = function() {
return [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
];
};
var multiplyMatrix = function(a, b) {
var a00 = a[0 * 4 + 0];
var a01 = a[0 * 4 + 1];
var a02 = a[0 * 4 + 2];
var a03 = a[0 * 4 + 3];
var a10 = a[1 * 4 + 0];
var a11 = a[1 * 4 + 1];
var a12 = a[1 * 4 + 2];
var a13 = a[1 * 4 + 3];
var a20 = a[2 * 4 + 0];
var a21 = a[2 * 4 + 1];
var a22 = a[2 * 4 + 2];
var a23 = a[2 * 4 + 3];
var a30 = a[3 * 4 + 0];
var a31 = a[3 * 4 + 1];
var a32 = a[3 * 4 + 2];
var a33 = a[3 * 4 + 3];
var b00 = b[0 * 4 + 0];
var b01 = b[0 * 4 + 1];
var b02 = b[0 * 4 + 2];
var b03 = b[0 * 4 + 3];
var b10 = b[1 * 4 + 0];
var b11 = b[1 * 4 + 1];
var b12 = b[1 * 4 + 2];
var b13 = b[1 * 4 + 3];
var b20 = b[2 * 4 + 0];
var b21 = b[2 * 4 + 1];
var b22 = b[2 * 4 + 2];
var b23 = b[2 * 4 + 3];
var b30 = b[3 * 4 + 0];
var b31 = b[3 * 4 + 1];
var b32 = b[3 * 4 + 2];
var b33 = b[3 * 4 + 3];
return [a00 * b00 + a01 * b10 + a02 * b20 + a03 * b30,
a00 * b01 + a01 * b11 + a02 * b21 + a03 * b31,
a00 * b02 + a01 * b12 + a02 * b22 + a03 * b32,
a00 * b03 + a01 * b13 + a02 * b23 + a03 * b33,
a10 * b00 + a11 * b10 + a12 * b20 + a13 * b30,
a10 * b01 + a11 * b11 + a12 * b21 + a13 * b31,
a10 * b02 + a11 * b12 + a12 * b22 + a13 * b32,
a10 * b03 + a11 * b13 + a12 * b23 + a13 * b33,
a20 * b00 + a21 * b10 + a22 * b20 + a23 * b30,
a20 * b01 + a21 * b11 + a22 * b21 + a23 * b31,
a20 * b02 + a21 * b12 + a22 * b22 + a23 * b32,
a20 * b03 + a21 * b13 + a22 * b23 + a23 * b33,
a30 * b00 + a31 * b10 + a32 * b20 + a33 * b30,
a30 * b01 + a31 * b11 + a32 * b21 + a33 * b31,
a30 * b02 + a31 * b12 + a32 * b22 + a33 * b32,
a30 * b03 + a31 * b13 + a32 * b23 + a33 * b33
];
};
var inverse = function(m) {
var tmp_0 = m[2 * 4 + 2] * m[3 * 4 + 3];
var tmp_1 = m[3 * 4 + 2] * m[2 * 4 + 3];
var tmp_2 = m[1 * 4 + 2] * m[3 * 4 + 3];
var tmp_3 = m[3 * 4 + 2] * m[1 * 4 + 3];
var tmp_4 = m[1 * 4 + 2] * m[2 * 4 + 3];
var tmp_5 = m[2 * 4 + 2] * m[1 * 4 + 3];
var tmp_6 = m[0 * 4 + 2] * m[3 * 4 + 3];
var tmp_7 = m[3 * 4 + 2] * m[0 * 4 + 3];
var tmp_8 = m[0 * 4 + 2] * m[2 * 4 + 3];
var tmp_9 = m[2 * 4 + 2] * m[0 * 4 + 3];
var tmp_10 = m[0 * 4 + 2] * m[1 * 4 + 3];
var tmp_11 = m[1 * 4 + 2] * m[0 * 4 + 3];
var tmp_12 = m[2 * 4 + 0] * m[3 * 4 + 1];
var tmp_13 = m[3 * 4 + 0] * m[2 * 4 + 1];
var tmp_14 = m[1 * 4 + 0] * m[3 * 4 + 1];
var tmp_15 = m[3 * 4 + 0] * m[1 * 4 + 1];
var tmp_16 = m[1 * 4 + 0] * m[2 * 4 + 1];
var tmp_17 = m[2 * 4 + 0] * m[1 * 4 + 1];
var tmp_18 = m[0 * 4 + 0] * m[3 * 4 + 1];
var tmp_19 = m[3 * 4 + 0] * m[0 * 4 + 1];
var tmp_20 = m[0 * 4 + 0] * m[2 * 4 + 1];
var tmp_21 = m[2 * 4 + 0] * m[0 * 4 + 1];
var tmp_22 = m[0 * 4 + 0] * m[1 * 4 + 1];
var tmp_23 = m[1 * 4 + 0] * m[0 * 4 + 1];
var t0 = (tmp_0 * m[1 * 4 + 1] + tmp_3 * m[2 * 4 + 1] + tmp_4 * m[3 * 4 + 1]) -
(tmp_1 * m[1 * 4 + 1] + tmp_2 * m[2 * 4 + 1] + tmp_5 * m[3 * 4 + 1]);
var t1 = (tmp_1 * m[0 * 4 + 1] + tmp_6 * m[2 * 4 + 1] + tmp_9 * m[3 * 4 + 1]) -
(tmp_0 * m[0 * 4 + 1] + tmp_7 * m[2 * 4 + 1] + tmp_8 * m[3 * 4 + 1]);
var t2 = (tmp_2 * m[0 * 4 + 1] + tmp_7 * m[1 * 4 + 1] + tmp_10 * m[3 * 4 + 1]) -
(tmp_3 * m[0 * 4 + 1] + tmp_6 * m[1 * 4 + 1] + tmp_11 * m[3 * 4 + 1]);
var t3 = (tmp_5 * m[0 * 4 + 1] + tmp_8 * m[1 * 4 + 1] + tmp_11 * m[2 * 4 + 1]) -
(tmp_4 * m[0 * 4 + 1] + tmp_9 * m[1 * 4 + 1] + tmp_10 * m[2 * 4 + 1]);
var d = 1.0 / (m[0 * 4 + 0] * t0 + m[1 * 4 + 0] * t1 + m[2 * 4 + 0] * t2 + m[3 * 4 + 0] * t3);
return [d * t0, d * t1, d * t2, d * t3,
d * ((tmp_1 * m[1 * 4 + 0] + tmp_2 * m[2 * 4 + 0] + tmp_5 * m[3 * 4 + 0]) -
(tmp_0 * m[1 * 4 + 0] + tmp_3 * m[2 * 4 + 0] + tmp_4 * m[3 * 4 + 0])),
d * ((tmp_0 * m[0 * 4 + 0] + tmp_7 * m[2 * 4 + 0] + tmp_8 * m[3 * 4 + 0]) -
(tmp_1 * m[0 * 4 + 0] + tmp_6 * m[2 * 4 + 0] + tmp_9 * m[3 * 4 + 0])),
d * ((tmp_3 * m[0 * 4 + 0] + tmp_6 * m[1 * 4 + 0] + tmp_11 * m[3 * 4 + 0]) -
(tmp_2 * m[0 * 4 + 0] + tmp_7 * m[1 * 4 + 0] + tmp_10 * m[3 * 4 + 0])),
d * ((tmp_4 * m[0 * 4 + 0] + tmp_9 * m[1 * 4 + 0] + tmp_10 * m[2 * 4 + 0]) -
(tmp_5 * m[0 * 4 + 0] + tmp_8 * m[1 * 4 + 0] + tmp_11 * m[2 * 4 + 0])),
d * ((tmp_12 * m[1 * 4 + 3] + tmp_15 * m[2 * 4 + 3] + tmp_16 * m[3 * 4 + 3]) -
(tmp_13 * m[1 * 4 + 3] + tmp_14 * m[2 * 4 + 3] + tmp_17 * m[3 * 4 + 3])),
d * ((tmp_13 * m[0 * 4 + 3] + tmp_18 * m[2 * 4 + 3] + tmp_21 * m[3 * 4 + 3]) -
(tmp_12 * m[0 * 4 + 3] + tmp_19 * m[2 * 4 + 3] + tmp_20 * m[3 * 4 + 3])),
d * ((tmp_14 * m[0 * 4 + 3] + tmp_19 * m[1 * 4 + 3] + tmp_22 * m[3 * 4 + 3]) -
(tmp_15 * m[0 * 4 + 3] + tmp_18 * m[1 * 4 + 3] + tmp_23 * m[3 * 4 + 3])),
d * ((tmp_17 * m[0 * 4 + 3] + tmp_20 * m[1 * 4 + 3] + tmp_23 * m[2 * 4 + 3]) -
(tmp_16 * m[0 * 4 + 3] + tmp_21 * m[1 * 4 + 3] + tmp_22 * m[2 * 4 + 3])),
d * ((tmp_14 * m[2 * 4 + 2] + tmp_17 * m[3 * 4 + 2] + tmp_13 * m[1 * 4 + 2]) -
(tmp_16 * m[3 * 4 + 2] + tmp_12 * m[1 * 4 + 2] + tmp_15 * m[2 * 4 + 2])),
d * ((tmp_20 * m[3 * 4 + 2] + tmp_12 * m[0 * 4 + 2] + tmp_19 * m[2 * 4 + 2]) -
(tmp_18 * m[2 * 4 + 2] + tmp_21 * m[3 * 4 + 2] + tmp_13 * m[0 * 4 + 2])),
d * ((tmp_18 * m[1 * 4 + 2] + tmp_23 * m[3 * 4 + 2] + tmp_15 * m[0 * 4 + 2]) -
(tmp_22 * m[3 * 4 + 2] + tmp_14 * m[0 * 4 + 2] + tmp_19 * m[1 * 4 + 2])),
d * ((tmp_22 * m[2 * 4 + 2] + tmp_16 * m[0 * 4 + 2] + tmp_21 * m[1 * 4 + 2]) -
(tmp_20 * m[1 * 4 + 2] + tmp_23 * m[2 * 4 + 2] + tmp_17 * m[0 * 4 + 2]))
];
};
var perspective = function(angle, aspect, near, far) {
var f = Math.tan(Math.PI * 0.5 - 0.5 * angle);
var rangeInv = 1.0 / (near - far);
return [
f / aspect, 0, 0, 0,
0, f, 0, 0,
0, 0, (near + far) * rangeInv, -1,
0, 0, near * far * rangeInv * 2, 0
];
};
var cameraLookAt = function(eye, target, up) {
var vz = normalize(subVector(eye, target));
var vx = normalize(cross(up, vz));
var vy = cross(vz, vx);
return inverse([
vx[0], vx[1], vx[2], 0,
vy[0], vy[1], vy[2], 0,
vz[0], vz[1], vz[2], 0, -dot(vx, eye), -dot(vy, eye), -dot(vz, eye), 1
]);
};
var lookAt = function(eye, target, up) {
return inverse(cameraLookAt(
eye, target, up));
};
function ortho(left, right, bottom, top, near, far) {
return [
2 / (right - left), 0, 0, 0,
0, 2 / (top - bottom), 0, 0,
0, 0, -1 / (far - near), 0,
(right + left) / (left - right),
(top + bottom) / (bottom - top), -near / (near - far),
1,
];
}
return {
identity: identity,
perspective: perspective,
cameraLookAt: cameraLookAt,
lookAt: lookAt,
multiplyMatrix: multiplyMatrix,
transformPoint: transformPoint,
ortho: ortho,
};
})();
var m=ThreeDMath;
window.onload=main;
function main() {
var cubeVertices=[
-1, -1, -1, // 0
1, -1, -1, // 1
1, 1, -1, // 2
-1, 1, -1, // 3
-1, -1, 1, // 4
1, -1, 1, // 5
1, 1, 1, // 6
-1, 1, 1, // 7
//
// making some points in the middle for letters
//
-.5, -.5, 0, // 8 8 +--+ 9
-.3, -.5, 0, // 9 |
-.5, -.4, 0, // 10 10 +--+ 11
-.3, -.4, 0, // 11 |
-.5, -.3, 0, // 12 12 +
// 15
.3, 0, .3, // 13 13 +-+-+ 14
.5, 0, .3, // 14 |
.4, 0, .3, // 15 |
.4, 0, .5, // 16 + 16
0, -.5, -.5, // 17 17 +---+ 18
0, -.5, .5, // 18 | |
0, .5, -.5, // 19 20 +---+ 21
0, 0, -.5, // 20 | \
0, 0, .5, // 21 | \
0, .5, .5, // 22 19 + + 22
];
var indices=[
0, 1,
1, 2,
2, 3,
3, 0,
4, 5,
5, 6,
6, 7,
7, 4,
0, 4,
1, 5,
2, 6,
3, 7,
// f / front
8, 9,
8, 12,
10, 11,
// t / top
13, 14,
15, 16,
// r / right
17, 18,
18, 21,
17, 19,
20, 21,
20, 22,
];
var canvas=document.getElementById("c");
var ctx=canvas.getContext("2d");
var then=0;
function render(clock) {
clock *=0.001;
var scale=2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.lineWidth=1;
ctx.strokeStyle="black";
var fieldOfView=Math.PI * 0.25;
var aspect=canvas.clientWidth / canvas.clientHeight;
var projection=m.perspective(fieldOfView, aspect, 1, 500);
var radius=5;
var eye=[ Math.sin(clock) * radius, 1, Math.cos(clock) * radius];
var target=[0, 0, 0];
var up=[0, 1, 0];
// left, right, bottom, top, near, far
var projection = m.ortho(-2 * aspect, 2 * aspect, -2, 2, -2, 2);
switch (clock % 4 | 0) {
// front
case 0:
var eye = [0, 0, 1];
var target = [0, 0, 0];
var up = [0, 1, 0];
break;
// right
case 1:
var eye = [1, 0, 0];
var target = [0, 0, 0];
var up = [0, 1, 0];
break;
// top
case 2:
var eye = [0, 1, 0];
var target = [0, 0, 0];
var up = [0, 0, -1];
break;
case 3:
var eye = [Math.sin(clock), 1, Math.cos(clock)];
var target = [0, 0, 0];
var up = [0, 1, 0];
break;
}
var view=m.lookAt(eye, target, up);
var worldViewProjection=m.multiplyMatrix(view, projection);
drawLines(cubeVertices, indices, worldViewProjection);
ctx.restore();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
function drawLines(cubeVertices, indices, worldViewProjection) {
ctx.beginPath();
// transform points
var points=[];
for (var ii=0;
ii < cubeVertices.length;
ii +=3) {
points.push(clipSpaceToCanvasSpace(m.transformPoint( worldViewProjection, [
cubeVertices[ii + 0], cubeVertices[ii + 1], cubeVertices[ii + 2]])));
}
for (var ii=0;
ii < indices.length;
ii +=2) {
var p0=points[indices[ii + 0]];
var p1=points[indices[ii + 1]];
ctx.moveTo(p0[0], p0[1]);
ctx.lineTo(p1[0], p1[1]);
}
ctx.stroke();
}
// clip space is -1 to 1
function clipSpaceToCanvasSpace(p) {
return [
(p[0] + 1) * ctx.canvas.width / 2,
(p[1] + 1) * ctx.canvas.height / 2,
];
}
}
<canvas id="c"></canvas>
话虽如此，您没有理由需要使用该正交矩阵。如果您不使用它，您的单位将保留在它们开始时的 space。换句话说，邻位矩阵的唯一要点是将 l<->r、t<->b、f<->n 缩放到 -1<->+1。您可能不需要任何缩放，或者您需要缩放到其他一些单位。