QMap
3D network traffic visualization built on Three.js. Renders actors, data flows, and boundary crossings in an explorable isometric scene.
@qpoint-io/qmap · v0.1.0
Live Demo
Loading 3D scene...
18 actors · 17 connections
QMap Component
import { QMap } from '@qpoint-io/qmap'| Prop | Type | Default | Description |
|---|---|---|---|
| width | String | Number | '100%' | Container width. Numbers are treated as pixels. |
| height | String | Number | '400px' | Container height. Numbers are treated as pixels. |
| actors | Array | [] | Actor data array. Changes trigger animated transitions. |
| connections | Array | [] | Connection data array. { id, origin, destination } |
| groupBy | Object | {} | Grouping config. e.g. { level1: "Cloud", level2: "Region" } |
| backgroundColor | String | Number | 0xffffff | Scene background color (hex). |
| frustumSize | Number | 30 | Orthographic camera frustum size. |
| selectable | Boolean | true | Enable click-to-select actors. |
| autoStart | Boolean | true | Start the animation loop on mount. |
| faviconProxy | String | '/api/favicon' | URL prefix for vendor favicon proxy. |
Events
| Event | Description |
|---|---|
| ready | Emitted when the Three.js scene is initialized |
| actor-select | Emitted when an actor is clicked. Payload: { actorId, actor } |
| actor-deselect | Emitted when selection is cleared |
| transition-start | Emitted when an animated transition begins |
| transition-end | Emitted when an animated transition completes |
SSR: Three.js requires browser globals. Always wrap in <ClientOnly> when used in Nuxt/SSR apps.