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);