The Stardec Digital Twin Visualization Platform is built on Three.js, delivering 3D scene editing and digital twin construction capabilities in the web browser. The platform focuses on model asset management, rapid scene assembly, and spatial element placement—helping users import BIM, oblique photogrammetry, or hand-modeled assets and complete scene composition, instance duplication, and icon annotation in the browser, providing a visualization foundation for IoT data binding and business application development.
The platform provides core capabilities including model import, model management, scene editing, model editing and cloning, and icon element drag-and-drop. It supports importing GLB/GLTF models into a unified asset library, performing translation, rotation, scaling, and hierarchy organization in the 3D viewport; instance cloning for repeated elements such as trees and vehicles to improve large-scene assembly efficiency; and icon drag-and-drop to quickly place monitoring, equipment, and alarm elements at spatial positions, forming interactive digital twin scenes.
The platform is under continuous iteration and is suited for medical laboratories, smart campuses, intelligent buildings, and other scenarios requiring web-based 3D scene editing and digital twin foundations—deliverable in combination with the Stardec IoT Integration Platform and smart operations applications.
Core Capabilities
Model Import: Upload and parse GLB/GLTF and other formats into the platform asset library
Model Management: Model classification, search, preview, and version maintenance for unified 3D digital asset management
Scene Editing: Place, transform, organize hierarchy, and manage scenes in the web 3D viewport
Model Editing & Cloning: Edit position, rotation, and scale in the viewport; instance-copy repeated objects such as trees and vehicles for efficient large-scene assembly
Icon Element Drag-and-Drop: Drag and place monitoring, equipment, alarm, and other icons to quickly annotate spatial elements
Three.js Rendering: Smooth web browser presentation and interaction powered by WebGL
Scene Editing Workbench
The editor provides a scene tree, 3D viewport, resource center, and property panel: the left panel manages scene hierarchy and object lists, the center provides real-time 3D preview and editing, the bottom resource center offers draggable assets categorized by models, materials, particles, billboards, HTML panels, and more, and the right panel configures ambient lighting, background, and project properties. Supports import/export, undo/redo, copy, and preview—enabling rapid assembly and adjustment of medical laboratory, campus, and building scenes.
Model Import
Import external 3D models into projects alongside built-in geometry, architecture, vegetation, vehicles, and other categorized resources. Imported models can be searched, previewed, and dragged into scenes from the resource center, reducing redundant modeling effort.
Resource Center & Icon Placement
The resource center organizes assets by type—models, materials, particles, billboards, lights, cameras, and more—with categories for architecture, people, plants, animals, vehicles, and machinery. Billboard and HTML panel elements support icon drag-and-drop placement, enabling quick annotation of monitoring, equipment, and alarms in the 3D scene for spatial element visualization.
Model Editing & Cloning
Transform models in the 3D viewport—position, rotation, scale—and clone repeated objects such as trees and vehicles with one-click batch duplication, random distribution, or uniform settings for efficient campus and park scene assembly. The scene tree manages thousands of GLB instances, combined with icon annotation for rapid spatial element placement and export.
Stardec