-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathz_positive.html
107 lines (91 loc) · 5.51 KB
/
z_positive.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Z negtive test</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="./js/three.min.js"></script>
<script>
var width = 640;
var height = 480;
var scene = new THREE.Scene();
// 设置摄像机内参矩阵 K
// 由于观察方向是 z 的正半轴，因此 K = [[fx, 0, u0], [0, fy, v0], [0, 0, 1]
// setup camera intrinsic matrix K
// since the observation direction is the positive half axis of z, K = [[fx, 0, u0], [0, fy, v0], [0, 0, 1]
var fx = 565.5;
var fy = 516.3;
var u0 = 328.2;
var v0 = 238.8;
var near = 0.5;
var far = 1000;
var l = - u0 / fx * near;
var r = (width - u0) / fx * near;
var t = - v0 / fy * near;
var b = (height - v0) / fy * near;
var A = - (far + near) / (near - far);
var B = 2 * (far * near) / (near - far);
var projectionMatrix = new THREE.Matrix4();
projectionMatrix.set(2*near/(r-l), 0, - (r + l) / (r - l), 0,
0, 2*near/(t - b), - (t + b) / (t - b), 0,
0, 0, A, B,
0, 0, 1, 0);
// You can random setup the default value of PerspectiveCamera below, it will be replaced by the projectionMatrix above
var camera = new THREE.PerspectiveCamera( 15.0, width / height, 0.5, 100000 ); // 这里随意设置，该例子中的投影矩阵是自己计算的
camera.projectionMatrix = projectionMatrix; // 设置投影矩阵取代上面初始化时候的设置
// 旋转和平移矩阵 (rotation and translation matrix) [R t; 0 0 0 1]
// q = R * p + t, p 是空间中的一点在世界坐标系中的坐标，q 是该点在摄像机坐标系中的坐标
// 这里 R/t 的定义仅仅是我习惯的定义
// q = R * p + t, p is the coordinate of a point in space in the world coordinate system,
// and q is the coordinate of the point in the camera coordinate system
var transformMatrix = new THREE.Matrix4();
transformMatrix.set(0.4608, 0, -0.8875, 3.5841,
0.4045, -0.8901, 0.2100, 9.0800,
-0.7900, -0.4558, -0.4102, 70.0336,
0, 0, 0, 1);
// 注意！ three.js 里面camera定义的矩阵是世界坐标系到相机坐标系的变换矩阵，和我常用的定义相反，因此需要求逆.
// 如果在OpenGL里面直接操作ModelView那个矩阵则不用求逆
// Note! The matrix defined in the camera in three.js is the transformation matrix from the world coordinate system to the camera coordinate system,
// which is opposite to the definition I often use, so it needs to be inverted.
// If you directly operate the ModelView matrix in OpenGL, you don't need to invert it.
camera.applyMatrix(transformMatrix.getInverse(transformMatrix));
// [u;v;1] = K * (R * [x; y; z] + t)) / zc
// 注意这里使用的 R 和 t 就是transformMatrix里面的值，不用求逆
// Note that the R and t used here are the values in transformMatrix, no need to invert
var O = new THREE.Vector3( 0, 0, 0); // original point in world; [u, v] = [357.14, 305.74]
var X = new THREE.Vector3( 10, 0, 0); // a point on axis x; [u, v] = [402.76, 347.86]
var Y = new THREE.Vector3( 0, 10, 0); // a point on axis y; [u, v] = [359.15, 240.21]
var Z = new THREE.Vector3( 0, 0, 10); // a point on axis z; [u, v] = [282.82, 326.35]
var P = new THREE.Vector3( 10, 15, 20); // an arbitrary point; [u, v] = [213.43, 282.36]
var Q = new THREE.Vector3( -10, 15, -20); // another arbitrary point; [u, v] = [447.47, 157.31]
addVector(scene, O, X, 0xff0000);
addVector(scene, O, Y, 0x00ff00);
addVector(scene, O, Z, 0x0000ff);
addVector(scene, O, P, 0xffffff);
addVector(scene, O, Q, 0xff00ff);
// 图形渲染完毕后可以将鼠标移至上面那些点的位置，查看是否与上面计算的的图像坐标(u, v)一致
// After the graphics are rendered, you can move the mouse to the position of those points above to see
//if the image coordinates (u, v) calculated above are consistent
document.addEventListener("mousemove", function(event) {
console.log("Mouse position:", event.clientX, event.clientY);
});
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);
function addVector(scene, startPoint, endPoint, color) {
var geometry = new THREE.Geometry();
geometry.vertices.push(startPoint);
geometry.vertices.push(endPoint);
var material = new THREE.LineBasicMaterial( { color: color });
var line = new THREE.Line( geometry, material );
scene.add( line );
}
</script>
</body>
</html>