This project creates a 3D WebGL-based visualization system for real-time visitor monitoring with in an exhibition complex. The primary technology stack includes Three.js for 3D rendering, ECharts for 2D charting, and WebSocket for live data transmission. The system displays visitor density, demographic analytics, and flow patterns across different sections of a venue.

A core technical advantage is the programmatic generation of complex, irregular building geometries using Three.js's ExtrudeGeometry and object grouping, eliminating the need for large external model files and improving load performance. Real-time visitor data is visualized as dynamic 3D heatmaps overlaid on the architectural models. The system also features interactive 3D annotation bubbles, animated model transitions, and spatial connection lines between 3D scene elements and 2D UI panels.

Memory management is a critical consideration. The renderer and geometry buffers are actively monitored to prevent leaks, with unused objects systematically disposed of using dispose() methods on geometries, materials, and textures.

Data Pipeline and Visualization Logic

Hardware sensors, including Wi-Fi probes and AI-based facial recognition systems, collect raw foot traffic data. This data is processed server-side to deduplicate counts and calculate real-time metrics per zone. Processed data is streamed to the browser via WebSocket. The front end logic parses this stream, updating the 3D heatmap intensities and 2D dashboard statistics.

The interface provides multiple views: an overview of the entire complex, detailed floor-by-floor analysis, and individual hall inspection. Users can filter views by visitor density ranges (e.g., 0-15, 10-25 persons per zone) and trigger floor decompsoition animations.

Core Code Implementation

1. Programmatic 3D Model Definition Models are defined using JSON configurations that specify geometry, materials, and hierarchy. This approach allows for dynamic construction and efficient updates.

// Example: Defining a wall segment for a floor
const wallSpecification = {
    visible: true,
    identifier: 'wall_segment_alpha',
    type: 'BoxGeometry',
    dimensions: { length: 1700, width: 6, height: 200 },
    location: { x: -125.017, y: 100, z: -1321.688 },
    appearance: {
        baseColor: 0xFFFFFF,
        surfaces: {
            top: { color: 0x8FDFFF, opacity: 0.2 },
            front: { color: 0x5ECFFF, opacity: 0.1 },
            // ... other face materials
        }
    },
    orientation: { x: 0, y: 0, z: 0 }
};
// This specification is passed to a factory function that creates the Three.js Mesh
const wallMesh = geometryBuilder.createFromSpec(wallSpecification);
scene.add(wallMesh);

2. Real-time Heatmap Rendering A custom CloudChart object is implemented to render heatmaps as textured planes within the 3D scene. It receives data points with x, y coordinates (relative to the floor plan) and intensity values.

class DensityVisualizer {
    constructor(floorMesh, dataPoints, maxDensity) {
        this.floor = floorMesh;
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.texture = new THREE.CanvasTexture(this.canvas);
        this.material = new THREE.MeshBasicMaterial({ map: this.texture, transparent: true });
        this.plane = new THREE.Mesh(new THREE.PlaneGeometry(600, 300), this.material);
        this.plane.rotation.x = -Math.PI / 2;
        this.plane.position.set(0, 10, 0); // Slightly above the floor
        this.floor.add(this.plane);
        this.updateData(dataPoints, maxDensity);
    }

    updateData(points, peakValue) {
        // Clear and redraw gradient based on new data
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        const gradient = this.ctx.createRadialGradient(300, 150, 0, 300, 150, 350);
        gradient.addColorStop(0, 'rgba(255, 0, 0, 0.8)');
        gradient.addColorStop(1, 'rgba(255, 0, 0, 0.0)');

        points.forEach(pt => {
            this.ctx.globalAlpha = pt.value / peakValue;
            this.ctx.fillStyle = gradient;
            this.ctx.fillRect(pt.x - 15, pt.y - 15, 30, 30);
        });
        this.texture.needsUpdate = true;
    }
}

3. Interactive Scene Management A central controller manages view transitions, object visibility, and user interactions like clicking on a building to drill down.

class SceneController {
    constructor() {
        this.activeView = 'overview';
        this.cachedModels = {};
    }

    switchToDetailedView(hallId) {
        this.fadeOutGroup(this.getMainComplexModels());
        this.fadeInGroup(this.getHallModels(hallId));
        this.animateCameraToPosition(hallCameraPositions[hallId]);
        this.activeView = 'hall-detail';
    }

    fadeOutGroup(objects) {
        objects.forEach(obj => {
            new TWEEN.Tween(obj.material)
                .to({ opacity: 0.05 }, 1000)
                .onComplete(() => { obj.visible = false; })
                .start();
        });
    }
    // ... other management methods
}

4. WebSocket Data Handler A client-side module subscribes to a live data feed and updates the visualization state.

const dataBridge = new WebSocket('wss://server/data/stream');
const dataProcessor = new DataProcessor();

dataBridge.onmessage = (event) => {
    const payload = JSON.parse(event.data);
    // Update total visitor count
    uiDashboard.updateCounter(payload.total);
    // Update heatmap data for each zone
    payload.zones.forEach(zone => {
        const heatmap = heatmapRegistry.get(`zone_${zone.id}`);
        if (heatmap) heatmap.updateData(zone.densityPoints, zone.peak);
    });
    // Update demographic charts
    demographicCharts.update(payload.demographics);
};

5. UI Integration (HTML Skeleton) The 3D canvas is embedded within a traditional HTML layout containing dashboard panels.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Exhibition Center Monitoring</title>
    <link rel="stylesheet" href="dashboard.css">
    <script src="three.min.js"></script>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="header">
        <h1>National Exhibition Center • Live Visitor Analytics</h1>
        <div id="timestamp"></div>
    </div>
    <div id="main-container">
        <div id="vis3d-container">
            <iframe id="renderFrame" src="3d-renderer.html"></iframe>
        </div>
        <div id="sidebar">
            <div class="panel" id="total-count-panel">
                <h3>Current Total</h3>
                <div class="counter">0</div>
            </div>
            <div class="panel" id="demographic-panel">
                <h3>Demographics</h3>
                <div id="age-chart"></div>
                <div id="origin-chart"></div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

The system demonstrates a practical integration of real-time data, 3D graphics, and interactive UI components to create a comprehensive operational visibility tool for large-scale venue management.