Detailed Flight Simulator

Okay, let's enhance the visual detail significantly and implement the requested Q/E/WASD control scheme. This involves: 1. **More Detailed Models:** Adding more lines/polygons to define shapes better. 2. **Polygon Rendering:** Implementing basic filled polygons for buildings and potentially parts of the plane/trees. This requires functions for projection, back-face culling (optional but good), and drawing. 3. **Control Scheme Update:** Mapping Q/E/W/A/S/D to the corresponding flight controls. 4. **Control Tuning:** Adjusting sensitivity for easier handling. 5. **Refactoring:** Minor restructuring to accommodate polygon drawing. **Note:** True 3D rendering with textures, lighting, and complex shapes is very challenging without dedicated libraries (like Three.js). This implementation will use filled, flat-shaded polygons and more detailed wireframes, which is a step up but still visually basic compared to modern simulators. Detailed Flight Simulator

Controls:
W/S: Speed Up/Down
A/D: Yaw Left/Right
Q/E: Pitch Down/Up
(Shift + A/D for Roll - Optional)

body { margin: 0; overflow: hidden; background-color: #70b0ff; /* Sky blue */ display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: sans-serif; } canvas { display: block; background-color: #000; /* Fallback if JS fails */ } #info { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.6); color: white; padding: 8px 12px; border-radius: 5px; font-size: 0.9em; line-height: 1.4; } // --- Math Helpers --- function toRadians(degrees) { return degrees * Math.PI / 180; } function addVectors(v1, v2) { return { x: v1.x + v2.x, y: v1.y + v2.y, z: v1.z + v2.z }; } function subtractVectors(v1, v2) { return { x: v1.x - v2.x, y: v1.y - v2.y, z: v1.z - v2.z }; } function crossProduct(v1, v2) { return { x: v1.y * v2.z - v1.z * v2.y, y: v1.z * v2.x - v1.x * v2.z, z: v1.x * v2.y - v1.y * v2.x }; } function dotProduct(v1, v2) { return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z; } function normalizeVector(v) { const mag = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z); if (mag === 0) return { x: 0, y: 0, z: 0 }; return { x: v.x / mag, y: v.y / mag, z: v.z / mag }; } // Rotates point p around origin using yaw, pitch, roll (ZYX order) function rotatePoint(p, yaw, pitch, roll) { let x = p.x, y = p.y, z = p.z; // Roll (around Z) const cosR = Math.cos(roll); const sinR = Math.sin(roll); let rx = x * cosR - y * sinR; let ry = x * sinR + y * cosR; x = rx; y = ry; // Pitch (around X) const cosP = Math.cos(pitch); const sinP = Math.sin(pitch); let rz = y * sinP + z * cosP; ry = y * cosP - z * sinP; y = ry; z = rz; // Yaw (around Y) const cosY = Math.cos(yaw); const sinY = Math.sin(yaw); rx = x * cosY + z * sinY; rz = -x * sinY + z * cosY; x = rx; z = rz; return { x: x, y: y, z: z }; } // Transforms a point from world space to camera space function worldToCameraSpace(point, camera) { let dx = point.x - camera.x; let dy = point.y - camera.y; let dz = point.z - camera.z; // Rotate opposite to camera's yaw and pitch const cosYaw = Math.cos(-camera.yaw); const sinYaw = Math.sin(-camera.yaw); let rotatedX = cosYaw * dx + sinYaw * dz; let rotatedZ = -sinYaw * dx + cosYaw * dz; const cosPitch = Math.cos(-camera.pitch); const sinPitch = Math.sin(-camera.pitch); let rotatedY = cosPitch * dy - sinPitch * rotatedZ; rotatedZ = sinPitch * dy + cosPitch * rotatedZ; return { x: rotatedX, y: rotatedY, z: rotatedZ }; } // Projects a point from camera space to screen space function projectToScreen(cameraPoint, camera, width, height) { const { x: cameraX, y: cameraY, z: cameraZ } = cameraPoint; if (cameraZ <= camera.near || cameraZ > camera.far) { return null; // Clip if behind or too far } const focalLength = 1 / Math.tan(toRadians(camera.fov) / 2); // Calculate screen coordinates relative to center const screenXRelative = (cameraX * focalLength) / cameraZ; const screenYRelative = (-cameraY * focalLength) / cameraZ; // Y is inverted // Convert to absolute screen coordinates (origin top-left) const screenX = screenXRelative * (width / 2) + (width / 2); const screenY = screenYRelative * (height / 2) + (height / 2); return { x: screenX, y: screenY, z: cameraZ }; // Keep z for depth sorting } // --- Detailed Plane Model --- const planeModel = { vertices: [ // Fuselage (simplified tube) { x: 0, y: 0.3, z: 2.5 }, { x: 0.3, y: 0, z: 2.3 }, { x: 0, y: -0.2, z: 2.5 }, { x: -0.3, y: 0, z: 2.3 }, // Nose cone front { x: 0, y: 0.5, z: 1.5 }, { x: 0.6, y: 0, z: 1.5 }, { x: 0, y: -0.4, z: 1.8 }, { x: -0.6, y: 0, z: 1.5 }, // Fuselage front wider { x: 0, y: 0.6, z: -2.0 }, { x: 0.7, y: 0, z: -2.0 }, { x: 0, y: -0.5, z: -1.8 }, { x: -0.7, y: 0, z: -2.0 }, // Fuselage rear { x: 0, y: 0.2, z: -3.0 }, { x: 0.2, y: 0, z: -3.0 }, { x: 0, y: -0.1, z: -3.0 }, { x: -0.2, y: 0, z: -3.0 }, // Tail cone end // Wings (with thickness) { x: 0.5, y: 0.1, z: 0.5 }, { x: 4.0, y: 0.2, z: -0.5 }, { x: 4.0, y: -0.1, z: -0.5 }, { x: 0.5, y: -0.2, z: 0.5 }, // Right Wing Top/Bottom Root/Tip { x: -0.5, y: 0.1, z: 0.5 }, { x: -4.0, y: 0.2, z: -0.5 }, { x: -4.0, y: -0.1, z: -0.5 }, { x: -0.5, y: -0.2, z: 0.5 }, // Left Wing // Tail Fin (Vertical Stabilizer) { x: 0, y: 0.1, z: -2.2 }, { x: 0, y: 1.5, z: -2.8 }, { x: 0, y: 0.1, z: -3.0 }, // Base, Top, Rear // Horizontal Stabilizers { x: 0.1, y: 0.05, z: -2.5 }, { x: 1.5, y: 0.05, z: -2.8 }, { x: 1.5, y: -0.05, z: -2.8 }, { x: 0.1, y: -0.05, z: -2.5 }, // Right H-Stab { x: -0.1, y: 0.05, z: -2.5 }, { x: -1.5, y: 0.05, z: -2.8 }, { x: -1.5, y: -0.05, z: -2.8 }, { x: -0.1, y: -0.05, z: -2.5 }, // Left H-Stab ], // Define faces using indices into the vertices array faces: [ // Fuselage sides (example - needs more faces for smooth look) { v: [4, 5, 9, 8], color: '#c0c0c0' }, { v: [5, 6, 10, 9], color: '#b0b0b0' }, { v: [6, 7, 11, 10], color: '#a0a0a0' }, { v: [7, 4, 8, 11], color: '#b0b0b0' }, // Nose cone (example) { v: [0, 1, 5, 4], color: '#d0d0d0' }, { v: [1, 2, 6, 5], color: '#c0c0c0' }, { v: [2, 3, 7, 6], color: '#b0b0b0' }, { v: [3, 0, 4, 7], color: '#c0c0c0' }, // Tail cone (example) { v: [8, 9, 13, 12], color: '#c0c0c0' }, { v: [9, 10, 14, 13], color: '#b0b0b0' }, { v: [10, 11, 15, 14], color: '#a0a0a0' }, { v: [11, 8, 12, 15], color: '#b0b0b0' }, // Wings (Top/Bottom) { v: [16, 17, 18, 19], color: '#d0d0d0' }, // Right Wing (simplified top/bottom as one face) { v: [20, 21, 22, 23], color: '#d0d0d0' }, // Left Wing // Tail Fin { v: [24, 25, 26], color: '#b0b0b0' }, // Right side { v: [24, 26, 25], color: '#c0c0c0' }, // Left side (reverse order for normal) // Horizontal Stabilizers { v: [27, 28, 29, 30], color: '#c8c8c8' }, // Right H-Stab { v: [31, 32, 33, 34], color: '#c8c8c8' }, // Left H-Stab ], // Keep lines for edges if polygons aren't fully covering lines: [ { v1: 17, v2: 18 }, { v1: 21, v2: 22 }, // Wing tips { v1: 25, v2: 26 }, // Tail fin top edge ], lineColor: '#333333' }; // --- Building Definition --- function createBuildingModel(x, y, z, w, h, d, color) { const halfW = w / 2; const halfD = d / 2; const roofColor = `rgb(${Math.max(0, parseInt(color.substr(1, 2), 16) - 20)}, ${Math.max(0, parseInt(color.substr(3, 2), 16) - 20)}, ${Math.max(0, parseInt(color.substr(5, 2), 16) - 20)})`; // Darker roof const vertices = [ { x: x - halfW, y: y, z: z - halfD }, // 0 Bottom Front Left { x: x + halfW, y: y, z: z - halfD }, // 1 Bottom Front Right { x: x + halfW, y: y, z: z + halfD }, // 2 Bottom Back Right { x: x - halfW, y: y, z: z + halfD }, // 3 Bottom Back Left { x: x - halfW, y: y + h, z: z - halfD }, // 4 Top Front Left { x: x + halfW, y: y + h, z: z - halfD }, // 5 Top Front Right { x: x + halfW, y: y + h, z: z + halfD }, // 6 Top Back Right { x: x - halfW, y: y + h, z: z + halfD } // 7 Top Back Left ]; const faces = [ { v: [0, 3, 2, 1], color: color }, // Bottom (optional to draw) { v: [4, 5, 6, 7], color: roofColor }, // Top { v: [0, 1, 5, 4], color: color }, // Front { v: [1, 2, 6, 5], color: color }, // Right { v: [2, 3, 7, 6], color: color }, // Back { v: [3, 0, 4, 7], color: color } // Left ]; return { type: 'building', vertices, faces, center: { x, y: y + h / 2, z } }; } // --- Tree Definition --- function createTreeModel(x, y, z, trunkH, leavesR, leavesH, trunkColor, leavesColor) { const vertices = []; const faces = []; const lines = []; // Trunk (cylinder approximation) const trunkSides = 6; const trunkTopY = y + trunkH; for (let i = 0; i < trunkSides; i++) { const angle0 = (i / trunkSides) * Math.PI * 2; const angle1 = ((i + 1) / trunkSides) * Math.PI * 2; const r = 0.2; // Trunk radius const x0 = x + Math.cos(angle0) * r; const z0 = z + Math.sin(angle0) * r; const x1 = x + Math.cos(angle1) * r; const z1 = z + Math.sin(angle1) * r; const v0_base = vertices.length; vertices.push({ x: x0, y: y, z: z0 }); const v1_base = vertices.length; vertices.push({ x: x1, y: y, z: z1 }); const v0_top = vertices.length; vertices.push({ x: x0, y: trunkTopY, z: z0 }); const v1_top = vertices.length; vertices.push({ x: x1, y: trunkTopY, z: z1 }); faces.push({ v: [v0_base, v1_base, v1_top, v0_top], color: trunkColor }); } // Leaves (cone approximation) const leavesBaseY = trunkTopY; const leavesTopY = leavesBaseY + leavesH; const leavesSides = 8; const topVertIndex = vertices.length; vertices.push({ x: x, y: leavesTopY, z: z }); // Cone tip let baseIndices = []; for (let i = 0; i < leavesSides; i++) { const angle = (i / leavesSides) * Math.PI * 2; const bx = x + Math.cos(angle) * leavesR; const bz = z + Math.sin(angle) * leavesR; baseIndices.push(vertices.length); vertices.push({ x: bx, y: leavesBaseY, z: bz }); } for (let i = 0; i < leavesSides; i++) { const i1 = baseIndices[i]; const i2 = baseIndices[(i + 1) % leavesSides]; faces.push({ v: [i1, i2, topVertIndex], color: leavesColor }); // Triangle face } // Optional: Add base polygon for the cone // faces.push({ v: baseIndices.slice().reverse(), color: leavesColor }); return { type: 'tree', vertices, faces, lines, center: { x, y: y + trunkH + leavesH / 2, z } }; } // --- Road Definition --- function createRoadModel(x, z, length, width, color) { const halfW = width / 2; const y = 0.01; // Slight offset const vertices = [ { x: x - halfW, y: y, z: z }, // 0 Front Left { x: x + halfW, y: y, z: z }, // 1 Front Right { x: x + halfW, y: y, z: z + length }, // 2 Back Right { x: x - halfW, y: y, z: z + length } // 3 Back Left ]; const faces = [ { v: [0, 1, 2, 3], color: color } ]; // Road Markings (lines) const lines = []; const dashLength = 5; const gapLength = 5; const numDashes = Math.floor(length / (dashLength + gapLength)); for(let i = 0; i < numDashes; i++) { const startZ = z + i * (dashLength + gapLength); const endZ = startZ + dashLength; lines.push({ v1: vertices.length, v2: vertices.length + 1, color: '#ffffff' }); vertices.push({ x: x, y: y + 0.01, z: startZ }); // Add slight y offset for line vertices.push({ x: x, y: y + 0.01, z: endZ }); } return { type: 'road', vertices, faces, lines, center: { x, y: y, z: z + length / 2 } }; } // --- Ground Grid --- function createGridModel(gridSize, gridSpacing) { const vertices = []; const lines = []; const color = '#008800'; for (let i = -gridSize; i <= gridSize; i += gridSpacing) { // Lines parallel to Z const v1 = vertices.length; vertices.push({ x: i, y: 0, z: -gridSize }); const v2 = vertices.length; vertices.push({ x: i, y: 0, z: gridSize }); lines.push({ v1, v2, color }); // Lines parallel to X const v3 = vertices.length; vertices.push({ x: -gridSize, y: 0, z: i }); const v4 = vertices.length; vertices.push({ x: gridSize, y: 0, z: i }); lines.push({ v3, v4, color }); } // Grid doesn't really have a single center for sorting, treat as background return { type: 'grid', vertices, lines, center: { x: 0, y: 0, z: 0 }, isBackground: true }; } const renderQueue = []; // Stores { object, distance } for sorting function drawLine(ctx, p1_3d, p2_3d, color, lineWidth = 1, camera, width, height) { const camP1 = worldToCameraSpace(p1_3d, camera); const camP2 = worldToCameraSpace(p2_3d, camera); // Basic near plane clipping for lines (clip if both points are behind) if (camP1.z < camera.near && camP2.z < camera.near) { return; } // More advanced clipping (line segment vs near plane intersection) is needed for accuracy const screenP1 = projectToScreen(camP1, camera, width, height); const screenP2 = projectToScreen(camP2, camera, width, height); if (screenP1 && screenP2) { ctx.beginPath(); ctx.moveTo(screenP1.x, screenP1.y); ctx.lineTo(screenP2.x, screenP2.y); ctx.strokeStyle = color; const avgZ = (screenP1.z + screenP2.z) / 2; ctx.lineWidth = Math.max(0.5, lineWidth * (1 + 5 / avgZ)); ctx.stroke(); } // Handle cases where one point is clipped (requires line-frustum intersection) } function drawPolygon(ctx, face, vertices, colorOverride, camera, width, height) { const points3D = face.v.map(index => vertices[index]); const pointsCameraSpace = points3D.map(p => worldToCameraSpace(p, camera)); // 1. Near Plane Clipping (Simple: discard if any vertex is behind) if (pointsCameraSpace.some(p => p.z <= camera.near)) { return; } // 2. Back-Face Culling (Optional but recommended) // Calculate normal vector in camera space const v0 = pointsCameraSpace[0]; const v1 = pointsCameraSpace[1]; const v2 = pointsCameraSpace[2]; const edge1 = subtractVectors(v1, v0); const edge2 = subtractVectors(v2, v0); const normal = crossProduct(edge1, edge2); // Check if normal points towards the camera (dot product with view vector [0,0,1] or position vector v0) // If normal.z is positive, it's facing away in camera space (left-handed coord system assumed by projection) if (normal.z > 0) { // Use > 0 if projection flips Z, < 0 otherwise. Depends on projection math. Let's assume > 0 is away. // Alternative check: dotProduct(normal, v0) > 0 means facing away from origin (camera) // if (dotProduct(normal, v0) > 0) { return; // Cull back-facing polygon // } } // 3. Projection to Screen Space const screenPoints = pointsCameraSpace.map(p => projectToScreen(p, camera, width, height)); // Check if all points were successfully projected if (screenPoints.some(p => p === null)) { // Polygon crosses screen boundary or far plane - requires complex clipping // For simplicity, we might skip drawing or draw edges instead // points3D.forEach((p, i) => { // const nextP = points3D[(i + 1) % points3D.length]; // drawLine(ctx, p, nextP, face.color || colorOverride || '#ff00ff', 1, camera, width, height); // }); return; } // 4. Draw Filled Polygon ctx.beginPath(); ctx.moveTo(screenPoints[0].x, screenPoints[0].y); for (let i = 1; i < screenPoints.length; i++) { ctx.lineTo(screenPoints[i].x, screenPoints[i].y); } ctx.closePath(); ctx.fillStyle = face.color || colorOverride || '#ff00ff'; // Use face color or override ctx.fill(); // Optional: Draw polygon edges // ctx.strokeStyle = '#000'; // ctx.lineWidth = 0.5; // ctx.stroke(); } function drawHorizon(ctx, camera, width, height) { // Project a point far away horizontally to find horizon line Y const horizonY = height / 2 - Math.tan(camera.pitch) * (height / 2) * (1 / Math.tan(toRadians(camera.fov) / 2)); // Sky ctx.fillStyle = '#87CEEB'; // Lighter Sky Blue ctx.fillRect(0, 0, width, horizonY); // Ground ctx.fillStyle = '#8FBC8F'; // DarkSeaGreen ctx.fillRect(0, horizonY, width, height - horizonY); } function renderScene(ctx, camera, worldObjects, planeObj, width, height) { // 1. Draw Background (Horizon) drawHorizon(ctx, camera, width, height); // 2. Prepare Render Queue renderQueue.length = 0; // Clear queue // Add world objects worldObjects.forEach(obj => { if (obj.isBackground) { // Render grid lines without sorting (draw first) if (obj.lines) { obj.lines.forEach(line => { drawLine(ctx, obj.vertices[line.v1], obj.vertices[line.v2], line.color, 1, camera, width, height); }); } } else { const dx = obj.center.x - camera.x; const dy = obj.center.y - camera.y; const dz = obj.center.z - camera.z; const distSq = dx * dx + dy * dy + dz * dz; // Use squared distance if (distSq < camera.far * camera.far) { // Frustum culling (basic distance check) renderQueue.push({ obj, distSq }); } } }); // Add plane const planeDistSq = (planeObj.x - camera.x)**2 + (planeObj.y - camera.y)**2 + (planeObj.z - camera.z)**2; renderQueue.push({ obj: { type: 'plane', ...planeObj }, distSq: planeDistSq }); // 3. Sort Render Queue (Painter's Algorithm: Far to Near) renderQueue.sort((a, b) => b.distSq - a.distSq); // 4. Render Sorted Objects renderQueue.forEach(item => { const obj = item.obj; // Transform plane vertices just before rendering it let vertices = obj.vertices; if (obj.type === 'plane') { vertices = planeModel.vertices.map(v => { const rotated = rotatePoint(v, obj.yaw, obj.pitch, obj.roll); return addVectors(rotated, { x: obj.x, y: obj.y, z: obj.z }); }); } // Draw Faces if (obj.faces) { obj.faces.forEach(face => { // For plane, vertices are already transformed. For others, they are world coords. const currentVertices = (obj.type === 'plane') ? vertices : obj.vertices; drawPolygon(ctx, face, currentVertices, obj.color, camera, width, height); }); } // Draw Lines (Road markings, grid lines, optional model outlines) if (obj.lines) { const currentVertices = (obj.type === 'plane') ? vertices : obj.vertices; const lineColor = (obj.type === 'plane') ? planeModel.lineColor : '#000'; // Default line color obj.lines.forEach(line => { const p1 = currentVertices[line.v1]; const p2 = currentVertices[line.v2]; drawLine(ctx, p1, p2, line.color || lineColor, 1, camera, width, height); }); } }); } const canvas = document.getElementById('simulatorCanvas'); const ctx = canvas.getContext('2d'); let width = window.innerWidth; let height = window.innerHeight; canvas.width = width; canvas.height = height; // --- Plane State --- const plane = { x: 0, y: 50, z: 0, // Start higher pitch: 0, yaw: 0, roll: 0, speed: 0.5 // Start with some speed }; // --- Camera State --- const camera = { x: 0, y: 0, z: 0, // Calculated based on plane pitch: 0, yaw: 0, fov: 75, // Slightly wider FOV near: 0.5, // Increase near plane to reduce issues with close objects far: 3000, // Increased draw distance followDistance: 20, // Further back followHeight: 7 // Higher up }; // --- Controls --- const controls = { w: false, s: false, // Speed a: false, d: false, // Yaw q: false, e: false, // Pitch shift: false, // Modifier for roll }; // --- World Objects --- const worldObjects = []; // Ground Grid const gridSize = 200; const gridSpacing = 20; worldObjects.push(createGridModel(gridSize, gridSpacing)); // Roads const roadWidth = 4; worldObjects.push(createRoadModel(0, -gridSize, gridSize * 2, roadWidth, '#555555')); // N-S Road worldObjects.push(createRoadModel(-gridSize, 10, gridSize * 2, roadWidth, '#555555')); // E-W Road (offset Z) // Buildings const buildingCount = 80; const buildingZone = 150; for (let i = 0; i < buildingCount; i++) { const sizeX = Math.random() * 6 + 4; const sizeY = Math.random() * 30 + 10; // Taller buildings const sizeZ = Math.random() * 6 + 4; const posX = (Math.random() - 0.5) * 2 * buildingZone; const posZ = (Math.random() - 0.5) * 2 * buildingZone; // Avoid placing buildings directly on roads if (Math.abs(posX) > roadWidth + sizeX / 2 && Math.abs(posZ - 10) > roadWidth + sizeZ / 2) { const color = `rgb(${Math.random()*50+100}, ${Math.random()*50+100}, ${Math.random()*50+100})`; // Lighter colors worldObjects.push(createBuildingModel(posX, 0, posZ, sizeX, sizeY, sizeZ, color)); } } // Trees const treeCount = 150; const treeZone = 180; for (let i = 0; i < treeCount; i++) { const trunkHeight = Math.random() * 1.5 + 1; const leavesRadius = Math.random() * 1.5 + 1; const leavesHeight = Math.random() * 3 + 2; const posX = (Math.random() - 0.5) * 2 * treeZone; const posZ = (Math.random() - 0.5) * 2 * treeZone; if (Math.abs(posX) > roadWidth + leavesRadius && Math.abs(posZ - 10) > roadWidth + leavesRadius) { const trunkColor = '#8B4513'; // Brown const leavesColor = `rgb(0, ${Math.random()*100+120}, ${Math.random()*30})`; // Greener worldObjects.push(createTreeModel(posX, 0, posZ, trunkHeight, leavesRadius, leavesHeight, trunkColor, leavesColor)); } } // --- Update Logic --- function update(deltaTime) { const timeFactor = deltaTime * 60; // Factor to make speeds consistent across frame rates const baseRotationSpeed = 0.025; // Tuned rotation sensitivity const baseSpeedChange = 0.01; const rollSpeed = 0.04; // --- Handle Controls --- let targetPitch = plane.pitch; let targetYaw = plane.yaw; let targetRoll = 0; // Auto-level roll tendency // Speed if (controls.w) plane.speed += baseSpeedChange * timeFactor; if (controls.s) plane.speed -= baseSpeedChange * timeFactor; // Yaw if (controls.a && !controls.shift) targetYaw -= baseRotationSpeed * timeFactor; if (controls.d && !controls.shift) targetYaw += baseRotationSpeed * timeFactor; // Pitch if (controls.e) targetPitch += baseRotationSpeed * timeFactor; // E = Pitch Up (Nose Up) if (controls.q) targetPitch -= baseRotationSpeed * timeFactor; // Q = Pitch Down (Nose Down) // Roll (Optional - using Shift + A/D) if (controls.shift && controls.a) targetRoll += rollSpeed * timeFactor; // Roll Left if (controls.shift && controls.d) targetRoll -= rollSpeed * timeFactor; // Roll Right // Smooth rotation changes (Lerp) - Adjust multiplier for responsiveness (smaller = slower) const lerpFactor = 0.1 * timeFactor; // Make lerp frame-rate independent plane.pitch += (targetPitch - plane.pitch) * Math.min(lerpFactor, 1); plane.yaw += (targetYaw - plane.yaw) * Math.min(lerpFactor, 1); plane.roll += (targetRoll - plane.roll) * Math.min(lerpFactor * 0.5, 1); // Slower roll correction // Clamp values plane.pitch = Math.max(-Math.PI / 2.2, Math.min(Math.PI / 2.2, plane.pitch)); // Limit pitch plane.speed = Math.max(0.1, Math.min(2.0, plane.speed)); // Min/Max speed plane.yaw = (plane.yaw + 2 * Math.PI) % (2 * Math.PI); // Keep yaw in range plane.roll = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, plane.roll)); // Limit roll // --- Update Plane Position --- const moveSpeed = plane.speed * timeFactor; // Use timeFactor for consistent speed const forwardX = Math.sin(plane.yaw) * Math.cos(plane.pitch); const forwardY = -Math.sin(plane.pitch); const forwardZ = Math.cos(plane.yaw) * Math.cos(plane.pitch); plane.x += forwardX * moveSpeed; plane.y += forwardY * moveSpeed; plane.z += forwardZ * moveSpeed; // Basic collision with ground if (plane.y < 1) { plane.y = 1; plane.speed *= 0.95; // Lose some speed on ground hit // Prevent pitching down further into the ground plane.pitch = Math.max(0, plane.pitch); } // --- Update Camera Position & Orientation --- // Calculate camera offset based on plane's orientation (including roll slightly) const baseCamOffset = { x: 0, y: camera.followHeight, z: -camera.followDistance }; const rotatedOffset = rotatePoint(baseCamOffset, plane.yaw, 0, plane.roll * 0.5); // Apply yaw and some roll camera.x = plane.x + rotatedOffset.x; camera.y = plane.y + rotatedOffset.y; camera.z = plane.z + rotatedOffset.z; // Make camera look towards the plane const targetPoint = { x: plane.x, y: plane.y, z: plane.z }; // Look directly at plane center const delta = subtractVectors(targetPoint, camera); // Calculate yaw and pitch needed to look at the target camera.yaw = Math.atan2(delta.x, delta.z); // Yaw based on X and Z difference const horizontalDist = Math.sqrt(delta.x * delta.x + delta.z * delta.z); camera.pitch = -Math.atan2(delta.y, horizontalDist); // Pitch based on Y and horizontal distance } // --- Game Loop --- let lastTime = 0; function gameLoop(timestamp) { const deltaTime = (timestamp - lastTime) / 1000; lastTime = timestamp; // Ensure deltaTime is reasonable, especially on the first frame or after pauses const dt = Math.min(deltaTime || 0, 0.1); // Clamp max delta time update(dt); // --- Render --- renderScene(ctx, camera, worldObjects, plane, width, height); requestAnimationFrame(gameLoop); } // --- Event Listeners --- window.addEventListener('keydown', (e) => { const key = e.key.toLowerCase(); if (controls.hasOwnProperty(key)) { controls[key] = true; } if (e.shiftKey) { controls.shift = true; } }); window.addEventListener('keyup', (e) => { const key = e.key.toLowerCase(); if (controls.hasOwnProperty(key)) { controls[key] = false; } if (!e.shiftKey) { // Check if Shift was released controls.shift = false; } }); // Handle losing focus (reset controls) window.addEventListener('blur', () => { for (const key in controls) { controls[key] = false; } }); window.addEventListener('resize', () => { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; }); // Start the simulation requestAnimationFrame(gameLoop); This version introduces several key changes: 1. **File Structure:** Code is split into `mathUtils.js`, `models.js`, `renderer.js`, and `script.js` for better organization. 2. **Detailed Models (`models.js`):** * `planeModel` now has more vertices and defines `faces` (polygons) for a more solid appearance. Some lines are kept for sharp edges. * `createBuildingModel`, `createTreeModel`, `createRoadModel` generate objects with `vertices` and `faces`. Roads also get simple line markings. 3. **Renderer (`renderer.js`):** * `drawPolygon` function handles projecting vertices, basic near-plane culling, optional back-face culling, and filling the polygon on the canvas. * `renderScene` now prepares a `renderQueue`, sorts objects by distance (Painter's Algorithm), and then iterates through the queue, drawing polygons and lines. Plane vertices are transformed just before rendering. 4. **Controls (`script.js`):** * Event listeners now map W/S (speed), A/D (yaw), Q/E (pitch). * Shift+A/D is added as an *optional* roll control. * Control sensitivity (`baseRotationSpeed`, `baseSpeedChange`) is adjusted. * Movement and rotation logic now uses `deltaTime` factored to be more frame-rate independent. 5. **Camera:** Camera logic is slightly adjusted to follow further back and higher, and look more directly at the plane. You should now see a more visually complex scene with basic filled shapes and control the plane using the Q/E/W/A/S/D keys. Remember that the polygon rendering is basic and may have visual artifacts, especially with complex intersections or clipping.