diff --git a/assets/index.html b/assets/index.html
index 3d35f96..b46af0e 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -219,18 +219,30 @@
ctx.shadowBlur = 15;
ctx.shadowColor = '#ff0000';
- this.vertices.forEach(v => {
+ const transformedVerts = this.vertices.map(v => {
+ const rot = rotateY(v, this.yaw || 0);
+ const cosR = Math.cos(this.roll || 0), sinR = Math.sin(this.roll || 0);
+ const x1 = rot.x * cosR - rot.y * sinR;
+ const y1 = rot.x * sinR + rot.y * cosR;
+ const cosP = Math.cos(this.pitch || 0), sinP = Math.sin(this.pitch || 0);
+ const y2 = y1 * cosP - rot.z * sinP;
+ const z2 = y1 * sinP + rot.z * cosP;
+ return new Point3D(x1, y2, 150 + z2);
+ });
+
+ transformedVerts.forEach(v => {
const proj = v.project();
+ if (!proj) return;
ctx.beginPath();
ctx.arc(proj.x, proj.y, 3, 0, Math.PI * 2);
ctx.fillStyle = '#ff0000';
ctx.fill();
});
- for (let i = 0; i < this.vertices.length - 1; i++) {
- if (i === 7) continue;
- const p1 = this.vertices[i].project();
- const p2 = this.vertices[i + 1].project();
+ for (let i = 0; i < transformedVerts.length - 1; i++) {
+ const p1 = transformedVerts[i].project();
+ const p2 = transformedVerts[i + 1].project();
+ if (!p1 || !p2) continue;
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);