-
Notifications
You must be signed in to change notification settings - Fork 0
/
cube.js
112 lines (87 loc) · 3.05 KB
/
cube.js
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
108
109
110
111
112
import { Point2D, Point3D } from "./utils.js";
export class Cube {
constructor(x, y, z, size) {
Point3D.call(this, x, y, z);
size *= 0.5;
this.vertices = [
new Point3D(x - size, y - size, z - size),
new Point3D(x + size, y - size, z - size),
new Point3D(x + size, y + size, z - size),
new Point3D(x - size, y + size, z - size),
new Point3D(x - size, y - size, z + size),
new Point3D(x + size, y - size, z + size),
new Point3D(x + size, y + size, z + size),
new Point3D(x - size, y + size, z + size),
];
this.faces = [
[0, 1, 2, 3],
[0, 4, 5, 1],
[1, 5, 6, 2],
[3, 2, 6, 7],
[0, 3, 7, 4],
[4, 7, 6, 5],
];
}
resize(stageWidth, stageHeight) {}
// Project our element from its 3D world to the 2D canvas
project(points3d, stageWidth, stageHeight) {
const points2d = new Array(points3d.length);
const focal_length = 200;
for (let index = points3d.length - 1; index > -1; --index) {
const p = points3d[index];
const x = p.x * (focal_length / p.z) + stageWidth * 0.5;
const y = p.y * (focal_length / p.z) + stageHeight * 0.5;
points2d[index] = new Point2D(x, y);
}
return points2d;
}
animate(ctx, stageWidth, stageHeight) {
const vertices = this.project(this.vertices, stageWidth, stageHeight);
for (let index = this.faces.length - 1; index > -1; --index) {
const face = this.faces[index];
const p1 = this.vertices[face[0]];
const p2 = this.vertices[face[1]];
const p3 = this.vertices[face[2]];
const v1 = new Point3D(p2.x - p1.x, p2.y - p1.y, p2.z - p1.z);
const v2 = new Point3D(p3.x - p1.x, p3.y - p1.y, p3.z - p1.z);
const n = new Point3D(
v1.y * v2.z - v1.z * v2.y,
v1.z * v2.x - v1.x * v2.z,
v1.x * v2.y - v1.y * v2.x
);
if (-p1.x * n.x + -p1.y * n.y + -p1.z * n.z <= 0) {
ctx.beginPath();
ctx.fillStyle = "#fdd700";
ctx.moveTo(vertices[face[0]].x, vertices[face[0]].y);
ctx.lineTo(vertices[face[1]].x, vertices[face[1]].y);
ctx.lineTo(vertices[face[2]].x, vertices[face[2]].y);
ctx.lineTo(vertices[face[3]].x, vertices[face[3]].y);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}
}
rotateX(radian) {
const cosine = Math.cos(radian);
const sine = Math.sin(radian);
for (let index = this.vertices.length - 1; index > -1; --index) {
const p = this.vertices[index];
const y = (p.y - this.y) * cosine - (p.z - this.z) * sine;
const z = (p.y - this.y) * sine + (p.z - this.z) * cosine;
p.y = y + this.y;
p.z = z + this.z;
}
}
rotateY(radian) {
const cosine = Math.cos(radian);
const sine = Math.sin(radian);
for (let index = this.vertices.length - 1; index > -1; --index) {
const p = this.vertices[index];
const x = (p.z - this.z) * sine + (p.x - this.x) * cosine;
const z = (p.z - this.z) * cosine - (p.x - this.x) * sine;
p.x = x + this.x;
p.z = z + this.z;
}
}
}