Implementing a digital twin for smart campus management requires integrating procedural geometric modeling, real-time telemetry overlays, and IoT infrastructure visualization. This architecture demonstrates how to construct an immersive 3D environment representing modern urban facilities including intelligent lampposts, dynamic building systems, and sensor networks using browser-based rendering technologies.

Procedural Architectural Generation

Rather than importing heavy external model assets, campus structures are generated programmatically using extrusion techniques. A building footprint is defined as a 2D shape and extruded vertically to create massing:

const generateFacility = () => {
  const footprint = new THREE.Shape();
  footprint.moveTo(0, 0);
  footprint.lineTo(35, 0);
  footprint.lineTo(35, 10);
  footprint.lineTo(65, 10);
  footprint.lineTo(65, 30);
  footprint.lineTo(-30, 30);
  footprint.lineTo(-30, 10);
  footprint.lineTo(0, 10);
  
  const params = {
    depth: 300,
    bevelEnabled: true,
    bevelThickness: 1,
    bevelSize: 1,
    steps: 2
  };
  
  const geometry = new THREE.ExtrudeGeometry(footprint, params);
  const material = new THREE.MeshPhongMaterial({
    color: 0x242f3e,
    specular: 0x111111,
    shininess: 30
  });
  
  const structure = new THREE.Mesh(geometry, material);
  structure.rotation.x = Math.PI / 2;
  structure.position.y = 150;
  return structure;
};

Facade details utilize canvas-generated textures to simulate glazing patterns and floor plates without additional geometry. This method maintains performance during aerial overview navigation while providing sufficient detail for ground-level inspection.

Intelligent Infrastructure Modeling

Smart lampposts integrate 5G transmission equipment, environmental monitoring, digital displays, and emergency charging ports. The composite 3D representation combines lathe geometries for tapered structural elements and extruded profiles for cantilevered arms:

function assembleSmartPole() {
  const assembly = new THREE.Group();
  
  // Tapered shaft profile
  const profile = [];
  for (let i = 0; i < 12; i++) {
    profile.push(new THREE.Vector2(
      0.9 - (i * 0.025),
      i * 30
    ));
  }
  
  const columnGeo = new THREE.LatheGeometry(profile, 20);
  const metalMat = new THREE.MeshStandardMaterial({
    color: 0xaaaaaa,
    metalness: 0.7,
    roughness: 0.3
  });
  const column = new THREE.Mesh(columnGeo, metalMat);
  assembly.add(column);
  
  // Curved arm with Bezier definition
  const armPath = new THREE.Shape();
  armPath.moveTo(0, 0);
  armPath.bezierCurveTo(-12, 55, 75, 75, 75, 75);
  
  const armGeo = new THREE.ExtrudeGeometry(armPath, {
    depth: 1.2,
    bevelEnabled: true,
    bevelThickness: 0.4,
    bevelSize: 0.4
  });
  
  const arm = new THREE.Mesh(armGeo, metalMat);
  arm.position.set(0, 260, 0);
  arm.rotation.z = Math.PI;
  assembly.add(arm);
  
  // Sensor housing
  const sensorBox = new THREE.Mesh(
    new THREE.BoxGeometry(4, 6, 3),
    new THREE.MeshStandardMaterial({ color: 0x333333 })
  );
  sensorBox.position.set(0, 180, 2);
  assembly.add(sensorBox);
  
  return assembly;
}

Environmental Context and Traffic Systems

The terrain utilizes a subdivided plane with vertex displacement for topographic variation. Road infrastructure employs spline curves for smooth vehicle trajectories, with animated texture offsets simulating traffic flow:

const routeCurve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-400, 0.5, 0),
  new THREE.Vector3(0, 0.5, 50),
  new THREE.Vector3(400, 0.5, 0)
]);

const roadway = new THREE.TubeGeometry(routeCurve, 100, 35, 12, false);
const asphalt = new THREE.MeshLambertMaterial({ color: 0x2a2a2a });

// Dynamic lane markings via canvas texture
const laneCanvas = document.createElement('canvas');
laneCanvas.width = 512;
laneCanvas.height = 64;
const ctx = laneCanvas.getContext('2d');
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 30, 40, 4);
ctx.fillRect(80, 30, 40, 4);

const laneTexture = new THREE.CanvasTexture(laneCanvas);
laneTexture.wrapS = THREE.RepeatWrapping;
laneTexture.wrapT = THREE.RepeatWrapping;
laneTexture.repeat.set(20, 1);

const markingMat = new THREE.MeshBasicMaterial({
  map: laneTexture,
  transparent: true,
  opacity: 0.8
});

// Animation update
const updateTraffic = () => {
  laneTexture.offset.x -= 0.015;
};

Telemetry Dashboard Integration

The 3D viewport overlays HTML5 dashboards using absolute positioning and CSS transforms. Real-time facility data renders through charting libraries:

const initMetrics = () => {
  const chart = echarts.init(document.getElementById('env-chart'));
  chart.setOption({
    radar: {
      indicator: [
        { name: 'Air Quality', max: 100 },
        { name: 'Noise', max: 100 },
        { name: 'Temp', max: 50 },
        { name: 'Humidity', max: 100 },
        { name: 'PM2.5', max: 200 }
      ],
      axisName: { color: '#d3e0fa' }
    },
    series: [{
      type: 'radar',
      data: [{
        value: [82, 42, 24, 58, 32],
        areaStyle: { color: 'rgba(0, 212, 199, 0.4)' },
        lineStyle: { color: '#00d4c7' }
      }]
    }]
  });
};

Raycasting enables interaction with specific lamppost instances, triggering detail panels displaying power consumption, network latency, and device status. CSS animations transition between overview and detail states without disrupting the WebGL render loop.

Optimization Strategies

For deployments exceeding 500+ IoT devices, implement instanced mesh rendering for repeated geometries like lampposts and vegetation. Level-of-Detail (LOD) systems substitute high-poly architectural models with billboard sprites or simplified boxes when camera distance exceeds 500 meters. Texture atlasing consolidates interface elements and building facade patterns into unified GPU textures to minimize state changes and draw calls.

This technical stack provides a foundation for scalable smart city visualization, bridging physical enfrastructure monitoring with immersive spatial interfaces.