Fix airplane rendering

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++) {
+                for (let i = 0; i < transformedVerts.length - 1; i++) {
-                    if (i === 7) continue;
+                    const p1 = transformedVerts[i].project();
-                    const p1 = this.vertices[i].project();
+                    const p2 = transformedVerts[i + 1].project();
-                    const p2 = this.vertices[i + 1].project();
+                    if (!p1 || !p2) continue;
                     ctx.beginPath();
                     ctx.moveTo(p1.x, p1.y);
                     ctx.lineTo(p2.x, p2.y);