> For the complete documentation index, see [llms.txt](https://asus-isg-aidc.gitbook.io/guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asus-isg-aidc.gitbook.io/guide/latest/portal/infrastructureplannerintroduction/datacenter.md).

# 3D Data Center

| Developer | Last modified |
| --------- | ------------- |
| AIDC Team | 2026/05/06    |

## Introduction

The 3D Data Center module is the core editing interface of Infrastructure Planner. Powered by a Three.js real-time 3D visualization engine, it provides a what-you-see-is-what-you-get approach to data center floor planning. Users can freely rotate the camera, drag and drop racks onto the floor, click racks to inspect their contents, and monitor power and weight capacity in real time.

***

## Interface Overview

![Full 3D Data Center interface showing the left Rack Template panel, central 3D viewport with floor grid and deployed racks, right Rack Inspector Panel, and bottom environment bar](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-1.png)

***

### Top Toolbar

![Top toolbar showing Select Layout dropdown, pencil (edit) icon, trash (delete) icon, New button, Import JSON button, and Export JSON button](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-2.png)

| Element           | Description                                                                               |
| ----------------- | ----------------------------------------------------------------------------------------- |
| **Select Layout** | Switch the layout to edit; the 3D scene reloads automatically after selection             |
| Pencil icon       | Edit the current layout's basic information (name, location, dimensions, capacity limits) |
| Trash icon        | Delete the current layout (**irreversible** — use with caution)                           |
| **New** button    | Create a new layout and open the New Layout dialog                                        |
| **Import JSON**   | Import a complete layout from a JSON file (includes racks, devices, and nodes)            |
| **Export JSON**   | Export the current layout to a JSON file for backup or cross-environment migration        |

***

### Left Panel: Rack Template Catalog

![Left Rack Template panel displaying rack template cards with name and manufacturer, a keyword search bar, and an All Manufacturers filter dropdown](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-3.png)

The Rack Template panel lists all available rack templates. Drag a template card onto the 3D floor to deploy a rack:

| Action                  | Description                                                                                                   |
| ----------------------- | ------------------------------------------------------------------------------------------------------------- |
| **Search**              | Type a keyword in the search bar to filter by template name or manufacturer                                   |
| **Manufacturer filter** | Select a manufacturer from the All Manufacturers dropdown to narrow the list                                  |
| **Drag to deploy**      | Drag a template card onto the target position on the 3D floor grid; the rack appears in the scene immediately |

***

### Central 3D Viewport

![Central 3D viewport showing a dark floor grid with deployed rack models rendered in cyan outlines](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-4.png)

The 3D scene displays the floor grid and all deployed rack models for the current layout:

| Element           | Description                                                                                        |
| ----------------- | -------------------------------------------------------------------------------------------------- |
| **Floor grid**    | Grid lines drawn at 600 mm × 600 mm intervals (standard raised-floor tile size) for rack alignment |
| **Rack 3D model** | Each deployed rack is rendered as a 3D model with a cyan outline by default                        |
| **Selected rack** | After clicking a rack, its outline turns orange-red to indicate the selected state                 |

***

### Right Panel: Rack Inspector

![Right Rack Inspector Panel showing the selected rack name, remark field, stats (42U / 3 devices / 0 nodes), device list with U-slot ranges, and the red Decommission Rack button at the bottom](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-5.png)

After clicking a rack in the 3D scene, the right panel displays its complete information:

| Element                       | Description                                                                                           |
| ----------------------------- | ----------------------------------------------------------------------------------------------------- |
| Rack name                     | Click the pencil icon on the right to edit inline                                                     |
| Remark                        | Click the pencil icon on the right to edit inline                                                     |
| **U count / Devices / Nodes** | Basic rack statistics (e.g., 42U / 3 devices / 0 nodes)                                               |
| Device list                   | Lists all installed devices from top U to bottom U, showing U-slot range, device name, and node count |
| **Decommission Rack**         | Removes this rack and all its devices and nodes permanently                                           |

***

### Editing Devices

Devices can be dragged directly from the left **Device Library** into U slots of the selected rack. Edit Mode must be enabled first.

**Step 1 — Enable Edit Mode**

Click the **wrench icon** in the upper-right corner of the Rack Inspector Panel. The orange **EDIT MODE ACTIVE** badge appears at the top of the panel, indicating the rack is ready to accept devices.

![Rack Inspector Panel with the wrench icon highlighted in a red box in the upper-right corner; the orange EDIT MODE ACTIVE badge is visible at the top of the panel](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-16.png)

**Step 2 — Drag a Device into a U Slot**

Find the target device model in the Device Library on the left (each card shows the device name, U height, and manufacturer). Hold and drag the card into the target U slot on the rack. During the drag, the system shows the target U slot number (e.g., **U19**) as a placement guide.

![Device Library panel with XA NB3I-E12 highlighted in a red box; a red arrow points from the card into the rack viewport, where a preview shows the device landing at U19](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-17.png)

**Step 3 — Collision Constraint Warning**

If the target U slot is already occupied, the rack is highlighted with a **red border** and a **Collision constraint** warning appears. The system prevents the device from being placed at the conflicting position. Choose a different empty U slot and try again.

![Rack surrounded by a red border with a "Collision constraint" label in red; the dragged device preview overlaps an occupied slot shown at U30](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-18.png)

***

### Bottom Environment Bar

![Bottom environment bar showing the Environment label with Width and Length input fields, and toolbar icons for view toggle, reset camera, theme switch, and PDF export](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-6.png)

| Element           | Description                                                                     |
| ----------------- | ------------------------------------------------------------------------------- |
| **Environment**   | Displays the current layout's floor dimensions (Width × Length, in centimeters) |
| View toggle icon  | Switches between Top View and Perspective mode                                  |
| Reset camera icon | Resets the 3D camera to the default position                                    |
| Theme toggle icon | Switches between Dark and Light themes                                          |
| PDF export icon   | Captures the current view and generates a layout PDF report                     |

***

## 3D Viewport Controls

![Diagram showing mouse controls: left-click drag to orbit, scroll wheel to zoom, right-click drag to pan](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-7.png)

| Action                  | Method                                |
| ----------------------- | ------------------------------------- |
| **Orbit** (rotate view) | **Left-click** and drag               |
| **Zoom**                | **Scroll wheel**                      |
| **Pan**                 | **Right-click** and drag              |
| **Select a rack**       | **Left-click** on a rack in the scene |
| **Deselect**            | Click on an empty area of the floor   |

### Perspective / Top View Toggle

Click the view toggle icon on the bottom toolbar to switch between the two modes:

![Side-by-side comparison of Perspective mode (3D angled view) and Top View mode (overhead floor plan)](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-8.png)

| Mode            | Description                                                                        |
| --------------- | ---------------------------------------------------------------------------------- |
| **Perspective** | Default 3D perspective camera — ideal for understanding overall spatial layout     |
| **Top View**    | Overhead floor-plan camera — ideal for verifying rack alignment and aisle planning |

***

## Main Operations

### Create a New Layout

1. Click the **New** button in the top toolbar.
2. Fill in the following fields in the New Layout dialog:

![New Layout dialog with input fields for Name, Location, Description, Floor Width (m), Floor Length (m), Max Power (W), and Max Weight (kg), and Cancel / Confirm buttons at the bottom](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-9.png)

| Field                | Description                                    | Required |
| -------------------- | ---------------------------------------------- | :------: |
| **Name**             | Layout name (must be unique within the system) |     ✓    |
| **Location**         | Data center location (e.g., Taipei DC)         |     ✓    |
| **Description**      | Purpose or notes for this layout               |          |
| **Floor Width (m)**  | Floor width in centimeters                     |     ✓    |
| **Floor Length (m)** | Floor length in centimeters                    |     ✓    |
| **Max Power (W)**    | Maximum power capacity in watts                |     ✓    |
| **Max Weight (kg)**  | Maximum weight limit in kilograms              |     ✓    |

3. Click **Confirm**. The system loads an empty floor grid, ready for rack placement.

***

### Deploy Racks to the 3D Scene

1. Open the left **Rack Template** panel.
2. Search or scroll to find the target rack template.
3. Drag the template card onto the target position on the floor grid and release.
4. The rack appears in the scene. The system automatically runs **collision detection** to prevent racks from overlapping.
5. Repeat for each rack in your plan.

![Rack template card being dragged from the left panel onto the 3D floor grid; the rack model appears at the drop position](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-10.png)

{% hint style="info" %}
**💡 Tip**

Racks snap to the 600 mm × 600 mm floor grid, ensuring aisle widths comply with standard data center layout guidelines.
{% endhint %}

***

### Reposition a Rack

1. Click the move button in the 3D scene.
2. Click the target rack and drag it to the new position, then release.
3. The system runs collision detection in real time. If the target position overlaps another rack, the move is blocked.

![A rack being repositioned in the 3D viewport; a red collision boundary highlights the blocked area where another rack is already placed](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-11.png)

***

### Save / Edit Layout

1. If you have changed the Environment dimensions, click **Update Layout** in the lower-right corner.

![Bottom-right area of the 3D scene showing the Update Layout button highlighted after floor dimension changes](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-12.png)

2. To edit the layout's basic information (name, location, capacity limits), click the **pencil icon** in the top toolbar.

![Top toolbar with the pencil (edit) icon highlighted, used to open the layout information edit dialog](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-13.png)

***

### Layout JSON Export / Import

**Export**: Click **Export JSON** in the top toolbar. The browser downloads a JSON file automatically.

**Import**: Click **Import JSON**, select a JSON file, and the system loads and renders the complete layout configuration.

![Top toolbar with Import JSON and Export JSON buttons highlighted](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-14.png)

{% hint style="info" %}
**💡 Tip**

The exported JSON can be used for backups, cross-environment migration, or integration with external CMDB / DCIM systems.
{% endhint %}

#### JSON Format Reference

The exported JSON is a single object with the following structure:

```jsonc
{
  // ── Layout basic information ───────────────────────────────
  "layoutId": "layout-6fc8024b-a541-4bf5-bf95-fec90f6ad502",
  "layoutName": "AI Park2",
  "location": "Default Location",
  "description": "Default Description",

  // ── Floor environment settings (dimensions in centimeters; power in W; weight in kg) ──
  "environment": {
    "floorDimensions": { "width": 23, "length": 21 },
    "maxPower": 20000,
    "maxWeight": 20000
  },

  // ── Deployed rack list ────────────────────────────────────
  "racks": [
    {
      "deployedRackId": "dr-96ee888a-...",
      "deployedRackName": "ESC NM2N721-E1 (NVIDIA GB200 NVL72)", // User-defined name; can differ from the template name
      "layoutId": "layout-6fc8024b-...",
      "position": [3.9, 0, 5.4], // 3D coordinates [x, y, z] in centimeters
      "rotation": 180,            // Rotation in degrees: 0 = facing front, 180 = facing back
      "status": "active",         // active / warning / offline
      "remark": "",

      // ── Rack template specs (from Rack Templates module) ──
      "rackName": "ESC NM2N721-E1 (NVIDIA GB200 NVL72)",
      "rackManufacturer": "ASUS",
      "rackHeightU": 48,
      "rackWidthMm": 600,
      "rackHeightMm": 2236,
      "rackDepthMm": 1068,
      "rackEditable": false,           // false = built-in template (read-only); true = custom rack
      "rackCoolingType": "100% Liquid Cooled",

      // ── U-slot configuration (device: null means the slot is empty) ──
      "slots": [
        { "uPosition": 1, "device": null },
        {
          "uPosition": 5,
          "device": {
            "deployedDeviceId": "dd-...",
            "deviceId": "dev-...",

            // ── Device model specs (from Device Library module) ──
            "deviceName": "ESC8000-E13P",
            "deviceUSize": 4,
            "deviceNodeCapacity": 3,
            "deviceManufacturer": "ASUS",
            "deviceType": "Server",
            "deviceColor": "#00A2E0",
            "devicePxe": 1,
            "deviceBmc": 1,
            "deviceEth": 4,
            "deviceIb": 2,
            "devicePower": 3200, // Counted toward the layout's total power usage (W)
            "deviceWeight": 42,  // Counted toward the layout's total weight (kg)

            // ── Sub-node list ─────────────────────────────────
            "subNodes": [
              {
                "subNodeId": "sn-...",
                "nodeId": "node-...",
                "hostname": "node-01",
                "model": "ESC8000-E13P",
                "nodeGroup": "compute",
                "slotIndex": 0,

                // ── Network interface cards (NICs) ──
                "nics": [
                  {
                    "name": "eth0",
                    "card": "nic0",
                    "networkType": "ethernet", // ethernet / infiniband
                    "mac": "aa:bb:cc:dd:ee:ff",
                    "guid": "",
                    "formFactor": "SFP28",
                    "speed": "25GbE"
                  }
                ],

                // ── Bond / VLAN interfaces ──
                "interfaces": [
                  { "name": "bond0", "type": "bond" }
                ]
              }
            ]
          }
        }
      ]
    }
  ]
}
```

**Top-level fields**

| Field                         | Description                                           |
| ----------------------------- | ----------------------------------------------------- |
| `layoutId`                    | Layout UUID (reassigned automatically on import)      |
| `layoutName`                  | Layout name                                           |
| `location`                    | Data center location                                  |
| `description`                 | Layout description                                    |
| `environment.floorDimensions` | Floor dimensions (`width` / `length`, in centimeters) |
| `environment.maxPower`        | Maximum power limit (W)                               |
| `environment.maxWeight`       | Maximum weight limit (kg)                             |
| `racks`                       | Array of deployed racks                               |

**Rack fields (racks\[])**

| Field                                          | Description                                                                                |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `deployedRackName`                             | User-defined rack name (can differ from the template name)                                 |
| `position`                                     | 3D coordinates `[x, y, z]` in centimeters                                                  |
| `rotation`                                     | Rotation angle in degrees (0 or 180)                                                       |
| `status`                                       | Rack status (`active` / `warning` / `offline`)                                             |
| `rackName`                                     | Name of the referenced rack template                                                       |
| `rackManufacturer`                             | Manufacturer                                                                               |
| `rackHeightU`                                  | Rack height in U (e.g., 42 or 48)                                                          |
| `rackWidthMm` / `rackDepthMm` / `rackHeightMm` | Physical dimensions (mm)                                                                   |
| `rackEditable`                                 | `true` = custom rack; `false` = built-in template (read-only)                              |
| `rackCoolingType`                              | Cooling type (`Air Cooled` / `100% Liquid Cooled`, etc.)                                   |
| `slots`                                        | U-slot array; each element contains `uPosition` and `device` (`null` if the slot is empty) |

**Device fields (slots\[].device)**

| Field                                                | Description                                                    |
| ---------------------------------------------------- | -------------------------------------------------------------- |
| `deviceName`                                         | Device model name                                              |
| `deviceUSize`                                        | Device height in U                                             |
| `deviceNodeCapacity`                                 | Node capacity                                                  |
| `devicePower`                                        | Power consumption (W)                                          |
| `deviceWeight`                                       | Weight (kg)                                                    |
| `devicePxe` / `deviceBmc` / `deviceEth` / `deviceIb` | Port counts by network type                                    |
| `subNodes`                                           | Sub-node array (contains `hostname`, `nics`, and `interfaces`) |

***

### Export PDF Report (feature incomplete)

1. Click the **PDF** export icon in the top toolbar.

![Top toolbar with the PDF export icon highlighted on the left side](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/infrastructurePlanner/dataCenter/dataCenter-15.png)

2. The system captures a top-view screenshot of the current layout and generates a landscape A4 PDF report containing:

| PDF Content                          | Description                                    |
| ------------------------------------ | ---------------------------------------------- |
| Layout name / location / description | Layout basic information                       |
| Floor dimensions                     | Floor Width × Length (centimeters)             |
| Power usage                          | Current consumption / limit (W) and percentage |
| Weight usage                         | Current weight / limit (kg) and percentage     |
| Total racks / total nodes            | Layout summary statistics                      |
| 3D top view                          | Floor-plan screenshot of the rack arrangement  |
| Rack list                            | Rack names, positions, and device details      |

***

## Real-Time Capacity Monitoring (feature incomplete)

While working in the 3D scene, the bottom environment bar continuously displays the accumulated totals for the current layout:

| Metric       | Description                                                                                      |
| ------------ | ------------------------------------------------------------------------------------------------ |
| Power usage  | Sum of `Power (W)` across all devices in all racks, compared against the layout's power limit    |
| Weight usage | Sum of `Weight (kg)` across all devices in all racks, compared against the layout's weight limit |

{% hint style="warning" %}
**⚠️ Overload Warning**

When either metric exceeds 100%, a red warning is displayed. Adjust the device configuration before proceeding with actual deployment.
{% endhint %}