react-digital-twin-viewer 🏢⚡

A high-performance, browser-based 3D Digital Twin component library built with React, TypeScript, and Three.js for IoT, BMS, HVAC, and Energy Management platforms.

🚀 Key Features

• 📦 glTF / GLB 3D Model Loading: Built-in web-optimized loader with asynchronous progress tracking.
• 🎯 3D Raycasting & Part Picking: Detect equipment clicks with mouse coordinates, trigger emissive cyan highlighting, and fire callback handlers.
• 📐 Auto-Centering & Fit (THREE.Box3): Automatically computes bounding boxes so any CAD or BIM 3D model is framed perfectly in front of the camera.
• 🕹️ Built-in OrbitControls: Smooth damping for 360° rotation, panning, and zoom.
• ⚡ Pre-built HVAC Equipment Twins: Ready-to-use procedural AHU (Air Handling Unit) and VAV (Variable Air Volume) terminal boxes with live telemetry integration.
• 🛡️ TypeScript Ready: Full TypeScript .d.ts declaration maps included.

📦 Installation

npm install react-digital-twin-viewer three

💻 Quick Start

1. Load a custom 3D GLB Model

import React from 'react';
import { GLBViewer } from 'react-digital-twin-viewer';

export function BuildingView() {
  return (
    <div>
      <h2>HVAC Digital Twin</h2>
      <GLBViewer 
        modelUrl="/models/ahu_unit.glb"
        onPartSelect={(partId) => console.log('Selected 3D Equipment:', partId)}
      />
    </div>
  );
}

2. Use the Procedural HVAC 3D Scene

import React, { useState } from 'react';
import { ThreeScene, Equipment } from 'react-digital-twin-viewer';

export function OperationsCenter() {
  const [selectedId, setSelectedId] = useState('AHU-001');

  return (
    <div>
      <ThreeScene onSelectedEqu={(id) => setSelectedId(id)} />
      <p>Active 3D Telemetry: {selectedId}</p>
    </div>
  );
}

📄 License

MIT