简单的正投影的盒子
如果我可以使用正确的术语但是我对计算机图形知之甚少，这个问题可能会更简单。我想要做的是将一个盒子（Cuboid？ - 3d中的矩形）投影（正交）到3个平面（顶部/前部/侧面视图）。
我有这些约束
- 盒子的表面平行于投影平面。所以盒子的一面是投影。
- 只需要考虑矩形形状。
我使用d3绘制2d表示，并对它的工作方式有一些直觉。所以，逻辑可能就像（如上图所示）
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个计划上就足够了。
是否有可用于获取矩形投影坐标的矩阵？请帮我正式化这个问题（这是一个已知的投影吗？）
如果我不清楚，请告诉我。
提前致谢。
1 个答案:
答案 0 :(得分：2)
所以我的WebGL WebGL WebGL大脑在下面发布了“generic-ish”解决方案，您可以从任何角度查看任何方向
但是，如果您只想要右视图，顶视图，正视图，那么您只需使用3个坐标中的2个，每个点前面=（x，y），顶部=（x，z），右边=（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矩阵库，最简单的方法是使用ortho函数将lookat矩阵与视图矩阵相乘。（大多数3d库具有正交投影函数和lookat功能）
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];
其中top是
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>
话虽这么说，你没有理由需要使用那个正矩阵。如果你不使用它，你的单位将留在他们开始的空间。换句话说，邻位矩阵的唯一点是将1-r，t-b，f-n缩放到-1 -1 + 1。您可能不需要任何缩放，或者您需要缩放到其他单位。
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？