Spaces:

awacke1
/

CitySimulator

Running

App Files Files Community

awacke1 commited on May 24

Commit

2f8df45

verified ·

1 Parent(s): bdf0aea

Update index.html

Browse files

Files changed (1) hide show

index.html +1160 -19

index.html CHANGED Viewed

@@ -1,19 +1,1160 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive AI Traffic Simulator</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+            background: #000;
+        }
+        #ui {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            background-color: rgba(0,0,0,0.9);
+            padding: 15px;
+            border-radius: 8px;
+            z-index: 100;
+            font-size: 14px;
+            min-width: 200px;
+        }
+        #controls {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: white;
+            background-color: rgba(0,0,0,0.9);
+            padding: 15px;
+            border-radius: 8px;
+            z-index: 100;
+        }
+        #drivingControls {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            background-color: rgba(0,0,0,0.9);
+            padding: 15px;
+            border-radius: 8px;
+            z-index: 100;
+            text-align: center;
+        }
+        #cameraControls {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            color: white;
+            background-color: rgba(0,0,0,0.9);
+            padding: 15px;
+            border-radius: 8px;
+            z-index: 100;
+        }
+        button {
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            padding: 8px 16px;
+            margin: 5px;
+            cursor: pointer;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        button.active {
+            background-color: #ff6b6b;
+        }
+        #stats {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: white;
+            background-color: rgba(0,0,0,0.9);
+            padding: 15px;
+            border-radius: 8px;
+            z-index: 100;
+            font-size: 12px;
+            min-width: 200px;
+        }
+        #minimap {
+            position: absolute;
+            top: 10px;
+            right: 250px;
+            width: 200px;
+            height: 200px;
+            background-color: rgba(0,0,0,0.8);
+            border: 2px solid white;
+            border-radius: 8px;
+            z-index: 100;
+        }
+        .highlight { color: #ffcc00; font-weight: bold; }
+        .success { color: #00ff00; font-weight: bold; }
+        .player { color: #ff00ff; font-weight: bold; }
+        .crosshair {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 20px;
+            height: 20px;
+            border: 2px solid white;
+            border-radius: 50%;
+            z-index: 200;
+            opacity: 0.7;
+            display: none;
+        }
+        #speedometer {
+            position: absolute;
+            bottom: 100px;
+            right: 10px;
+            color: white;
+            background-color: rgba(0,0,0,0.9);
+            padding: 15px;
+            border-radius: 8px;
+            z-index: 100;
+            text-align: center;
+            display: none;
+        }
+        .speed-gauge {
+            width: 80px;
+            height: 80px;
+            border: 3px solid #4CAF50;
+            border-radius: 50%;
+            position: relative;
+            margin: 0 auto;
+        }
+        .speed-needle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 2px;
+            height: 35px;
+            background: #ff6b6b;
+            transform-origin: bottom center;
+            transform: translate(-50%, -100%) rotate(0deg);
+        }
+    </style>
+</head>
+<body>
+    <div id="ui">
+        <div class="highlight">Interactive AI Traffic Simulator</div>
+        <div>Mode: <span id="currentMode">AI Observer</span></div>
+        <div>Population: <span id="population">50</span></div>
+        <div>Speed: <span id="avgSpeed">0</span> km/h</div>
+        <div>Traffic Flow: <span id="trafficFlow">Normal</span></div>
+        <div>Active Routes: <span id="activeRoutes">0</span></div>
+    </div>
+    <div id="controls">
+        <button id="pauseBtn">Pause</button>
+        <button id="resetBtn">Reset</button>
+        <button id="speedBtn">Speed: 1x</button>
+        <button id="trafficBtn">Traffic: Normal</button>
+        <button id="weatherBtn">Weather: Clear</button>
+    </div>
+    <div id="drivingControls" style="display: none;">
+        <div class="highlight">Driving Controls</div>
+        <div>WASD - Drive | Mouse - Look | Space - Brake</div>
+        <div>Shift - Boost | Tab - Change Car | Esc - Exit</div>
+    </div>
+    <div id="cameraControls">
+        <div class="highlight">Camera Controls</div>
+        <button id="firstPersonBtn">First Person</button>
+        <button id="thirdPersonBtn">Third Person</button>
+        <button id="overviewBtn">Overview</button>
+        <button id="freeCamera">Free Cam</button>
+        <button id="nextCarBtn">Next Car</button>
+    </div>
+    <div id="stats">
+        <div><span class="highlight">Current Statistics:</span></div>
+        <div>Camera: <span id="cameraMode">Overview</span></div>
+        <div>Target: <span id="currentTarget">None</span></div>
+        <div>Distance: <span id="targetDistance">0</span>m</div>
+        <div>Destination: <span id="currentDestination">None</span></div>
+        <div>Flock Size: <span id="flockSize">0</span></div>
+    </div>
+    <div id="minimap"></div>
+    <div id="speedometer">
+        <div class="speed-gauge">
+            <div class="speed-needle" id="speedNeedle"></div>
+        </div>
+        <div>Speed: <span id="currentSpeed">0</span> km/h</div>
+    </div>
+    <div class="crosshair" id="crosshair"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // Global variables
+        let scene, camera, renderer, clock;
+        let world = {
+            roads: [],
+            intersections: [],
+            buildings: [],
+            roadNetwork: new Map(),
+            trafficLights: []
+        };
+        // Camera and interaction
+        let cameraMode = 'overview'; // firstPerson, thirdPerson, overview, free
+        let currentTarget = null;
+        let isPlayerDriving = false;
+        let mouseControls = { x: 0, y: 0, sensitivity: 0.002 };
+        let keys = {};
+        // Traffic simulation
+        let population = [];
+        let playerCar = null;
+        let populationSize = 50;
+        let paused = false;
+        let speedMultiplier = 1;
+        let trafficDensity = 'normal';
+        let weatherCondition = 'clear';
+        // Enhanced AI parameters
+        const NEIGHBOR_RADIUS = 25;
+        const ROAD_WIDTH = 8;
+        const BUILDING_VISIT_DISTANCE = 15;
+        // Simple Neural Network for AI Cars
+        class SimpleNeuralNetwork {
+            constructor() {
+                this.weights = {
+                    input: Array(16).fill().map(() => Array(8).fill().map(() => (Math.random() - 0.5) * 2)),
+                    hidden: Array(8).fill().map(() => Array(4).fill().map(() => (Math.random() - 0.5) * 2)),
+                    output: Array(4).fill().map(() => (Math.random() - 0.5) * 2)
+                };
+            }
+            activate(inputs) {
+                // Simple forward pass
+                let hidden = new Array(8).fill(0);
+                for (let i = 0; i < 8; i++) {
+                    for (let j = 0; j < inputs.length && j < 16; j++) {
+                        hidden[i] += inputs[j] * this.weights.input[j][i];
+                    }
+                    hidden[i] = Math.tanh(hidden[i]);
+                }
+                let outputs = new Array(4).fill(0);
+                for (let i = 0; i < 4; i++) {
+                    for (let j = 0; j < hidden.length; j++) {
+                        outputs[i] += hidden[j] * this.weights.hidden[j][i];
+                    }
+                    outputs[i] = this.weights.output[i];
+                    outputs[i] = Math.tanh(outputs[i]);
+                }
+                return outputs;
+            }
+            mutate(rate = 0.1) {
+                // Simple mutation
+                Object.keys(this.weights).forEach(layer => {
+                    if (Array.isArray(this.weights[layer][0])) {
+                        this.weights[layer].forEach(neuron => {
+                            neuron.forEach((weight, i) => {
+                                if (Math.random() < rate) {
+                                    neuron[i] += (Math.random() - 0.5) * 0.5;
+                                }
+                            });
+                        });
+                    } else {
+                        this.weights[layer].forEach((weight, i) => {
+                            if (Math.random() < rate) {
+                                this.weights[layer][i] += (Math.random() - 0.5) * 0.5;
+                            }
+                        });
+                    }
+                });
+            }
+        }
+        // Enhanced AI Car with realistic navigation
+        class RealisticAICar {
+            constructor(x = 0, z = 0, isPlayer = false) {
+                this.isPlayer = isPlayer;
+                this.brain = isPlayer ? null : new SimpleNeuralNetwork();
+                this.mesh = this.createCarMesh();
+                this.mesh.position.set(x, 1, z);
+                // Movement properties
+                this.velocity = new THREE.Vector3(0, 0, 0);
+                this.acceleration = new THREE.Vector3();
+                this.maxSpeed = isPlayer ? 35 : 25;
+                this.currentSpeed = 0;
+                this.steering = 0;
+                // Navigation properties
+                this.destination = null;
+                this.currentPath = [];
+                this.pathIndex = 0;
+                this.isAtDestination = false;
+                this.lastDestinationTime = 0;
+                // Flocking properties
+                this.neighbors = [];
+                this.flockingForce = new THREE.Vector3();
+                // State tracking
+                this.sensors = Array(8).fill(0);
+                this.onRoad = false;
+                this.atIntersection = false;
+                this.waitingAtLight = false;
+                this.initializeDestination();
+            }
+            createCarMesh() {
+                const group = new THREE.Group();
+                // Car body
+                const bodyGeometry = new THREE.BoxGeometry(1.8, 1, 4);
+                const bodyMaterial = new THREE.MeshLambertMaterial({
+                    color: this.isPlayer ? 0xff00ff : new THREE.Color().setHSL(Math.random(), 0.8, 0.6)
+                });
+                const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+                body.position.y = 0.5;
+                body.castShadow = true;
+                group.add(body);
+                // Roof
+                const roofGeometry = new THREE.BoxGeometry(1.6, 0.8, 2.5);
+                const roof = new THREE.Mesh(roofGeometry, bodyMaterial);
+                roof.position.set(0, 1.4, -0.3);
+                group.add(roof);
+                // Wheels
+                const wheelGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.3, 8);
+                const wheelMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });
+                this.wheels = [];
+                const wheelPositions = [
+                    [-1, 0, 1.5], [1, 0, 1.5],
+                    [-1, 0, -1.5], [1, 0, -1.5]
+                ];
+                wheelPositions.forEach((pos, i) => {
+                    const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
+                    wheel.position.set(...pos);
+                    wheel.rotation.z = Math.PI / 2;
+                    this.wheels.push(wheel);
+                    group.add(wheel);
+                });
+                // Player indicator
+                if (this.isPlayer) {
+                    const indicatorGeometry = new THREE.ConeGeometry(0.5, 2, 4);
+                    const indicator = new THREE.Mesh(indicatorGeometry,
+                        new THREE.MeshLambertMaterial({ color: 0xffff00 }));
+                    indicator.position.set(0, 3, 0);
+                    group.add(indicator);
+                }
+                return group;
+            }
+            initializeDestination() {
+                if (world.buildings.length > 0) {
+                    this.setRandomDestination();
+                }
+            }
+            setRandomDestination() {
+                const availableBuildings = world.buildings.filter(b =>
+                    b.mesh.position.distanceTo(this.mesh.position) > 50
+                );
+                if (availableBuildings.length > 0) {
+                    this.destination = availableBuildings[Math.floor(Math.random() * availableBuildings.length)];
+                    this.calculatePath();
+                    this.isAtDestination = false;
+                }
+            }
+            calculatePath() {
+                if (!this.destination) return;
+                // Simple pathfinding - find nearest road to destination
+                const start = this.mesh.position.clone();
+                const end = this.destination.mesh.position.clone();
+                // For now, create a simple path with waypoints
+                this.currentPath = this.generateWaypoints(start, end);
+                this.pathIndex = 0;
+            }
+            generateWaypoints(start, end) {
+                const waypoints = [];
+                const roadSpacing = 80;
+                // Navigate to road grid
+                const startRoadX = Math.round(start.x / roadSpacing) * roadSpacing;
+                const startRoadZ = Math.round(start.z / roadSpacing) * roadSpacing;
+                const endRoadX = Math.round(end.x / roadSpacing) * roadSpacing;
+                const endRoadZ = Math.round(end.z / roadSpacing) * roadSpacing;
+                waypoints.push(new THREE.Vector3(startRoadX, 1, start.z));
+                waypoints.push(new THREE.Vector3(startRoadX, 1, startRoadZ));
+                // Navigate along roads
+                if (startRoadX !== endRoadX) {
+                    waypoints.push(new THREE.Vector3(endRoadX, 1, startRoadZ));
+                }
+                waypoints.push(new THREE.Vector3(endRoadX, 1, endRoadZ));
+                waypoints.push(end.clone().add(new THREE.Vector3(0, 1, 0)));
+                return waypoints;
+            }
+            updateSensors() {
+                const maxDistance = 15;
+                const raycaster = new THREE.Raycaster();
+                // 8-direction sensor array
+                for (let i = 0; i < 8; i++) {
+                    const angle = (i * Math.PI * 2) / 8;
+                    const direction = new THREE.Vector3(
+                        Math.sin(angle), 0, Math.cos(angle)
+                    );
+                    direction.applyQuaternion(this.mesh.quaternion);
+                    raycaster.set(this.mesh.position, direction);
+                    const intersects = raycaster.intersectObjects(this.getObstacles(), true);
+                    if (intersects.length > 0 && intersects[0].distance <= maxDistance) {
+                        this.sensors[i] = 1 - (intersects[0].distance / maxDistance);
+                    } else {
+                        this.sensors[i] = 0;
+                    }
+                }
+                this.updateRoadStatus();
+                this.updateFlocking();
+            }
+            updateRoadStatus() {
+                const pos = this.mesh.position;
+                const roadSpacing = 80;
+                const roadHalfWidth = ROAD_WIDTH / 2;
+                const nearestHorizontalRoad = Math.round(pos.z / roadSpacing) * roadSpacing;
+                const nearestVerticalRoad = Math.round(pos.x / roadSpacing) * roadSpacing;
+                const distToHorizontalRoad = Math.abs(pos.z - nearestHorizontalRoad);
+                const distToVerticalRoad = Math.abs(pos.x - nearestVerticalRoad);
+                this.onRoad = distToHorizontalRoad <= roadHalfWidth || distToVerticalRoad <= roadHalfWidth;
+                // Check if at intersection
+                this.atIntersection = distToHorizontalRoad <= roadHalfWidth && distToVerticalRoad <= roadHalfWidth;
+            }
+            updateFlocking() {
+                this.neighbors = [];
+                let separation = new THREE.Vector3();
+                let alignment = new THREE.Vector3();
+                let cohesion = new THREE.Vector3();
+                let neighborCount = 0;
+                population.forEach(other => {
+                    if (other !== this) {
+                        const distance = this.mesh.position.distanceTo(other.mesh.position);
+                        if (distance < NEIGHBOR_RADIUS && distance > 0) {
+                            this.neighbors.push(other);
+                            cohesion.add(other.mesh.position);
+                            alignment.add(other.velocity);
+                            neighborCount++;
+                            if (distance < 8) {
+                                const diff = this.mesh.position.clone().sub(other.mesh.position);
+                                diff.normalize().divideScalar(distance);
+                                separation.add(diff);
+                            }
+                        }
+                    }
+                });
+                if (neighborCount > 0) {
+                    cohesion.divideScalar(neighborCount).sub(this.mesh.position).normalize();
+                    alignment.divideScalar(neighborCount).normalize();
+                }
+                this.flockingForce = separation.multiplyScalar(1.5)
+                    .add(alignment.multiplyScalar(1.0))
+                    .add(cohesion.multiplyScalar(0.5));
+            }
+            update(deltaTime) {
+                this.updateSensors();
+                if (this.isPlayer) {
+                    this.updatePlayerControls(deltaTime);
+                } else {
+                    this.updateAI(deltaTime);
+                }
+                this.updateMovement(deltaTime);
+                this.updateDestination();
+                this.keepInBounds();
+            }
+            updatePlayerControls(deltaTime) {
+                const forwardForce = keys['KeyW'] ? 1 : 0;
+                const backwardForce = keys['KeyS'] ? -0.5 : 0;
+                const leftTurn = keys['KeyA'] ? -1 : 0;
+                const rightTurn = keys['KeyD'] ? 1 : 0;
+                const brake = keys['Space'] ? 1 : 0;
+                const boost = keys['ShiftLeft'] ? 1.5 : 1;
+                this.applyMovement(forwardForce + backwardForce, leftTurn + rightTurn, brake, boost, deltaTime);
+            }
+            updateAI(deltaTime) {
+                if (!this.brain) return;
+                const inputs = [
+                    ...this.sensors,
+                    this.onRoad ? 1 : 0,
+                    this.atIntersection ? 1 : 0,
+                    this.currentSpeed / this.maxSpeed,
+                    this.getPathDirection(),
+                    this.flockingForce.x,
+                    this.flockingForce.z,
+                    this.neighbors.length / 10,
+                    this.getDestinationDirection()
+                ];
+                const outputs = this.brain.activate(inputs);
+                const [forward, turn, brake, formation] = outputs;
+                this.applyMovement(forward, turn, brake, 1, deltaTime);
+            }
+            getPathDirection() {
+                if (this.currentPath.length === 0 || this.pathIndex >= this.currentPath.length) {
+                    return 0;
+                }
+                const target = this.currentPath[this.pathIndex];
+                const direction = target.clone().sub(this.mesh.position).normalize();
+                const forward = new THREE.Vector3(0, 0, 1).applyQuaternion(this.mesh.quaternion);
+                return direction.dot(forward);
+            }
+            getDestinationDirection() {
+                if (!this.destination) return 0;
+                const direction = this.destination.mesh.position.clone().sub(this.mesh.position).normalize();
+                const forward = new THREE.Vector3(0, 0, 1).applyQuaternion(this.mesh.quaternion);
+                return direction.dot(forward);
+            }
+            applyMovement(forwardForce, turnForce, brakeForce, boostMultiplier, deltaTime) {
+                // Steering
+                this.steering = turnForce * 0.03;
+                this.mesh.rotation.y += this.steering * this.currentSpeed * deltaTime;
+                // Acceleration
+                const maxAcceleration = 15 * boostMultiplier;
+                if (forwardForce > 0) {
+                    this.currentSpeed += maxAcceleration * forwardForce * deltaTime;
+                } else if (forwardForce < 0) {
+                    this.currentSpeed += maxAcceleration * forwardForce * deltaTime;
+                }
+                // Braking
+                if (brakeForce > 0) {
+                    this.currentSpeed *= Math.pow(0.1, brakeForce * deltaTime);
+                }
+                // Natural deceleration
+                this.currentSpeed *= Math.pow(0.98, deltaTime * 60);
+                // Speed limits
+                this.currentSpeed = Math.max(-this.maxSpeed * 0.5,
+                    Math.min(this.maxSpeed * boostMultiplier, this.currentSpeed));
+                // Apply velocity
+                const forward = new THREE.Vector3(0, 0, 1);
+                forward.applyQuaternion(this.mesh.quaternion);
+                this.velocity = forward.multiplyScalar(this.currentSpeed);
+                // Apply flocking forces for AI cars
+                if (!this.isPlayer && this.flockingForce.length() > 0) {
+                    this.velocity.add(this.flockingForce.multiplyScalar(5 * deltaTime));
+                }
+                // Update position
+                this.mesh.position.add(this.velocity.clone().multiplyScalar(deltaTime));
+                // Wheel rotation
+                this.wheels.forEach(wheel => {
+                    wheel.rotation.x += this.currentSpeed * deltaTime * 0.2;
+                });
+            }
+            updateMovement(deltaTime) {
+                // Road following behavior for AI
+                if (!this.isPlayer && this.onRoad) {
+                    const roadBonus = this.getRoadFollowingForce();
+                    this.mesh.position.add(roadBonus.multiplyScalar(deltaTime * 2));
+                }
+            }
+            getRoadFollowingForce() {
+                const pos = this.mesh.position;
+                const roadSpacing = 80;
+                const roadHalfWidth = ROAD_WIDTH / 2;
+                const nearestHorizontalRoad = Math.round(pos.z / roadSpacing) * roadSpacing;
+                const nearestVerticalRoad = Math.round(pos.x / roadSpacing) * roadSpacing;
+                const distToHorizontalRoad = pos.z - nearestHorizontalRoad;
+                const distToVerticalRoad = pos.x - nearestVerticalRoad;
+                const force = new THREE.Vector3();
+                if (Math.abs(distToHorizontalRoad) <= roadHalfWidth) {
+                    force.z = -distToHorizontalRoad * 0.5;
+                }
+                if (Math.abs(distToVerticalRoad) <= roadHalfWidth) {
+                    force.x = -distToVerticalRoad * 0.5;
+                }
+                return force;
+            }
+            updateDestination() {
+                if (!this.destination) return;
+                const distanceToDestination = this.mesh.position.distanceTo(this.destination.mesh.position);
+                if (distanceToDestination < BUILDING_VISIT_DISTANCE) {
+                    if (!this.isAtDestination) {
+                        this.isAtDestination = true;
+                        this.lastDestinationTime = Date.now();
+                    }
+                    // Stay at destination for a while, then pick new one
+                    if (Date.now() - this.lastDestinationTime > 3000) {
+                        this.setRandomDestination();
+                    }
+                }
+                // Update path following
+                if (this.currentPath.length > 0 && this.pathIndex < this.currentPath.length) {
+                    const waypoint = this.currentPath[this.pathIndex];
+                    const distanceToWaypoint = this.mesh.position.distanceTo(waypoint);
+                    if (distanceToWaypoint < 10) {
+                        this.pathIndex++;
+                    }
+                }
+            }
+            getObstacles() {
+                let obstacles = [];
+                population.forEach(car => {
+                    if (car !== this) {
+                        obstacles.push(car.mesh);
+                    }
+                });
+                world.buildings.forEach(building => {
+                    obstacles.push(building.mesh);
+                });
+                return obstacles;
+            }
+            keepInBounds() {
+                const bounds = 300;
+                if (Math.abs(this.mesh.position.x) > bounds ||
+                    Math.abs(this.mesh.position.z) > bounds) {
+                    if (Math.abs(this.mesh.position.x) > bounds) {
+                        this.mesh.position.x = Math.sign(this.mesh.position.x) * bounds;
+                        this.velocity.x *= -0.5;
+                    }
+                    if (Math.abs(this.mesh.position.z) > bounds) {
+                        this.mesh.position.z = Math.sign(this.mesh.position.z) * bounds;
+                        this.velocity.z *= -0.5;
+                    }
+                }
+            }
+        }
+        function init() {
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87CEEB);
+            scene.fog = new THREE.Fog(0x87CEEB, 200, 800);
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 80, 80);
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            document.body.appendChild(renderer.domElement);
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(50, 100, 50);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 2048;
+            directionalLight.shadow.mapSize.height = 2048;
+            scene.add(directionalLight);
+            createWorld();
+            createPopulation();
+            clock = new THREE.Clock();
+            setupEventListeners();
+            setupKeyboardControls();
+            setupMouseControls();
+            animate();
+        }
+        function createWorld() {
+            // Ground
+            const groundGeometry = new THREE.PlaneGeometry(800, 800);
+            const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x228B22 });
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            ground.rotation.x = -Math.PI / 2;
+            ground.receiveShadow = true;
+            scene.add(ground);
+            createRoadNetwork();
+            createBuildings();
+            createTrafficLights();
+        }
+        function createRoadNetwork() {
+            const roadMaterial = new THREE.MeshLambertMaterial({ color: 0x444444 });
+            const roadSpacing = 80;
+            // Create road grid
+            for (let i = -240; i <= 240; i += roadSpacing) {
+                // Horizontal roads
+                const hRoadGeometry = new THREE.PlaneGeometry(480, ROAD_WIDTH);
+                const hRoad = new THREE.Mesh(hRoadGeometry, roadMaterial);
+                hRoad.rotation.x = -Math.PI / 2;
+                hRoad.position.set(0, 0.1, i);
+                scene.add(hRoad);
+                // Vertical roads
+                const vRoadGeometry = new THREE.PlaneGeometry(ROAD_WIDTH, 480);
+                const vRoad = new THREE.Mesh(vRoadGeometry, roadMaterial);
+                vRoad.rotation.x = -Math.PI / 2;
+                vRoad.position.set(i, 0.1, 0);
+                scene.add(vRoad);
+                // Road markings
+                createRoadMarkings(i);
+            }
+        }
+        function createRoadMarkings(position) {
+            const markingMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+            // Center line markings
+            for (let j = -200; j <= 200; j += 20) {
+                const markingGeometry = new THREE.PlaneGeometry(1, 8);
+                const marking = new THREE.Mesh(markingGeometry, markingMaterial);
+                marking.rotation.x = -Math.PI / 2;
+                marking.position.set(j, 0.11, position);
+                scene.add(marking);
+                const vMarking = new THREE.Mesh(markingGeometry.clone(), markingMaterial);
+                vMarking.rotation.x = -Math.PI / 2;
+                vMarking.rotation.z = Math.PI / 2;
+                vMarking.position.set(position, 0.11, j);
+                scene.add(vMarking);
+            }
+        }
+        function createBuildings() {
+            world.buildings = [];
+            const buildingMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 });
+            // Create buildings in grid pattern with some randomness
+            for (let x = -200; x <= 200; x += 80) {
+                for (let z = -200; z <= 200; z += 80) {
+                    if (Math.random() > 0.3) { // Don't place building everywhere
+                        const offsetX = x + (Math.random() - 0.5) * 40;
+                        const offsetZ = z + (Math.random() - 0.5) * 40;
+                        const width = 15 + Math.random() * 20;
+                        const height = 10 + Math.random() * 30;
+                        const depth = 15 + Math.random() * 20;
+                        const buildingGeometry = new THREE.BoxGeometry(width, height, depth);
+                        const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
+                        building.position.set(offsetX, height / 2, offsetZ);
+                        building.castShadow = true;
+                        scene.add(building);
+                        world.buildings.push({ mesh: building });
+                    }
+                }
+            }
+        }
+        function createTrafficLights() {
+            world.trafficLights = [];
+            const roadSpacing = 80;
+            // Place traffic lights at major intersections
+            for (let x = -160; x <= 160; x += roadSpacing) {
+                for (let z = -160; z <= 160; z += roadSpacing) {
+                    if (Math.random() > 0.7) {
+                        const light = createTrafficLight(x, z);
+                        world.trafficLights.push(light);
+                    }
+                }
+            }
+        }
+        function createTrafficLight(x, z) {
+            const poleGeometry = new THREE.CylinderGeometry(0.2, 0.2, 8);
+            const poleMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });
+            const pole = new THREE.Mesh(poleGeometry, poleMaterial);
+            pole.position.set(x + 6, 4, z + 6);
+            scene.add(pole);
+            const lightBoxGeometry = new THREE.BoxGeometry(1, 3, 1);
+            const lightBoxMaterial = new THREE.MeshLambertMaterial({ color: 0x222222 });
+            const lightBox = new THREE.Mesh(lightBoxGeometry, lightBoxMaterial);
+            lightBox.position.set(x + 6, 7, z + 6);
+            scene.add(lightBox);
+            // Light states
+            const states = ['red', 'yellow', 'green'];
+            const currentState = states[Math.floor(Math.random() * states.length)];
+            return {
+                pole: pole,
+                lightBox: lightBox,
+                position: new THREE.Vector3(x, 0, z),
+                state: currentState,
+                lastChange: Date.now()
+            };
+        }
+        function createPopulation() {
+            population = [];
+            // Create AI cars
+            for (let i = 0; i < populationSize - 1; i++) {
+                const angle = (i / populationSize) * Math.PI * 2;
+                const radius = 30 + Math.random() * 50;
+                const x = Math.cos(angle) * radius;
+                const z = Math.sin(angle) * radius;
+                const car = new RealisticAICar(x, z, false);
+                population.push(car);
+                scene.add(car.mesh);
+            }
+            // Create player car
+            playerCar = new RealisticAICar(0, 0, true);
+            population.push(playerCar);
+            scene.add(playerCar.mesh);
+            currentTarget = playerCar;
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            if (!paused) {
+                const deltaTime = Math.min(clock.getDelta() * speedMultiplier, 0.1);
+                updatePopulation(deltaTime);
+                updateTrafficLights();
+                updateCamera();
+                updateUI();
+            }
+            renderer.render(scene, camera);
+        }
+        function updatePopulation(deltaTime) {
+            population.forEach(car => car.update(deltaTime));
+        }
+        function updateTrafficLights() {
+            world.trafficLights.forEach(light => {
+                if (Date.now() - light.lastChange > 5000) {
+                    const states = ['red', 'yellow', 'green'];
+                    const currentIndex = states.indexOf(light.state);
+                    light.state = states[(currentIndex + 1) % states.length];
+                    light.lastChange = Date.now();
+                    // Update light color
+                    const colors = { red: 0xff0000, yellow: 0xffff00, green: 0x00ff00 };
+                    light.lightBox.material.color.setHex(colors[light.state]);
+                }
+            });
+        }
+        function updateCamera() {
+            if (!currentTarget) return;
+            const targetPos = currentTarget.mesh.position;
+            const targetRot = currentTarget.mesh.rotation;
+            switch (cameraMode) {
+                case 'firstPerson':
+                    // First person view
+                    camera.position.copy(targetPos);
+                    camera.position.y += 2;
+                    camera.position.add(new THREE.Vector3(0, 0, 2).applyQuaternion(currentTarget.mesh.quaternion));
+                    const lookDirection = new THREE.Vector3(0, 0, -1).applyQuaternion(currentTarget.mesh.quaternion);
+                    lookDirection.add(new THREE.Vector3(mouseControls.x, mouseControls.y, 0));
+                    camera.lookAt(targetPos.clone().add(lookDirection.multiplyScalar(10)));
+                    break;
+                case 'thirdPerson':
+                    // Third person view
+                    const behindOffset = new THREE.Vector3(0, 8, 15).applyQuaternion(currentTarget.mesh.quaternion);
+                    camera.position.lerp(targetPos.clone().sub(behindOffset), 0.1);
+                    camera.lookAt(targetPos);
+                    break;
+                case 'overview':
+                    // Overview of the area
+                    camera.position.lerp(new THREE.Vector3(0, 150, 150), 0.02);
+                    camera.lookAt(targetPos);
+                    break;
+                case 'free':
+                    // Free camera movement
+                    updateFreeCamera();
+                    break;
+            }
+        }
+        function updateFreeCamera() {
+            const moveSpeed = 2;
+            if (keys['KeyW']) camera.position.add(new THREE.Vector3(0, 0, -moveSpeed));
+            if (keys['KeyS']) camera.position.add(new THREE.Vector3(0, 0, moveSpeed));
+            if (keys['KeyA']) camera.position.add(new THREE.Vector3(-moveSpeed, 0, 0));
+            if (keys['KeyD']) camera.position.add(new THREE.Vector3(moveSpeed, 0, 0));
+            if (keys['KeyQ']) camera.position.y += moveSpeed;
+            if (keys['KeyE']) camera.position.y -= moveSpeed;
+        }
+        function updateUI() {
+            if (currentTarget) {
+                document.getElementById('currentMode').textContent = currentTarget.isPlayer ? 'Player Driving' : 'AI Observer';
+                document.getElementById('currentTarget').textContent = currentTarget.isPlayer ? 'Player' : 'AI Car';
+                document.getElementById('currentSpeed').textContent = Math.round(Math.abs(currentTarget.currentSpeed * 3.6));
+                document.getElementById('flockSize').textContent = currentTarget.neighbors.length;
+                if (currentTarget.destination) {
+                    const distance = currentTarget.mesh.position.distanceTo(currentTarget.destination.mesh.position);
+                    document.getElementById('targetDistance').textContent = Math.round(distance);
+                    document.getElementById('currentDestination').textContent = 'Building';
+                } else {
+                    document.getElementById('targetDistance').textContent = '0';
+                    document.getElementById('currentDestination').textContent = 'None';
+                }
+            }
+            document.getElementById('population').textContent = population.length;
+            const avgSpeed = population.reduce((sum, car) => sum + Math.abs(car.currentSpeed), 0) / population.length;
+            document.getElementById('avgSpeed').textContent = Math.round(avgSpeed * 3.6);
+            const activeRoutes = population.filter(car => car.currentPath.length > 0).length;
+            document.getElementById('activeRoutes').textContent = activeRoutes;
+            document.getElementById('cameraMode').textContent = cameraMode;
+            // Update speedometer
+            if (currentTarget && currentTarget.isPlayer) {
+                const speedPercent = Math.abs(currentTarget.currentSpeed) / currentTarget.maxSpeed;
+                const needleRotation = -90 + (speedPercent * 180);
+                document.getElementById('speedNeedle').style.transform =
+                    `translate(-50%, -100%) rotate(${needleRotation}deg)`;
+            }
+        }
+        function setupEventListeners() {
+            // UI controls
+            document.getElementById('pauseBtn').addEventListener('click', togglePause);
+            document.getElementById('resetBtn').addEventListener('click', resetSimulation);
+            document.getElementById('speedBtn').addEventListener('click', toggleSpeed);
+            document.getElementById('trafficBtn').addEventListener('click', toggleTraffic);
+            document.getElementById('weatherBtn').addEventListener('click', toggleWeather);
+            // Camera controls
+            document.getElementById('firstPersonBtn').addEventListener('click', () => setCameraMode('firstPerson'));
+            document.getElementById('thirdPersonBtn').addEventListener('click', () => setCameraMode('thirdPerson'));
+            document.getElementById('overviewBtn').addEventListener('click', () => setCameraMode('overview'));
+            document.getElementById('freeCamera').addEventListener('click', () => setCameraMode('free'));
+            document.getElementById('nextCarBtn').addEventListener('click', switchToNextCar);
+            window.addEventListener('resize', onWindowResize);
+        }
+        function setupKeyboardControls() {
+            document.addEventListener('keydown', (event) => {
+                keys[event.code] = true;
+                if (event.code === 'Tab') {
+                    event.preventDefault();
+                    switchToNextCar();
+                }
+                if (event.code === 'Escape') {
+                    setCameraMode('overview');
+                }
+            });
+            document.addEventListener('keyup', (event) => {
+                keys[event.code] = false;
+            });
+        }
+        function setupMouseControls() {
+            let isMouseLocked = false;
+            document.addEventListener('click', () => {
+                if (cameraMode === 'firstPerson' || cameraMode === 'free') {
+                    document.body.requestPointerLock();
+                }
+            });
+            document.addEventListener('pointerlockchange', () => {
+                isMouseLocked = document.pointerLockElement === document.body;
+            });
+            document.addEventListener('mousemove', (event) => {
+                if (isMouseLocked) {
+                    mouseControls.x += event.movementX * mouseControls.sensitivity;
+                    mouseControls.y -= event.movementY * mouseControls.sensitivity;
+                    mouseControls.x = Math.max(-Math.PI/3, Math.min(Math.PI/3, mouseControls.x));
+                    mouseControls.y = Math.max(-Math.PI/6, Math.min(Math.PI/6, mouseControls.y));
+                }
+            });
+        }
+        function setCameraMode(mode) {
+            cameraMode = mode;
+            // Update UI
+            document.querySelectorAll('#cameraControls button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            const buttonMap = {
+                'firstPerson': 'firstPersonBtn',
+                'thirdPerson': 'thirdPersonBtn',
+                'overview': 'overviewBtn',
+                'free': 'freeCamera'
+            };
+            if (buttonMap[mode]) {
+                document.getElementById(buttonMap[mode]).classList.add('active');
+            }
+            // Show/hide UI elements
+            const showDriving = mode === 'firstPerson' && currentTarget && currentTarget.isPlayer;
+            document.getElementById('drivingControls').style.display = showDriving ? 'block' : 'none';
+            document.getElementById('speedometer').style.display = showDriving ? 'block' : 'none';
+            document.getElementById('crosshair').style.display = mode === 'firstPerson' ? 'block' : 'none';
+            mouseControls.x = 0;
+            mouseControls.y = 0;
+        }
+        function switchToNextCar() {
+            if (population.length === 0) return;
+            const currentIndex = population.indexOf(currentTarget);
+            const nextIndex = (currentIndex + 1) % population.length;
+            currentTarget = population[nextIndex];
+            // If switching to player car, enable driving controls
+            if (currentTarget.isPlayer && cameraMode !== 'overview') {
+                setCameraMode('firstPerson');
+            }
+        }
+        function togglePause() {
+            paused = !paused;
+            document.getElementById('pauseBtn').textContent = paused ? 'Resume' : 'Pause';
+        }
+        function resetSimulation() {
+            population.forEach(car => {
+                if (car.mesh.parent) scene.remove(car.mesh);
+            });
+            createPopulation();
+            currentTarget = playerCar;
+        }
+        function toggleSpeed() {
+            speedMultiplier = speedMultiplier === 1 ? 2 : speedMultiplier === 2 ? 5 : 1;
+            document.getElementById('speedBtn').textContent = `Speed: ${speedMultiplier}x`;
+        }
+        function toggleTraffic() {
+            const levels = ['light', 'normal', 'heavy'];
+            const currentIndex = levels.indexOf(trafficDensity);
+            trafficDensity = levels[(currentIndex + 1) % levels.length];
+            document.getElementById('trafficBtn').textContent = `Traffic: ${trafficDensity}`;
+            document.getElementById('trafficFlow').textContent = trafficDensity;
+        }
+        function toggleWeather() {
+            const conditions = ['clear', 'rain', 'fog'];
+            const currentIndex = conditions.indexOf(weatherCondition);
+            weatherCondition = conditions[(currentIndex + 1) % conditions.length];
+            document.getElementById('weatherBtn').textContent = `Weather: ${weatherCondition}`;
+            // Update visual effects
+            if (weatherCondition === 'fog') {
+                scene.fog.near = 50;
+                scene.fog.far = 200;
+            } else {
+                scene.fog.near = 200;
+                scene.fog.far = 800;
+            }
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        init();
+    </script>
+</body>
+</html>