<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Hightopo</title>
    <description>The latest articles on Forem by Hightopo (@hightopo).</description>
    <link>https://forem.com/hightopo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F971996%2Facc9f3b8-e2e1-4d42-a43d-638d59a9f83a.jpg</url>
      <title>Forem: Hightopo</title>
      <link>https://forem.com/hightopo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/hightopo"/>
    <language>en</language>
    <item>
      <title>Digital Twin Technology for Comprehensive Aerospace Vehicle Lifecycle Management</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Tue, 03 Feb 2026 04:35:41 +0000</pubDate>
      <link>https://forem.com/hightopo/digital-twin-technology-for-comprehensive-aerospace-vehicle-lifecycle-management-59pj</link>
      <guid>https://forem.com/hightopo/digital-twin-technology-for-comprehensive-aerospace-vehicle-lifecycle-management-59pj</guid>
      <description>&lt;p&gt;The spaceflight system has evolved into a complex super-engineering system. As missions become increasingly complex, the industry urgently needs a more intelligent and collaborative monitoring system with improved multi-source data fusion efficiency, standardized cross-system interactions, and enhanced real-time response capabilities in physical space. Using the &lt;strong&gt;&lt;a href="https://hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;HT for Web (HT)&lt;/a&gt;&lt;/strong&gt; graphics engine, we created a high-precision reality mapping system that enables real-time aerospace operation state perception, dynamic data analysis, and remote collaborative management. This technology is advancing aerospace engineering into a new era of intelligent operation and maintenance.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Product
&lt;/h2&gt;

&lt;p&gt;This section demonstrates three key visualizations: a monitoring simulation of the complete space shuttle launch process, precise dynamic control of the rocket recovery phase, and a technical demonstration of 2D visualization of the space shuttle lift-off process. Using the HT low-code digital twin platform, we convert complex aerospace systems and massive data into intuitive visual interfaces that overcome time and resource limitations while accurately simulating various complex and extreme launch scenarios. This technology provides space engineering professionals with advanced tools for efficient mission planning, precise risk assessment, and data-driven decision optimization.&lt;br&gt;


  &lt;iframe src="https://www.youtube.com/embed/htZXsKxSEno"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;

&lt;h2&gt;
  
  
  System Analysis
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F67ksnbwn34q72a5hzh69.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F67ksnbwn34q72a5hzh69.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Shuttle Launch Monitoring
&lt;/h3&gt;

&lt;p&gt;Based on Hightopo’s advanced 3D rendering technology, we accurately constructed 1:1 digital twins of the Shuttle’s external fuel tank, solid rocket boosters, and launch pad. The composite structural system, launch infrastructure, and surrounding environment of the Shuttle are reproduced with centimeter-level accuracy, creating an immersive command platform that enables the command team to break through geographic constraints and achieve efficient cross-regional collaborative decision-making.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fuel Filling Monitoring&lt;/strong&gt;&lt;br&gt;
The system supports a first-person view interface that enables operators to monitor the level changes of fuel as it is transported from the storage ball tank to the launch pad and injected into the tank. Depending on the user’s specific data requirements, the platform can also present key indicators such as fuel refueling parameters, structural stress distribution of the external fuel tank, temperature field changes, and solid rocket booster pressure data. By comprehensively analyzing the interrelationships between these parameters, the system generates scientific launch decision support data, providing a reliable technical basis for the command team.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxlp3p8nt649ws1lxbbmr.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxlp3p8nt649ws1lxbbmr.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Dynamic simulation of equipment ignition&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the precisely constructed 3D virtual environment, we use HT 3D technology to professionally display the test workflow of the Space Shuttle’s front main engine gimbal regulator. After the test completes, the system automatically activates the hydrogen combustion unit, causing the three main engines to ignite simultaneously to generate high-energy thrust. Flame dynamics are accurately simulated by HT particle technology, providing high-fidelity visualization of vibration effects during ignition. Through the professional virtual navigation system, technicians can monitor ignition status parameters from a multi-dimensional perspective while accessing precise countdown data on the 2D data panel, creating a comprehensive integrated monitoring system.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F35n3mk3f3kctfryhny8i.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F35n3mk3f3kctfryhny8i.gif" alt=" "&gt;&lt;/a&gt;&lt;br&gt;
The system interface displays real-time dynamic monitoring data of key parameters including the orbiter’s main engine thrust curve, acceleration vector, attitude angular deviation, and solid rocket booster working status. This functionality effectively identifies potential faults such as main engine thrust abnormalities, solid rocket booster combustion instability, and external fuel tank leakage. Early warnings are provided through local highlighting marks on the model, enabling technicians to quickly locate problem sources and formulate appropriate solutions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa0ztve3brrd98yz3rhf7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa0ztve3brrd98yz3rhf7.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Rocket Recovery Simulation Analysis
&lt;/h3&gt;

&lt;p&gt;As reusable rocket technology has become a strategic focus of global space competition, traditional monitoring systems struggle with key challenges: dynamic modeling of rocket recovery, integration of spacecraft multivariate data, and instantaneous decision-making. Using the Jupiter III reusable launch vehicle as our simulation basis, we precisely constructed a digital twin management platform for the complete rocket launch and recovery cycle.&lt;/p&gt;

&lt;p&gt;This section highlights the digital twin rocket recovery operation and maintenance monitoring system, which accurately reproduces the actual recovery process through “digital mirroring.”&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Scene Roaming&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The system uses HT for Web’s GIS technology to create precise geospatial mapping, combining high-definition satellite imagery with 3D live modeling to reproduce the launch site’s topography, tower layout, and surrounding environment at a 1:1 scale. Additionally, the dynamic environment model incorporates real-time meteorological data such as wind speed and temperature, providing an accurate spatial reference for rocket recovery path planning.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffl4e7mlp00fugab2j6d4.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffl4e7mlp00fugab2j6d4.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Recovery Trajectory Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Using HT digital twin technology, the system analyzes real-time flight data and environmental parameters to optimize the rocket’s recovery trajectory through precise simulation. During the return phase, the platform continuously monitors the flight path, analyzes atmospheric conditions, and simulates recovery scenarios across various weather conditions and flight postures. This provides a scientific foundation for trajectory adjustments.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8uaj5k47d37xx36d2x0.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8uaj5k47d37xx36d2x0.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ht4x5cf91yuxiuma19v.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ht4x5cf91yuxiuma19v.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Recovery Data Monitoring&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The amount of data during the rocket recovery process is huge and complex, and HT’s 2D SCADA panel supports efficient monitoring and decision-making analysis.&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Panoramic situation panel&lt;/strong&gt;: basic information such as rocket model, reuse times, current operation stage, recovery process node, remaining propellant, rocket external temperature, current load, etc.&lt;br&gt;
■ &lt;strong&gt;Meteorological environment information&lt;/strong&gt;: environmental parameters such as wind direction, wind speed, temperature, humidity and visibility are monitored.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdrngb8o9zzag0zx6h2za.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdrngb8o9zzag0zx6h2za.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvbykibpzkplerchbl0jg.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvbykibpzkplerchbl0jg.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Using advanced particle dynamics simulation technology, the scene precisely captures the complex movement and interaction of numerous particles. It accurately reproduces the flame’s dynamic changes, heat diffusion patterns, and temperature gradient characteristics. This provides a highly realistic professional visualization of the entire rocket launch and recovery process.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fivdllvlkls6clgjg16f4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fivdllvlkls6clgjg16f4.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Space Shuttle Liftoff 2D Animation
&lt;/h3&gt;

&lt;p&gt;Using low-polygon animation technology integrated with HT’s low-code digital twin platform, we present the key components of the space shuttle, launch site, tower facilities, and surrounding environment. This approach simplifies complex space engineering processes into clear, interactive 2D animations that overcome limitations of traditional educational methods. Through intuitive visual storytelling, the system accurately illustrates the complete technical journey of the space shuttle from launch to orbital insertion.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Launch&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When the countdown on the 2D page reaches zero, the system executes the launch sequence and activates the rocket engine ignition program. The engine generates a precisely calculated thrust vector that drives the Shuttle smoothly off the launch platform into a predetermined ascent trajectory. Flame dynamics in the interface are rendered through HT’s particle rendering technology, combined with accurately simulated body vibration response, providing a professional and highly immersive visualization of the launch process.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmogrsln9nye86ohcoa9l.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmogrsln9nye86ohcoa9l.gif" alt=" "&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Climb and Booster Separation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This page dynamically illustrates the visual changes of the space shuttle as it traverses different atmospheric environments. As altitude increases, elements such as clouds and the ionosphere are clearly depicted. When the Shuttle reaches specific stages, the system accurately simulates the separation trajectory and attitude changes of the booster and fairing. This intuitive presentation enables viewers to easily visualize and comprehend the complex mechanisms of space flight.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiawil1q45um7eb9wainf.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiawil1q45um7eb9wainf.gif" alt=" "&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Space and Orbit Setting&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;After entering the space and orbit setting stage, the interactive interface built by the HT platform connects with the shuttle’s power and propulsion systems’ core data in real time. It visualizes operating status through 2D charts and clearly displays key parameters such as whether the launcher has reached the target altitude and the target speed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frevurh9svxl3n5pu6bhp.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frevurh9svxl3n5pu6bhp.gif" alt=" "&gt;&lt;/a&gt;&lt;br&gt;
Once the rocket reaches the predefined orbital speed, it delivers the spacecraft into the intended orbit. During orbit insertion, the spacecraft’s control system performs precise orbital adjustments and attitude control, ensuring the spacecraft enters the target orbit accurately and maintains proper alignment with it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Demonstration of Orbital Operation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The system reproduces the orbital movement of the spacecraft in the form of 2D animation, clearly displaying the spatial positioning of the Carmen Line, the positional relationship and functional characteristics of the Low Earth Orbit (LEO) and Geostationary Earth Orbit (GEO) regions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3to5ariaep6efqz4igao.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3to5ariaep6efqz4igao.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Spaceflight Tips&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;A spacecraft enters outer space when it crosses the Kármán Line (the boundary between the atmosphere and space at an altitude of 100km). In the Low Earth Orbit (LEO) region, the spacecraft maintains a stable orbit by achieving dynamic equilibrium with Earth’s gravity. This happens when it reaches a sufficiently high horizontal velocity that creates a centrifugal effect. Here, spacecraft perform Earth observation, communication relay, and space science experiments. Meanwhile, higher orbits such as the Geosynchronous Earth Orbit (GEO) serve different functions including global communications and weather monitoring.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The Shuttle Liftoff 2D animation platform combines rendering, physical simulation, and interactive design technologies to vividly illustrate the complete space flight process. It serves as both a cutting-edge medium for sharing spaceflight knowledge and an innovative tool for science education and academic research. Through its immersive interactive experience, the platform ignites public enthusiasm for space exploration, facilitates widespread dissemination of space knowledge, and provides fresh momentum for the intelligent development of the space industry.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Hightopo will continue to advance in aerospace digitization, leveraging its proprietary graphics engine while integrating cutting-edge technologies like satellite navigation and 5G communication to help aerospace enterprises build an integrated space-air-ground intelligent monitoring system. Simultaneously, we are actively supporting green space initiatives by optimizing resource allocation through digital solutions, reducing lifecycle costs, and providing momentum to drive the global space industry toward high-quality development that is “low-cost, highly reliable, and sustainable.”&lt;/p&gt;

</description>
      <category>data</category>
      <category>monitoring</category>
      <category>softwareengineering</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Create Innovative Effects with Pipelines in 3D Development</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Wed, 17 Sep 2025 13:31:39 +0000</pubDate>
      <link>https://forem.com/hightopo/create-innovative-effects-with-pipelines-in-3d-development-3ic8</link>
      <guid>https://forem.com/hightopo/create-innovative-effects-with-pipelines-in-3d-development-3ic8</guid>
      <description>&lt;p&gt;In 3D scenes, pipelines are an extremely common and important element. They can be used to present transport systems in industrial environments such as factories, power plants, and underground facilities, as well as to simulate the flow or processing of data.&lt;/p&gt;

&lt;p&gt;In &lt;strong&gt;&lt;a href="https://hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;HT for Web&lt;/a&gt;&lt;/strong&gt; (abbreviated as &lt;strong&gt;HT&lt;/strong&gt;), &lt;strong&gt;&lt;em&gt;ht.Polyline&lt;/em&gt;&lt;/strong&gt; is a powerful Class that can be used to represent pipelines in 3D scenes. In addition to supporting textures, it also supports displaying the direction of data flow by adjusting texture properties such as UV offset. Furthermore, during usage, we found that &lt;strong&gt;&lt;em&gt;ht.Polyline&lt;/em&gt;&lt;/strong&gt; is not limited to simple pipeline representation; it can also be used to implement functions such as flow and roaming.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pipeline flow
&lt;/h2&gt;

&lt;p&gt;Pipeline flow animation is achieved by adjusting the UV offset property of the texture during the animation process. Therefore, this form of animation is also known as UV offset animation. By continuously updating the UV offset property, the texture creates a flowing effect on the node surface.&lt;/p&gt;

&lt;p&gt;The property that controls texture offset in pipelines is &lt;strong&gt;&lt;em&gt;shape3d.uv.offset&lt;/em&gt;&lt;/strong&gt;. By continuously increasing/decreasing this property value in the code, a flowing effect can be achieved.&lt;/p&gt;

&lt;p&gt;The specific code is as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;easing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;action&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;polyline&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;shape3d.uv.offset&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;finishFunc&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startAnim&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startAnim&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The final effect of the pipe flow animation is as follows:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7hsckapaoh4tbwnhvnha.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7hsckapaoh4tbwnhvnha.gif" alt=" " width="640" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The UV offset animation of pipelines is commonly used to represent the direction of material flow. The image below is a typical example, which expressively presents the flowing effect.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5s6cuhnri0datpmy8ic4.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5s6cuhnri0datpmy8ic4.gif" alt=" " width="640" height="371"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Fish Passage Effect&lt;/strong&gt;&lt;br&gt;
In addition to ordinary pipeline flow animations, developers can also use this to unleash their creativity and achieve more innovative visual effects.&lt;/p&gt;

&lt;p&gt;For example, using pipeline flow to simulate a fish passage effect. By drawing multiple swimming paths for fish, applying fish textures on the pipeline, and then displaying realistic scenes of fish swimming in water through animation. This method is not only vivid and expressive, but also adds dynamic interest to the visual presentation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnmpl37ogxl0f6hdlgg4f.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnmpl37ogxl0f6hdlgg4f.gif" alt=" " width="640" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;UV Clipping&lt;/strong&gt;&lt;br&gt;
Besides the flow animation effect, we can also combine the pipe with the cropping property to create richer and diverse visual effects. For example, pipe growth animation, pipe display transition effect.&lt;/p&gt;

&lt;p&gt;Pipe cropping includes two main properties:&lt;/p&gt;

&lt;p&gt;■ Clipping direction: &lt;em&gt;3d.clip.direction&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;■ Clipping ratio: &lt;em&gt;3d.clip.percentage&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Clipping can be categorized into normal clipping and special clipping in terms of the clipping direction attribute.&lt;/p&gt;

&lt;p&gt;For normal clipping, the pipe can be clipped from &lt;strong&gt;six directions&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;■Clipping from &lt;strong&gt;right to left&lt;/strong&gt;: Set the property value to &lt;em&gt;left&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;■Clipping from &lt;strong&gt;left to right&lt;/strong&gt;: Set the property value to &lt;em&gt;right&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;■Clipping from &lt;strong&gt;top to bottom&lt;/strong&gt;: set the property value to &lt;em&gt;top&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;■Clipping from &lt;strong&gt;bottom to top&lt;/strong&gt;: sets the property value to &lt;em&gt;bottom&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;■Clipping from &lt;strong&gt;front to back&lt;/strong&gt;: sets the property value to &lt;em&gt;back&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;■Clipping from &lt;strong&gt;back to front&lt;/strong&gt;: sets the property value to &lt;em&gt;front&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;In addition to the six regular crop directions mentioned above, HT also provides the &lt;strong&gt;&lt;em&gt;uv.right&lt;/em&gt;&lt;/strong&gt; or &lt;strong&gt;&lt;em&gt;uv.left&lt;/em&gt;&lt;/strong&gt; crop direction in order to crop the pipe along the UV direction. To use these two cropping directions, the scene needs to enable UV cropping: &lt;strong&gt;&lt;em&gt;g3d.setUvClipEnabled(true)&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The implementation code is as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setUvClipEnabled&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;polyline&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;3d.clip.direction&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uv.right&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startAnim&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;easing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;action&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;polyline&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;3d.clip.percentage&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;finishFunc&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsveubglntlxhg72iwhgg.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsveubglntlxhg72iwhgg.gif" alt=" " width="640" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fet6cu28mghrhcvj455oh.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fet6cu28mghrhcvj455oh.gif" alt=" " width="640" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Pipeline roaming
&lt;/h2&gt;

&lt;p&gt;HT provides APIs to get the length of the pipe, &lt;strong&gt;&lt;em&gt;g3d.getLineLength()&lt;/em&gt;&lt;/strong&gt;, and the position of the pipe according to the percentage, &lt;strong&gt;&lt;em&gt;g3d.getLineOffset()&lt;/em&gt;&lt;/strong&gt;. With these two APIs, we can realize roaming animation and other effects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Scene roaming&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In HT, developers can control the viewpoint by using the eye and center properties. So roaming is achieved by constantly adjusting the eye and center. Thus, we can use the API mentioned above to make the scene’s viewpoint change along the pipeline. That is, the effect of scene roaming.&lt;/p&gt;

&lt;p&gt;Specific realization of the code can be referred to as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getLineLength&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;polyline&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;roamConfig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="nx"&gt;e3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;easing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;action&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getLineOffset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;polyline&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
            &lt;span class="nx"&gt;point&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;point&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;px&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;point&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;py&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;point&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;pz&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;point&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;tangent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tangent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;tx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;tangent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;ty&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;tangent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;tz&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;tangent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setEye&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;px&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;py&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;pz&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
        &lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setCenter&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;px&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;tx&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;py&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;ty&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;pz&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;tz&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;finishFunc&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nx"&gt;roamAnim&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startAnim&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;roamConfig&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxq5s48x8w6bh0s668k8t.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxq5s48x8w6bh0s668k8t.gif" alt=" " width="640" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Model roaming animation&lt;/strong&gt;&lt;br&gt;
Through the above example, we know that we can use &lt;strong&gt;&lt;em&gt;g3d.getLineOffset()&lt;/em&gt;&lt;/strong&gt; to get the position of a specified percentage on the pipe. If this function is used to change the coordinates of the model, then an animation effect can be realized where the model is displaced along the preset pipe path. This is also known as the model roaming effect.&lt;/p&gt;

&lt;p&gt;The implementation code is as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;params&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;60000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;easing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;action&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;lineLength&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getLineLength&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;polyline&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getLineOffset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;polyline&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;lineLength&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
            &lt;span class="nx"&gt;point&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;point&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;px&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;point&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;py&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;point&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;pz&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;point&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;tangent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tangent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;tx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;tangent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;ty&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;tangent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nx"&gt;tz&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;tangent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;plane&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;p3&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;px&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;py&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;pz&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;plane&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;lookAt&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;px&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;tx&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;py&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;ty&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;pz&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;tz&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;front&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;finishFunc&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nx"&gt;animation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startAnim&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F87tpkv8i01fdpkl61g4q.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F87tpkv8i01fdpkl61g4q.gif" alt=" " width="640" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;As an important Class in &lt;strong&gt;HT for Web&lt;/strong&gt;, &lt;em&gt;ht.Polyline&lt;/em&gt; is not only used for the static display of the model, but also plays a key role in the dynamic representation. In the industrial field, it is widely used to display complex pipeline control and transportation systems; at the same time, developers can also give full play to their creativity to realize rich and diverse animation effects with the help of pipelines.&lt;/p&gt;

&lt;p&gt;If you have more ideas on the use of pipelines or creative realization, or have encountered related problems, please feel free to contact us, and we look forward to working with you to explore more possibilities of pipelines in 3D scenes~!&lt;/p&gt;

&lt;h2&gt;
  
  
  Appendix
&lt;/h2&gt;

&lt;p&gt;“HT for Web” allows you to create and showcase high-performance interactive 3D visualization solutions in web browsers. It enables users to create, edit, render, and export 3D models. It is suitable for various industrial internet fields. HT utilizes web technologies such as HTML5, WebGL, and JavaScript, eliminating the need for installing any plugins or additional software, and can run on various web browsers. It also provides a rich set of features and tools, including model loading, material editing, animation creation, lighting rendering, collision detection, and more, to meet the requirements of complex 3D visualization applications.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6fj5n2m1clnujxchd7g.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6fj5n2m1clnujxchd7g.gif" alt=" " width="760" height="352"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7gyowx0xt34b37wnq88.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7gyowx0xt34b37wnq88.gif" alt=" " width="760" height="350"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhujkqe3f3h2nzw3c04j.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhujkqe3f3h2nzw3c04j.gif" alt=" " width="640" height="295"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxd25wn0p37chc531laik.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxd25wn0p37chc531laik.gif" alt=" " width="640" height="308"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbj4sql3vlud62ygekv24.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbj4sql3vlud62ygekv24.gif" alt=" " width="640" height="338"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcw5pmx0emx0q4t1m6wvr.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcw5pmx0emx0q4t1m6wvr.gif" alt=" " width="640" height="338"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can visit our official website to view more cases:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hightopo.com/demos/index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;YouTube: &lt;a href="https://www.youtube.com/hightopo" rel="noopener noreferrer"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Create 3D Explosion Animations with HT for Web</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Fri, 05 Sep 2025 09:11:56 +0000</pubDate>
      <link>https://forem.com/hightopo/create-3d-explosion-animations-with-ht-for-web-2c0h</link>
      <guid>https://forem.com/hightopo/create-3d-explosion-animations-with-ht-for-web-2c0h</guid>
      <description>&lt;p&gt;In 3D environments, model part explosion effects serve as a common and practical visual technique widely used in product design presentations, mechanical motion simulation, and architectural visualization, among other fields.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/iSK9nX4Ngx8"&gt;
  &lt;/iframe&gt;
&lt;br&gt;
&lt;a href="https://hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;Hightopo Software (HT)&lt;/a&gt; uses its 3D visualization engine “HT for Web” to present product model components in a dynamic, separated manner through explosion effects. While clearly displaying internal structures, it emphasizes the functions and interrelationships between components. This feature is helpful for demonstrating complex equipment operating principles, production installation processes, and maintenance and repair operations.&lt;/p&gt;
&lt;h2&gt;
  
  
  Implementation Steps
&lt;/h2&gt;

&lt;p&gt;Let’s use a simple example to explain how the model part explosion effect is implemented.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Model Assembly&lt;/strong&gt;&lt;br&gt;
In the 3D modeling software (e.g., 3ds Max, Maya), the 3D model needs to be separated into parts or components. Each part must be set as an independent object so that its position and rotation can be controlled individually in subsequent steps. Since these parts will eventually be assembled in the scene, you only need to ensure that the relative positions of the parts are correctly assembled in the modeling software.&lt;/p&gt;

&lt;p&gt;Below, we’ll use a robotic arm 3D model as an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="cm"&gt;/**
 * @param shape3d: Model Name
 * @param obj: OBJ asset path
 * @param mtl: MLT asset path
 * @param prefix: Mapping Prefix Path
 * @param block: ht.Block，Putting model nodes into Block for easy management
*/&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;assemblyModel&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape3d&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;prefix&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;block&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;loadObj&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;prefix&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;prefix&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;cube&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;center&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;shape3d&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;shape3d&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;finishFunc&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;modelMap&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;rawS3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;modelMap&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
          &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;shape3d&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;shape3d&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
        &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s3&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;rawS3&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setAnchor3d&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
        &lt;span class="c1"&gt;// Model position is set to the position in the modeling software&lt;/span&gt;
        &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;p3&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;center&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;block&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="nx"&gt;dm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;armModels&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;sump&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:{&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;sump&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;sump&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;prefix&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;base&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:{&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;base&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;base&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;prefix&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;arm1&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:{&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;arm1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;arm1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;prefix&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;assets&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;......&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// init g3d&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;g3d&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;graph3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Graph3dView&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;dm&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;dm&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addToDOM&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;robotArms&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Block&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;dm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;robotArms&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;armModels&lt;/span&gt; &lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;arm&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;armModels&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
  &lt;span class="nf"&gt;assemblyModel&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;key&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;arm&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="nx"&gt;arm&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;mtl&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="nx"&gt;arm&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;prefix&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="nx"&gt;robotArms&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxx2cuiqqw198ckfw2jsk.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxx2cuiqqw198ckfw2jsk.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Record Positions&lt;/strong&gt;&lt;br&gt;
When designing the separation paths and final positions for each part, several factors need to be considered, such as whether the explosion effect is easy to understand, whether there is sufficient separation space between parts, and the overall aesthetic appeal of the final display.&lt;/p&gt;

&lt;p&gt;First, create two objects to record both the assembled model positions and the positions after the explosion. Then, set the scene to editable mode (&lt;em&gt;g3d.setEditable(true)&lt;/em&gt;), adjust the parts’ positions through mouse dragging, and record the positions after the explosion.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getNodePosition&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="nx"&gt;robotArms&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;eachChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;shape3d&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;p3&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwqoxaz411czp0j27kmyi.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwqoxaz411czp0j27kmyi.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Path Design&lt;/strong&gt;&lt;br&gt;
Then let’s determine the explosion path of each component. The path design can be flexibly adjusted according to actual requirements. For example, the components can fly apart along irregular paths or move orderly in radial or parallel directions.&lt;/p&gt;

&lt;p&gt;Let’s illustrate this with the example of linear diffusion:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;bigBang&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isOpen&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;toPositions&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;defaultPositions&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;finishFunc&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;robotArms&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;eachChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;a&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;fromPosition&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;clone&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;p3&lt;/span&gt;&lt;span class="p"&gt;()),&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;endPosition&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;clone&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isOpen&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;toPositions&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;shape3d&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)]:&lt;/span&gt; &lt;span class="nx"&gt;defaultPositions&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;shape3d&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)]),&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startAnim&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="nx"&gt;e3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;easing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;finishFunc&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;finishFunc&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nf"&gt;finishFunc&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;action&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;t&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;robotArms&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;eachChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;fromPosition&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;a&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;fromPosition&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;endPosition&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;a&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;endPosition&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;p3&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;fromPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;endPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;fromPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;fromPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;endPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;fromPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;fromPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;endPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;fromPosition&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;

      &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="c1"&gt;// Listen to background click event to start animation&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;isOpen&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;_bigBang&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
&lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;mi&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;kind&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;doubleClickBackground&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="nx"&gt;_bigBang&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nf"&gt;pause&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nx"&gt;_bigBang&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;bigBang&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isOpen&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;_bigBang&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="nx"&gt;isOpen&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;isOpen&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7xa366bzo173nvekn8es.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7xa366bzo173nvekn8es.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Virtual Reality (VR) Equipment Disassembly
&lt;/h2&gt;

&lt;p&gt;Traditionally, studying the use and structure of industrial equipment required physical disassembly and reassembly. However, since many mechanical devices are inherently dangerous, this process carries certain risks. Additionally, some equipment is expensive, and repeated disassembly would reduce its service life. This applies to transmission devices such as gear drives, chain drives, and belt drives, as well as pressure machinery like punch presses, shearing machines, bending machines, crushers, rolling mills, printing presses, and molding machines. The emergence of virtual reality (VR) has perfectly solved these challenges.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw3162q6rre9k3msz2zc8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw3162q6rre9k3msz2zc8.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F991sya6c631uhfev7kep.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F991sya6c631uhfev7kep.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Using the “&lt;strong&gt;HT for Web&lt;/strong&gt;” graphics engine, we create 3D models of each component of industrial equipment. After entering the virtual space, VR controllers replace hands, allowing users to grab and position models as needed, enabling detailed examination from any angle — front, back, left, right, top, and bottom. This effectively avoids the incomplete demonstration issues caused by real mechanical equipment being too heavy, expensive, or large.&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/R2qkKKpd3lA"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  3D Manual
&lt;/h2&gt;

&lt;p&gt;In today’s digital age, 3D explosion animations bring a new visual experience to industrial design and product presentation. We have further encapsulated this into a 3D manual plugin.&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/k_R_W2EiMcs"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Through Hightopo’s low-code SCADA platform, users can easily create highly realistic 3D explosion animations, breaking down complex product structures into clear and understandable visual content. This innovative presentation method not only enhances user experience but also greatly improves the efficiency and accuracy of information delivery, helping various industries move toward a smarter and more efficient future while unlocking unlimited possibilities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Application Scenarios
&lt;/h2&gt;

&lt;p&gt;Using explosion animation effects, we can disassemble and reassemble complex equipment components in a 3D way, providing efficient and intuitive visualization solutions for industrial manufacturing, aerospace, smart military industry, and power energy sectors, offering strong support for digital transformation across various industries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Industrial Manufacturing Field&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the industrial manufacturing field, explosion animations and 3D disassembly, with their unique visualization advantages, have deeply penetrated multiple key stages including product design, production manufacturing, and maintenance, promoting improvements in industrial production efficiency and quality, becoming an indispensable technical means.&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/2Pv_fyRKgBY"&gt;
  &lt;/iframe&gt;
&lt;br&gt;
Taking engines as an example, their structure is extremely complex, containing numerous precision and interconnected components. During the design phase, engineers can clearly observe the position and assembly relationships of each part within the whole through 3D disassembly animations. During the manufacturing process, engineers can quickly understand the parts assembly sequence based on 3D explosion animations, thereby improving assembly efficiency and accuracy while reducing defects caused by assembly errors.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6me4w118164h67lywcbj.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6me4w118164h67lywcbj.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Aerospace Field&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Aircraft engines are considered the core components of the aerospace field, where safety and reliability are crucial. Through HT’s high-precision 3D models and animations, engineers can simulate engine operating conditions in a virtual environment and detect potential problems in advance. This not only improves the efficiency of aircraft engine design and maintenance but also enables remote monitoring and real-time data analysis.&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/MnPspmcfhn4"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Military Industry Field&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the military industry field, 3D disassembly and explosion animation technology can also be applied to the demonstration and training of weapons and equipment such as handguns. Through creating 3D models of handguns, their internal structures and component disassembly processes can be clearly displayed. This not only improves the maintenance efficiency of weapons and equipment but also provides intuitive teaching materials for military personnel training.&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/9Mlx2rb5t8c"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Power and Energy Sector&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the power and energy sector, 3D disassembly and explosion animation technology has become a key tool for showcasing the internal structure and operational status of electrical equipment. Using “HT for Web”, precise modeling of power equipment such as wind turbines and power stations is possible. Taking wind turbines as an example, animations can demonstrate the disassembly process of core components such as blades, gearboxes, and generators clearly.&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/6HAAEfMeBGg"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Similarly, animations can visually demonstrate other complex unit structures and electrical connections, such as power stations and energy storage systems. These animations not only help engineers deeply understand equipment operating principles but also, when combined with digital twin technology, enable remote monitoring and real-time data analysis, thereby improving the operational efficiency and management level of power equipment while providing strong support for digital transformation in the power and energy sector.&lt;/p&gt;

&lt;h2&gt;
  
  
  Advantages
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Enhanced Visual Presentation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Breaking down barriers in understanding complex structures through intuitive and dynamic forms, clearly displaying hidden details and assembly relationships of equipment or products, allowing easy access to key information without requiring professional knowledge.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Improved Comprehension Efficiency&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Compared to traditional text and image explanations, these animations significantly reduce the time needed to understand complex objects. In educational settings, students can quickly grasp the working principles of mechanical equipment and electronic products; in training scenarios, employees can rapidly familiarize themselves with new equipment structures, accelerating knowledge absorption and skill development.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Facilitates Solution Assessment and Optimization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Designers can use animations to simulate product or equipment conditions under different design schemes, identify potential issues early, and optimize design parameters. For example, in aircraft engine design, animations can simulate how changes in airflow channels affect performance, helping research and development teams refine their designs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Promotes Knowledge Dissemination and Retention&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The engaging and interactive nature of animations makes complex knowledge easier to spread, whether sharing internal training materials within companies or broadly promoting scientific knowledge. It captures audience attention and provides better retention than traditional explanations, leaving a lasting impression on viewers’ minds.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Streamlines Work Processes&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In manufacturing, workers can precisely assemble components in sequence using disassembly and explosion animations, reducing operational errors and improving production efficiency and product quality. During equipment maintenance, technical staff can quickly locate faulty components using animations, develop efficient repair plans, reduce downtime, and lower costs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Hightopo’s explosion effects and 3D disassembly have achieved remarkable results in various aspects including industrial design and safety demonstrations. HT will further explore data value to achieve more refined animation effects and smarter interactive experiences, contributing to the digital transformation of various industries.&lt;/p&gt;

&lt;h2&gt;
  
  
  Appendix
&lt;/h2&gt;

&lt;p&gt;“HT for Web” allows you to create and showcase high-performance interactive 3D visualization solutions in web browsers. It enables users to create, edit, render, and export 3D models. It is suitable for various industrial internet fields. HT utilizes web technologies such as HTML5, WebGL, and JavaScript, eliminating the need for installing any plugins or additional software, and can run on various web browsers. It also provides a rich set of features and tools, including model loading, material editing, animation creation, lighting rendering, collision detection, and more, to meet the requirements of complex 3D visualization applications.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6fj5n2m1clnujxchd7g.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6fj5n2m1clnujxchd7g.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7gyowx0xt34b37wnq88.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7gyowx0xt34b37wnq88.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhujkqe3f3h2nzw3c04j.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhujkqe3f3h2nzw3c04j.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxd25wn0p37chc531laik.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxd25wn0p37chc531laik.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbj4sql3vlud62ygekv24.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbj4sql3vlud62ygekv24.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcw5pmx0emx0q4t1m6wvr.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcw5pmx0emx0q4t1m6wvr.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can visit our official website to view more cases:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hightopo.com/demos/index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;YouTube: &lt;a href="https://www.youtube.com/hightopo" rel="noopener noreferrer"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Intelligent Application of Industrial Production Line Kanban</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Thu, 14 Aug 2025 07:14:07 +0000</pubDate>
      <link>https://forem.com/hightopo/intelligent-application-of-industrial-production-line-kanban-40g</link>
      <guid>https://forem.com/hightopo/intelligent-application-of-industrial-production-line-kanban-40g</guid>
      <description>&lt;h2&gt;
  
  
  Innovation Changes Life
&lt;/h2&gt;

&lt;p&gt;Before the emergence of the digital era, many manufacturing companies mainly relied on conventional production management methods. The gathering and analysis of production data were largely dependent on manual efforts, resulting in data collection errors, delayed information transmission, lack of transparency in the production process, and suboptimal production efficiency. In traditional production environments, real-time monitoring and transparency were lacking in various stages of the production process, which made it challenging for companies to promptly address production issues, enhance efficiency, and adapt to changing market demands. The transmission of information from the production site to the management level suffered from delays and distortion, posing difficulties for managers to accurately comprehend the production status and make timely decisions.&lt;/p&gt;

&lt;p&gt;With the rapid advancement of information technology (IT) and the widespread use of IoT and sensing technology, entrepreneurs are increasingly recognizing the importance of leveraging digital technology to achieve comprehensive visualization and real-time monitoring of the production process. This is crucial for enhancing efficiency and reducing costs. By utilizing sensors to collect production data in real-time, the on-site production equipment can seamlessly integrate with the information system, enabling enterprises to adopt faster and real-time production management approaches. Simultaneously, the mature application of data analysis and artificial intelligence (AI) technology allows companies to delve deeper into production data, enabling predictive maintenance, optimizing production processes, and supporting decision-making for managers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Product
&lt;/h2&gt;

&lt;p&gt;In today’s fiercely competitive manufacturing environment, industrial line Kanban boards are proving to be essential in driving the transformation of enterprise production management. This is primarily due to their exceptional real-time monitoring and data visualization capabilities. This article presents a case study highlighting the innovative accomplishments of an industrial line Kanban board in enhancing production efficiency, optimizing resource utilization, and achieving digital transformation.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/Smh6jEI0Y8A"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;Hightopo software&lt;/a&gt; relies on the self-developed “&lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;HT for Web (HT)&lt;/a&gt;” product to create an intelligent management system for industrial production lines. By providing real-time monitoring, data visualization, and in-depth analysis, it creates an excellent production management environment for enterprises. Its role is not only to provide real-time information on production status, enabling management to quickly respond to changes and make precise decisions, but also to optimize production processes and reduce equipment failure rates through data mining, thereby improving production efficiency and product quality. The introduction of industrial Kanban promotes lean production processes, providing enterprises with a more efficient, transparent, and sustainable manufacturing experience, and opening up new chapters for digital transformation.&lt;/p&gt;

&lt;p&gt;Industrial production data is complex and diverse. In order to enable managers to understand the operation status of production lines in an intuitive manner, Hightopo software utilizes the “HT for Web” 2/3D visualization engine and the HT-UI library. It applies a rich set of chart components to present system management data of industrial production lines in clear and concise ways, including tables, trees, scatter plots, and word clouds in various dynamic chart formats.&lt;/p&gt;

&lt;h2&gt;
  
  
  Dashboard
&lt;/h2&gt;

&lt;p&gt;The Dashboard page provides a comprehensive overview of the entire production line. With this page, management can easily understand the current status of the production line, including equipment statistics, equipment operational status, and key performance indicators for production analysis.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0magueh0jtwnhvp8jecp.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0magueh0jtwnhvp8jecp.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Through visual display, the Dashboard page allows managers to quickly assess the health of the production line, identify potential issues in a timely manner, and make effective decisions. This overview page provides a starting point for management to gain in-depth understanding of the line’s details, track production progress, and guide subsequent production management activities, thereby achieving optimization and continuous improvement in the production process.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0v77i5n8nk5ax2vebbi0.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0v77i5n8nk5ax2vebbi0.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzk8i2e75rnqq0qqwjb59.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzk8i2e75rnqq0qqwjb59.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Order Information
&lt;/h2&gt;

&lt;p&gt;The Order Information page is an important section in the Kanban, dedicated to providing a comprehensive overview of order execution status.&lt;/p&gt;

&lt;p&gt;Using the rich chart components provided by HT-UI, the order page is created to enable management to easily track key information such as the production status, delivery progress, and actual output of orders. This allows businesses to achieve real-time monitoring of the order fulfillment process, promptly identify potential issues, and make quick decisions to ensure timely delivery of orders.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F96egqy2t5we2asm9wabc.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F96egqy2t5we2asm9wabc.gif" alt=" "&gt;&lt;/a&gt;&lt;br&gt;
Visualization of the order information page enables managers to quickly understand the fulfillment status of orders, providing strong support for developing more effective production plans and resource allocation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn1d2a422yaxx0zm73mvz.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn1d2a422yaxx0zm73mvz.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx415ouelgkvu8nqmu4yw.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx415ouelgkvu8nqmu4yw.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Equipment Management
&lt;/h2&gt;

&lt;p&gt;The device management page is like the central nervous system of a production line, providing not only detailed insights into the device’s status, but also presenting the lifecycle data of the devices in an innovative and visual way.&lt;/p&gt;

&lt;p&gt;Through the HT UI, the management can communicate with each device and gain in-depth knowledge of its operational status, performance, alarm records, and other key information. This enables the quick identification of potential issues with the devices, facilitating predictive maintenance and minimizing equipment failures and downtime.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F593xvcxvkjczcupdlexs.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F593xvcxvkjczcupdlexs.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo’s unique visualization design transforms device information from a simple collection of numbers to 3D models, providing intuitive decision support for management. It not only enables comprehensive monitoring of devices but also represents an innovative attempt in digital transformation, bringing data to life and unlocking new possibilities for equipment optimization and smart manufacturing in enterprises.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl4w7knvh4fg0nh7p96af.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl4w7knvh4fg0nh7p96af.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjvf3gu1sqpd6najvdjpb.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjvf3gu1sqpd6najvdjpb.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz1wjeh4p2wwdo2kn72gl.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz1wjeh4p2wwdo2kn72gl.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcki519jy45sbqqwr1h46.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcki519jy45sbqqwr1h46.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzhyvtndxea8k57tzm3rt.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzhyvtndxea8k57tzm3rt.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffhuftmkdrebze9pisrw2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffhuftmkdrebze9pisrw2.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjn2z88k4k7shi608v4cj.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjn2z88k4k7shi608v4cj.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv23avs5eh1wxeij0u0k7.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv23avs5eh1wxeij0u0k7.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;“HT for Web” products can support component graph elements with a scale of over 100k, meeting the equipment and data scene requirements of various industrial industries.&lt;/p&gt;

&lt;h2&gt;
  
  
  Theme
&lt;/h2&gt;

&lt;p&gt;The day and night switching function is not only a beautiful design, but also to provide users with the best visual experience under different lighting conditions.&lt;/p&gt;

&lt;p&gt;During the daytime, a bright page can enhance the clarity and readability of information, making it easier for users to browse and understand data. On the other hand, switching to a dark-themed interface at night helps reduce screen glare and eye strain, providing users with a more comfortable environment and reducing the risk of visual fatigue that may result from prolonged screen use.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flwny7r5wwbau7h92ljmr.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flwny7r5wwbau7h92ljmr.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Product Advantages
&lt;/h2&gt;

&lt;p&gt;The value brought by the implementation of HT Industrial Kanban Boards for enterprises:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Facilitates management decision-making&lt;br&gt;
By providing real-time monitoring and data visualization, Industrial Line Kanban Boards offer comprehensive transparency into the production process. This enables management to instantly understand production status, key indicators, and potential issues, thereby facilitating quick decision-making and flexible adjustment of production plans.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Improves industrial efficiency&lt;br&gt;
Industrial Line Boards, through in-depth data analysis, help enterprises optimize production processes, improve efficiency, reduce production costs, and achieve precise resource allocation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reduces equipment risks&lt;br&gt;
By implementing predictive maintenance and equipment condition monitoring, Industrial Line Kanban Boards minimize the risk of equipment failures and maximize equipment availability and lifespan.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall, implementing Industrial Line Kanban Boards not only promotes the digital transformation of production management, improving production efficiency and product quality, but also offers significant support for enterprises to remain competitive and achieve sustainable development in a highly competitive market.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;The comprehensive benefits of Hightopo’s industrial production Kanban boards are reflected in its ability to bring manufacturing into the forefront of the digital age. Through real-time monitoring, data visualization, and intelligent analysis, it provides enterprises with a highly transparent production management platform, achieving instant transparency and efficient management of the production process. This innovative tool not only achieves significant achievements in improving production efficiency and reducing costs, but also integrates digital innovation into the core of manufacturing, painting a remarkable picture for the future of smart manufacturing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Appendix
&lt;/h2&gt;

&lt;p&gt;“HT for Web” allows you to create and showcase high-performance interactive 3D visualization solutions in web browsers. It enables users to create, edit, render, and export 3D models. It is suitable for various industrial internet fields. HT utilizes web technologies such as HTML5, WebGL, and JavaScript, eliminating the need for installing any plugins or additional software, and can run on various web browsers. It also provides a rich set of features and tools, including model loading, material editing, animation creation, lighting rendering, collision detection, and more, to meet the requirements of complex 3D visualization applications.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6fj5n2m1clnujxchd7g.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6fj5n2m1clnujxchd7g.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7gyowx0xt34b37wnq88.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7gyowx0xt34b37wnq88.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhujkqe3f3h2nzw3c04j.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhujkqe3f3h2nzw3c04j.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxd25wn0p37chc531laik.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxd25wn0p37chc531laik.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbj4sql3vlud62ygekv24.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbj4sql3vlud62ygekv24.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcw5pmx0emx0q4t1m6wvr.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcw5pmx0emx0q4t1m6wvr.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can visit our official website to view more cases:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hightopo.com/demos/index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;YouTube: &lt;a href="https://www.youtube.com/hightopo" rel="noopener noreferrer"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>kanban</category>
      <category>programming</category>
      <category>learning</category>
    </item>
    <item>
      <title>How to Use 3D Modeling and Drones with RFID for Smart Warehouse Stocktaking?</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Wed, 04 Jun 2025 04:20:38 +0000</pubDate>
      <link>https://forem.com/hightopo/how-to-use-3d-modeling-and-drones-with-rfid-for-smart-warehouse-stocktaking-3a31</link>
      <guid>https://forem.com/hightopo/how-to-use-3d-modeling-and-drones-with-rfid-for-smart-warehouse-stocktaking-3a31</guid>
      <description>&lt;p&gt;As logistics undergoes digital transformation, smart warehousing is evolving from passive management to proactive intelligent operations. Drone warehouse inventory technology — a key innovation in low-altitude operations — enables real-time material tracking through autonomous positioning, smart flight planning, and automated counting. This technology surpasses traditional manual inventory’s limitations in both efficiency and safety, delivering precise automated inventory management while reducing operational costs. It represents an innovative breakthrough in modern supply chain management.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Product
&lt;/h2&gt;

&lt;p&gt;Using “&lt;a href="https://hightopo.com/demos/index.html" rel="noopener noreferrer"&gt;HT for Web&lt;/a&gt;” — Hightopo Software’s graphics engine — we created a smart warehouse RFID drone inventory solution. The system forms a complete intelligent management loop by monitoring all aspects of warehouse operations: material storage, asset tracking, inventory processes, and equipment operation. This solution significantly reduces labor costs and human errors while improving warehouse management efficiency. It breaks through industry development constraints and provides robust support for enterprise digital transformation.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/4kLt5byZ2mg"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Drone Inventory Management
&lt;/h2&gt;

&lt;p&gt;Traditional warehouse inventory relies on manual PDA devices for scanning or visual counting. This method is time-consuming, labor-intensive, and prone to human errors that affect accuracy. In contrast, inventory drones can autonomously plan their paths and swiftly complete inventory tasks for high-rack shelves and large areas. This automation improves efficiency by 5–10 times while enabling round-the-clock operation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;RFID Inventory Tasks&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Hightopo’s smart warehouse drone inventory system seamlessly integrates RFID technology with drone systems. Using autonomous navigation drones equipped with RFID readers, the system achieves comprehensive coverage through aerial scanning while performing tasks without disrupting ground operations. This approach overcomes the efficiency bottlenecks and safety constraints of manual inventory, enabling swift automatic scanning and updating of warehouse inventory data.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4h4w94llsg9fee3kyfg2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4h4w94llsg9fee3kyfg2.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Real-time 2D visualization dashboards support management decision-making. Through multi-dimensional data filtering and analysis, managers can monitor and control inventory tasks with precision — from standardized task naming and area division to real-time quantity tracking and dynamic status updates.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Drone Inventory Operation Process&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When users click the “Start Inventory” button, the intelligent drone takes off automatically along preset routes and scans all RFID tags in the designated area with precision. This process reduces traditional manual inventory time from hours to minutes while enhancing data collection accuracy through intelligent recognition technology — significantly streamlining the entire operation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqx9crby8p8okmbqfsy42.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqx9crby8p8okmbqfsy42.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Management personnel can monitor inventory distribution and item status in real-time without frequent warehouse visits, achieving full traceability and intelligent scheduling of warehouse operations. This creates a truly intelligent and automated modern warehouse management system.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Inventory Data Collection and Analysis&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The drone automatic inventory system delivers real-time data collection and precise recording through advanced RFID technology. Inventory reports contain essential information — including task names and execution times — alongside key details such as RFID tag IDs, item names, planned spaces, actual quantities, current storage locations, and storage times. The system intelligently flags overdue items, enabling staff to quickly perform and maintain inventory counts while efficiently managing large volumes of data.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv0do1jv6hcq744flf7a8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv0do1jv6hcq744flf7a8.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Drone Status Monitoring
&lt;/h2&gt;

&lt;p&gt;This function combines multiple sensors and data collection technologies to monitor drone operations in real time, ensuring safe and reliable task execution. The system monitors these key indicators:&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Current Status Information&lt;/strong&gt;: Live display of the drone’s working status, position, and key parameters including flight height, speed, and orientation.&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Task Progress Tracking&lt;/strong&gt;: Real-time monitoring of inventory completion progress with percentage display to help managers oversee task advancement.&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;RFID Read Data Quantity&lt;/strong&gt;: Tracking of total RFID readings to verify complete inventory coverage.&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Number of RFID Tags Read&lt;/strong&gt;: Live count of successfully identified RFID tags to ensure accurate and transparent data collection.&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Battery Status Monitoring&lt;/strong&gt;: Continuous battery level tracking with automatic alerts when power drops below set thresholds, ensuring timely battery changes during operations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiz7pztbqop7pw4oqepc5.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiz7pztbqop7pw4oqepc5.webp" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Equipment Inspection and Alerts&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The HT monitoring system features customizable drone inspection routes and schedules, allowing drones to complete inspection tasks autonomously along preset paths. During inventory checks, drones automatically identify the location, quantity, and status of shelf items while monitoring storage conditions and detecting anomalies. When the system discovers inventory discrepancies, it immediately triggers alerts and generates detailed reports — complete with locations, quantities, and supporting images — enabling warehouse managers to quickly pinpoint and address issues.&lt;/p&gt;

&lt;h2&gt;
  
  
  Warehouse Material Visual Management and Control
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Material Information Display&lt;/strong&gt;&lt;br&gt;
Using Hightopo’s comprehensive chart components, the system clearly displays inventory status and transfer records for various materials. The multi-dimensional classification system organizes items across categories including fast-moving consumer goods, medical equipment, and logistics services. Real-time data analysis provides enterprises with precise inventory information, supporting informed management decisions and enhancing overall warehouse efficiency.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm8u6w3weft1ica8k8n5l.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm8u6w3weft1ica8k8n5l.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Inventory Dynamic Tracking&lt;/strong&gt;&lt;br&gt;
The system enables dynamic inventory tracking for real-time updates and management. It precisely monitors material movement across different areas, giving users instant access to information about quantity changes, category distributions, and current material locations. This comprehensive tracking helps prevent losses from excess inventory.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F27u8lqsu89c8c8v2rq1j.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F27u8lqsu89c8c8v2rq1j.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Intelligent Early Warning and Alerts&lt;/strong&gt;&lt;br&gt;
Hightopo seamlessly integrates its RFID management module with the warehouse alert system. The platform sends automated warnings when inventory levels approach preset thresholds, including alerts for low inventory, overdue stock, and RFID device malfunctions. These timely notifications enable management to quickly replenish stock, remove expired goods, and address equipment issues — leading to optimized inventory management and improved operational efficiency.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwmfdsoj4p79hyh64137p.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwmfdsoj4p79hyh64137p.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Material Lifecycle Management
&lt;/h2&gt;

&lt;p&gt;Hightopo’s smart warehouse RFID management system delivers comprehensive lifecycle management — from warehouse registration and storage positioning to requisition and outbound operations. Leveraging RFID real-time positioning technology and intuitive 3D warehouse visualization, the system offers these key functions:&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Inbound Process&lt;/strong&gt;: Automatically captures and records essential material details, specifications, and supplier information while assigning optimal storage locations.&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Storage Process&lt;/strong&gt;: Monitors inventory status in real time, provides intelligent alerts, and generates automated replenishment recommendations.&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Inventory Process&lt;/strong&gt;: Enables rapid RFID-based inventory counts with clear visualization of discrepancies on HT display screens.&lt;/p&gt;

&lt;p&gt;■ &lt;strong&gt;Outbound Process&lt;/strong&gt;: Streamlines operations through intelligent path planning, rapid goods location, and automatic inventory updates.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyu5fdft8lmf63zysuaxw.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyu5fdft8lmf63zysuaxw.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Hightopo 3D visualization interface allows managers to monitor warehouse space utilization and material storage status clearly while performing instant queries, modifications, and deletions of material information.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;As drone technology evolves from military to commercial applications, it has become vital for smart warehouse management. Through precise inventory counting and real-time monitoring, drones have revolutionized both the efficiency and accuracy of inventory management. This innovation showcases the value of low-altitude technology in transforming traditional industries while pioneering new operational approaches for indoor drone applications.&lt;/p&gt;

&lt;p&gt;The Hightopo warehouse drone inventory management system offers a forward-looking solution that combines RFID inventory, drone monitoring, anomaly alerts, and data analysis. Beyond solving immediate management challenges, it provides enterprises with a robust technical foundation for digital transformation and sustainable growth.&lt;/p&gt;

&lt;p&gt;Please visit our official website to view more demos:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hightopo.com/demos/index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;YouTube: &lt;a href="https://www.youtube.com/hightopo" rel="noopener noreferrer"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Connect Objects in 3D Scene with 2D Pages Through HT Line</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Tue, 22 Apr 2025 08:36:36 +0000</pubDate>
      <link>https://forem.com/hightopo/connect-objects-in-3d-scene-with-2d-pages-through-ht-line-aeh</link>
      <guid>https://forem.com/hightopo/connect-objects-in-3d-scene-with-2d-pages-through-ht-line-aeh</guid>
      <description>&lt;p&gt;Original article: &lt;a href="https://medium.com/@hightopo/linking-2d-view-and-3d-scene-with-hightopo-edge-637956e4f48a" rel="noopener noreferrer"&gt;Linking 2D view and 3D scene with Hightopo Edge | by hightopo | Apr, 2025 | Medium&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;HT for Web (HT for short)&lt;/a&gt; is a flexible front-end component library that allows people to develop rich features and effects if they are imaginative enough.&lt;/p&gt;

&lt;p&gt;This article will demonstrate the skill of using connecting lines through code and examples. Let’s explore how to dynamically connect 2D and 3D content.&lt;/p&gt;

&lt;h2&gt;
  
  
  Analysis
&lt;/h2&gt;

&lt;p&gt;How can we create a line that bridges the 2D view and the 3D scene? While this may seem daunting at first, developers familiar with HT for Web will recognize a simple solution: the line functions as an edge between 2D nodes, with its endpoints’ positions being continuously updated.&lt;/p&gt;

&lt;p&gt;So, in principle, the main points to be realized are as follows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Get the coordinates of the two points in 2D and 3D respectively;&lt;/li&gt;
&lt;li&gt;Convert the coordinates in 3D to the 2D view;&lt;/li&gt;
&lt;li&gt;Draw a 2D edge connecting these two coordinates on 2D;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyt0r0x9sl3ixrr3yt643.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyt0r0x9sl3ixrr3yt643.png" alt="Image description" width="674" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu1ijq74sf4ssmk58wzad.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu1ijq74sf4ssmk58wzad.png" alt="Image description" width="670" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If realized in code, the general steps are as follows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;First, let’s create a 2D and 3D view separately, and set some default properties.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Create 3d scene and add it to the DOM&lt;/span&gt;
&lt;span class="nx"&gt;dm3d&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;DataModel&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;g3d&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;graph3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Graph3dView&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dm3d&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addToDOM&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;// Create 2d view and add it to the DOM&lt;/span&gt;
&lt;span class="nx"&gt;dm2d&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;DataModel&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;g2d&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;graph&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;GraphView&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dm2d&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;g2d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addToDOM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getView&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;g2d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setZoomable&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Second, encapsulate the 2D/3D coordinate conversion method, which is the key content of this function.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;setPosotion&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node3d&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;node2d&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Convert the position from 3D scene to 2D screen&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;viewPoint&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toViewPosition&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;p3&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; 
    &lt;span class="c1"&gt;// Convert the position from 2D screento HT g2d    &lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;position&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;g2d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getLogicalPoint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;viewPoint&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="c1"&gt;// Update the node position&lt;/span&gt;
    &lt;span class="nx"&gt;node2d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;p&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Then, create nodes and add them to the corresponding views.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// The node in 3D&lt;/span&gt;
&lt;span class="nx"&gt;node3d&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;dm3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node3d&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// The node in 2D, which will connect with the node in 3D&lt;/span&gt;
&lt;span class="nx"&gt;node1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;node1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;p&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;dm2d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// The node in 2D, which is used to represents the node position in 3D. &lt;/span&gt;
&lt;span class="nx"&gt;node2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nf"&gt;setPosotion&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node3d&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;node2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;node2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;s&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;opacity&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Hide the node&lt;/span&gt;
&lt;span class="nx"&gt;dm2d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Create edge&lt;/span&gt;
&lt;span class="nx"&gt;edge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ht&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Edge&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;edge&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setSource&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;edge&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setTarget&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;dm2d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;edge&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;At last, monitor and synchronize the 3D node’s position to 2D; there are two main ways:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Monitor the eye and center changes event in the 3D scene, for cases where the 3D node position does not change, such as building nodes.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;g3d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;mp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;property&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;eye&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;property&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;center&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nf"&gt;setPosotion&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node3d&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;node2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Refresh every frame, for cases where the scene node position will change, such as moving vehicles.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;func&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setPosotion&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;node3d&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;node2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nf"&gt;requestAnimationFrame&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;func&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;func&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftunup9zr030wt6cidace.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftunup9zr030wt6cidace.gif" alt="Image description" width="800" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The core of the 2D/3D linking is the precise coordinate transformation. By using this method, we are able to significantly improve the visual appearance of the interface, making the 2D information panels more clearly related to the 3D content. This makes the UI more intuitive, greatly enhancing user experience and understanding of information.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdo01yxlnwk4155ydh8zi.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdo01yxlnwk4155ydh8zi.gif" alt="Image description" width="640" height="321"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Demonstration
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;When the user clicks on a 3D model in the scene, a corresponding information panel will be displayed on the 2D view. This panel displays the attributes and data of the selected model in detail. At the same time, a line connects the 2D information panel to the 3D model so that the user knows exactly which model corresponds to which information panel. This makes it easy for the user to quickly find the corresponding model and information, which enhances the user experience.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3hyamg43kufx0l2mgv9o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3hyamg43kufx0l2mgv9o.png" alt="Image description" width="797" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;When the user clicks on a moving vehicle, the system will show a detailed vehicle information panel in the 2D view. In order to ensure that the user can easily associate the information panel with the vehicle even when the vehicle is moving, the 23D linking method is used to generate a visual link to connect the vehicle and the information panel. No matter where the vehicle moves in the scene, this line is updated in real time, always maintaining the consistency between the vehicle and the information panel. In this way, the user can keep track of the vehicle’s information without confusing the source of the information with the vehicle’s movement.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg3tru5b915g2t9k4hdao.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg3tru5b915g2t9k4hdao.png" alt="Image description" width="800" height="397"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This use of connectivity between the 2D view and the 3D scene ensures that information is displayed accurately and optimizes the user experience.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fafggefnj1y5h2esmsj47.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fafggefnj1y5h2esmsj47.gif" alt="Image description" width="640" height="329"&gt;&lt;/a&gt;&lt;br&gt;
To ensure synchronization of data between the 3D node and the 2D information panel, in addition to using lines to connect the two elements, coordinate transformation can also be used to synchronize node positions. We can display the 2D information panel directly at the 3D node’s position through coordinate transformation when clicking the 3D node.&lt;/p&gt;

&lt;p&gt;Another example is for video surveillance. By embedding a video into a 2D panel and using coordinate transformation, when the camera icon is clicked in 3D, the current video content and other relevant data can be displayed at the exact location of the camera.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo8gts0omuzd9rd5xe6uv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo8gts0omuzd9rd5xe6uv.png" alt="Image description" width="796" height="389"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;2D/3D connectivity is an efficient, dexterous, and intuitive approach. By drawing a visual line between a 3D object and its corresponding 2D information panel, it can solve the problem of matching the position of information due to the movement or change of the object. It greatly improves the user experience and accuracy of information delivery, especially in complex and dynamic scenes.&lt;/p&gt;

&lt;p&gt;We will continue to publish more articles on HT implementation to further explore and optimize the application in different scenarios. Stay tuned!&lt;/p&gt;

&lt;p&gt;You can visit our official website to view more cases:&lt;br&gt;
&lt;a href="https://www.hightopo.com/demos/index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo YouTube: &lt;a href="https://www.youtube.com/hightopo" rel="noopener noreferrer"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Medium Blog: &lt;a href="https://hightopo.medium.com/" rel="noopener noreferrer"&gt;https://hightopo.medium.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Using Digital Twins for Better Wastewater Treatment</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Fri, 11 Apr 2025 04:26:43 +0000</pubDate>
      <link>https://forem.com/hightopo/using-digital-twins-for-better-wastewater-treatment-2ima</link>
      <guid>https://forem.com/hightopo/using-digital-twins-for-better-wastewater-treatment-2ima</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fawew5hano31a54m1cqza.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fawew5hano31a54m1cqza.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Smart water management has become an important direction for water resource management and urban water system management in recent years.&lt;/p&gt;

&lt;p&gt;Through the development of virtual 3D representations of water systems and the integration of cutting-edge technologies such as the Internet of Things (IoT), big data analytics, and cloud computing, we can now implement sophisticated systems for real-time monitoring, precise management, and optimized utilization of water resources. These advancements significantly improve the efficiency and sustainability of water management operations.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/xpIXxl7c-0Q"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hightopo Software utilizes its self-developed “HT for Web” graphic engine to build a range of visualization solutions for smart water from the city-region level, to the water plant and pump station level, and down to the local process level.&lt;/p&gt;

&lt;h2&gt;
  
  
  Analysis
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;City-level Management&lt;/strong&gt;&lt;br&gt;
This demonstration showcases a 2D smart water management map, utilizing Xiamen city as a case study. The design departs from conventional satellite mapping by implementing a streamlined hexagonal color block layout to represent the urban landscape. Different color blocks are used to indicate the locations of pump stations, water plants, sewage treatment plants, water sources, and water source protection areas. Rivers are depicted using minimalist lines, making the urban water monitoring system clear and straightforward.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiv1szqy6qiygm1qnbcyl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiv1szqy6qiygm1qnbcyl.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The dual-sided 2D data dashboards present real-time statistical information through integration with backend systems. With water supply scheduling and operational data, we deliver comprehensive operational analytics for various subsystems, including water supply, drainage, and sewage treatment networks. This approach culminates in a sophisticated water management framework that incorporates sensing, diagnostics, scheduling, proactive alerts, and adaptive corrections.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Water Volume Data Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HT integrates data from IoT devices that monitor water storage, quality, pressure, and flow. This information is presented in real-time on interactive dashboards, emphasizing critical metrics for various water management facilities. The system’s homepage provides a comprehensive overview of location data for all reservoirs, water plants, and pump stations. Users can efficiently access detailed information by selecting specific areas of interest.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1wlaz9afa52amtwsefkl.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1wlaz9afa52amtwsefkl.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Operational Data Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Based on the water management requirements of various regions, through comprehensive collection of information such as regional water usage trends, water supply volume, and total water fee revenue, we accurately obtain dynamic information on the service population, water plants, reservoirs, and pump stations in each area. This data is then used to generate intuitive visual charts, thereby improving management efficiency.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0lz7qpizbi6l8kf7w3az.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0lz7qpizbi6l8kf7w3az.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Water Plant Level Management
&lt;/h2&gt;

&lt;p&gt;The application of digital twin technology in wastewater treatment plants provides a new perspective and tool for wastewater treatment and management, displaying real-time conditions within the facility on web pages, and offering platform support for real-time monitoring and diagnostics, process optimization, predictive maintenance, equipment management and maintenance, and simulation training.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Comprehensive Monitoring&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HT utilizes advanced digital modeling techniques to create comprehensive representations of wastewater treatment facilities. This approach provides users with a detailed overview of operational conditions across all locations. The platform features intuitive navigation controls, enabling users to manipulate the virtual environment effortlessly. Through standard mouse and keyboard inputs, operators can seamlessly rotate, pan, and adjust the zoom level of the digital model, enhancing their ability to monitor and analyze plant operations effectively.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8i9s3cawuo183qnup1xh.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8i9s3cawuo183qnup1xh.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Data dashboards on both sides of the screen display key indicator parameters for plant equipment management, energy consumption management, real-time alarms, and operational supervision. The collected data information is converted into corresponding graphical information, visually presenting comprehensive indicators for the entire plant.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Functional Area Monitoring&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The management monitoring module provides a localization feature for all production areas across the facility. After locating a specific area, the system automatically opens the external structure of the building, revealing the actual layout of internal facilities and equipment. Clicking on equipment allows users to view its current real-time operational data. Combined with key process data extracted from fixed panels on both sides, this helps users monitor plant operations in real-time.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5d1rnabfwklni50kbuzx.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5d1rnabfwklni50kbuzx.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pipeline Monitoring&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For the layout of various pipelines in wastewater treatment plants, the “HT for Web” engine is used to create 1:1 3D rendering models for each pipe. The system uses different colors to display various network types, marking the flow directions of various pipelines in sewage treatment, such as sewage lines, sludge lines, and chemical dosing lines. This enhances users’ understanding of the plant’s pipeline layout and improves overall wastewater treatment plant management efficiency.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffj6emezvhfn2bv9ngsqs.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffj6emezvhfn2bv9ngsqs.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The pipeline network scene is presented using a high-tech night view style, with perspective design applied to surrounding related models to highlight the pipeline network effect.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqo0ee8a2vsts6zzoqadl.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqo0ee8a2vsts6zzoqadl.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Pump Station and Pump Room Level Management
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Water Pumping Station&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In response to market demands in the water industry, HT has developed a digital twin system for pump stations. Based on the IoT concept, this system employs information technology to achieve real-time monitoring of pipeline operation indicators, including network liquid levels, flow rates, water quality, gas, and pump station operating status, ensuring the safe and efficient functioning of the pipeline network.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Water Supply Pump Room&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The water supply system refers to a complex of reservoirs, pumps, pipelines, and other engineering works that provide water to different departments according to specific quality requirements. In this pump room scenario, dynamic lines represent the entire process of water flowing from the reservoir through the water supply pipes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjzd9w9i8xstgpesffnuw.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjzd9w9i8xstgpesffnuw.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Entering the localized 3D scene of the pump room enables the display of equipment spatial positions as well as comprehensive presentation of data such as water supply flow, pump frequency, inlet and outlet pressure, as well as water quality parameters like turbidity, pH value, and residual chlorine. This provides a visual monitoring interface for the actual operation of the water supply system.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Firc1hbrdyztmjbl2ovhh.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Firc1hbrdyztmjbl2ovhh.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Process Flow SCADA
&lt;/h2&gt;

&lt;p&gt;Equipment process SCADA uses graphical and visual representation methods to present complex equipment status, process flows, and operational steps in an intuitive and easy-to-understand manner for operators and managers. This can significantly enhances people’s understanding and control capabilities of production processes, making it an indispensable part of modern industrial automation and information management.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Water Treatment Plant Process Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We design the equipment for key process stages of the water treatment plant as 2.5D SCADA graphics, connecting the equipment according to the process system diagram. By adding key node operational data displays to the interface, we can precisely monitor the entire process flow, ensuring stable operation of all plant equipment and achieving significant improvements in water treatment quality and efficiency.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxu6wcpivytce3g1ae67g.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxu6wcpivytce3g1ae67g.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pump Station Process Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HT visualization supports displaying the urban pump room distribution in a “single map” . When hovering the mouse over a pump station node, it shows key data such as current flow rate and water level. According to the legend, the meanings of different types of icons and pipelines can be understood.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyr1n9wo08gox3bjn6059.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyr1n9wo08gox3bjn6059.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The process of each pump station is drawn as a SCADA diagram, displaying the real-time operational status of processes such as pump rooms, clean water tanks, and chemical dosing rooms. Utilizing HT 2D rendering technology, equipment such as sludge valves, liquid tanks, valves, pipelines, and other production-related structures are visually presented, with key instrument readings overlaid in corresponding areas, and different colors used to distinguish the functions of various pipelines. The system can control the start and stop of pumps and valves based on monitored water tank levels, achieving equipment self-control.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3wbreoixzcr54zlv4jae.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3wbreoixzcr54zlv4jae.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Wastewater Treatment Plant Process Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The wastewater treatment plant process flow is: coarse screen → fine screen → primary sedimentation tank → biological tank → secondary sedimentation tank → ceramic filter media → rapid filter → disinfection tank → reuse.&lt;/p&gt;

&lt;p&gt;The “HT for Web” graphics engine, combined with a 2.5D design style, renders the key nodes of each process stage in the wastewater treatment plant and connects them to the underground pipeline system for dynamic representation, making it easy for users to understand the connections between different process stages.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fabp22x3jc96tuobp50en.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fabp22x3jc96tuobp50en.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The HT dashboard supports integrating video streams in formats such as M3U8, FLV, and RTSP. Users can switch between different cameras to view real-time video, and the system supports displaying data and video on the same screen.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpr0iqjnhc28x4waty69t.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpr0iqjnhc28x4waty69t.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqn302n7jj2edqhuu33ex.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqn302n7jj2edqhuu33ex.gif" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;“HT for Web”&lt;/a&gt; also supports video fusion, which uses graphic image processing techniques to overlay video footage with 3D scene graphics. The video signal is calibrated according to the virtual camera position, angle, and field of view of the 3D scene, achieving a consistent visual effect between the video image and the scene, thus accomplishing video fusion. Through video fusion, more intuitive and comprehensive visual information can be provided, helping users better understand and analyze real-time surveillance video in the scene.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Smart water management technology in city-level, water plant-level, and pump station-level management not only improves the efficiency of management and operations, ensures sustainable use of water resources, but also enhances the reliability and security of the system. As technology continues to develop, the application of digital twins in the water industry will become increasingly deep-rooted, providing a powerful tool for achieving smarter, more efficient, and greener water management.&lt;/p&gt;

&lt;p&gt;You can visit our official website to view more cases:&lt;br&gt;
&lt;a href="https://www.hightopo.com/demos/index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo YouTube: &lt;a href="https://www.youtube.com/hightopo" rel="noopener noreferrer"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Medium Blog: &lt;a href="https://hightopo.medium.com/" rel="noopener noreferrer"&gt;https://hightopo.medium.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>ui</category>
    </item>
    <item>
      <title>Digital Twin Technology: Advancing Smart Management in Carbon-Neutral Industrial Parks</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Wed, 19 Mar 2025 08:04:57 +0000</pubDate>
      <link>https://forem.com/hightopo/digital-twin-technology-advancing-smart-management-in-carbon-neutral-industrial-parks-41kf</link>
      <guid>https://forem.com/hightopo/digital-twin-technology-advancing-smart-management-in-carbon-neutral-industrial-parks-41kf</guid>
      <description>&lt;p&gt;Growing climate change concerns in recent years have led to an increased need for carbon dioxide emission reduction. This can be achieved by implementing the concept of circular economy, which promotes the practice of resource conservation, emission minimization, and the maintenance of sustainable revenue streams.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;Hightopo &lt;/a&gt;utilizes the self-developed visualization product — &lt;a href="https://hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;HT for Web&lt;/a&gt; to build a lightweight, interactive, and smart energy visualization management system for industrial parks. &lt;strong&gt;HT for Web&lt;/strong&gt; contains not only 2D dashboards but also 3D graphics, to provide a comprehensive solution for energy management and monitoring. Empower industrial park managers and operators to achieve energy saving, centralized monitoring, management &amp;amp; decentralized control of energy. The system includes power distribution, lighting, air conditioning, heating, water supply, and drainage of buildings, etc.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/SjUeQ9afiNY"&gt;
&lt;/iframe&gt;
&lt;br&gt;
Based on the Web, the B/S structure system adopts a modular idea in the development process, that is, each module is developed separately and then integrated to reduce circular dependence and coupling. So as to unify the supervision of each measurement point and optimize the construction management. On the one hand, find out the inefficient operation of the equipment or the corresponding floor area, on the other hand, find out the abnormal energy consumption, reduce the peak power consumption level, and give reasonable suggestions based on data analysis.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3fudi9t4ttq5qz7c2ikm.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3fudi9t4ttq5qz7c2ikm.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsta2d8vk96e1czgeq91t.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsta2d8vk96e1czgeq91t.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Responsive design and cross-platform capability let users access the system anytime, anywhere, using any device. Highly interactive and lightweight models ensure an excellent user experience, even when accessed from mobile devices.&lt;/p&gt;

&lt;h2&gt;
  
  
  Main System Overview
&lt;/h2&gt;

&lt;p&gt;The Energy Medium module shows users the current medium consumption in two ways. One is divided systematically, the other is divided spatially. Click again to trigger the information about the energy consumption of each subsystem or each device respectively.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5l1my3b09pfd6p0s9rpt.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5l1my3b09pfd6p0s9rpt.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Enviorment Data Visualization&lt;/strong&gt;&lt;br&gt;
Use wireless sensors to collect environmental data, including indoor and outdoor temperature, humidity, CO2 concentration, VOC concentration, PM2.5 concentration, etc., and classify them according to whether to realize self-renewal in different environments, and propose energy storage optimization solutions for photovoltaics and wind power.&lt;/p&gt;

&lt;h2&gt;
  
  
  Energy Consumption Visualization
&lt;/h2&gt;

&lt;p&gt;Data was synced and displayed in the 2D data panel, and data sourced from AC, lighting systems, and other consumer systems was sorted, analyzed, and updated in real time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Water Supply Device Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu83k92qy23zmx8v4kvl2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu83k92qy23zmx8v4kvl2.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;br&gt;
The core system achieves automatic loading and unloading of equipment by communicating with background data. The 2D data panel enables intelligent control and management of all pipelines, equipment, and structures in the water supply and drainage system, get a full grasp of the water system equipment operation status, which includes each floor's wireless water meters, LORA switches, and energy efficiency management platform to ensure the safe and efficient operation of the water supply system.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Power Supply Equipment Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmodx96tjck6nogwxoc7a.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmodx96tjck6nogwxoc7a.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The highly interactive system ensures a fast response to the power supply. Each piece of equipment can interact and give feedback in real-time. This includes sensors, GPRS/4G/NB-IoT and more. The cross-platform capability of HT allows users to access the system on their mobile phones, tablets, and PC devices.&lt;/p&gt;

&lt;h2&gt;
  
  
  PV Energy Storage Visualization
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foaxhvx78qzbpzs8roetf.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foaxhvx78qzbpzs8roetf.gif" alt="Image description" width="500" height="245"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;PV Energy Storage is easy to get affected by multiple factors such as weather, temperature, and humidity during actual operation, resulting in intermittent photovoltaic power and random fluctuations in grid power. Digital twins are a good solution to this issue. HT integrated with energy storage equipment data and weather sensor data, TN-S power supply system data to visualize and provide continuous &amp;amp; stable power supply, improve the system work efficiency and power supply reliability.&lt;/p&gt;

&lt;h2&gt;
  
  
  Distribution System
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyqakxnw174hdwiehhbtc.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyqakxnw174hdwiehhbtc.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The power supply system is generally constructed at the same time as the main building and often comes with problems such as aging equipment, hidden safety hazards, and low intelligence. HT simulates the application scenario of power distribution equipment in buildings.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Basement Power Distribution Room Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft3t0xjg3j1ddgd0qfg1e.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft3t0xjg3j1ddgd0qfg1e.gif" alt="Image description" width="500" height="245"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The power distribution room refers to the indoor power distribution place with a low-voltage load, which mainly distributes electric energy for low-voltage users, and is equipped with medium-voltage incoming wires, distribution transformers, and low-voltage power distribution devices. The appearance of the underground power distribution room is highly restored and modeled according to the on-site pictures, CAD drawings, and other data. Based on this, an interactive Web 3D scene can be made and each piece of equipment in the power distribution room can respond to interactive events. When a situation such as a short circuit, or electric leakage occurs, an alarm signal will be issued in time, and supervisors will be notified in real-time, prevent fire and other safety accidents, and ensure the normal operation of system functions and system safety.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Electrical Wiring Diagram&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5vpw7ftckvstukrxcmh0.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5vpw7ftckvstukrxcmh0.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;HT for Web&lt;/strong&gt; not only has a powerful render for 3D graphics, but HT also supports the 2D vector component and the HT special rendering makes 2D and 3D can merge together and reusable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Water Supply Visualization
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foe705sa8jkv0r6byrbl1.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foe705sa8jkv0r6byrbl1.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;br&gt;
Water supply systems use a combination of pipes (of different dimensions and materials), valves, and outlets to deliver water to building users. Some water supply systems also use storage tanks and pumps. Visualizing the water flow/pipeline location in the 3D will greatly help operators to get a comprehensive understanding of the whole water supply system.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwu91ox1iiz6xqbidsftl.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwu91ox1iiz6xqbidsftl.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;br&gt;
Photo-realistic modeling restores the water pump room. Realize the unified management of water supply flow, pump frequency, inlet and outlet pressure, water turbidity, pH value, residual chlorine, etc., to meet the user’s needs for water quality, water volume, and water pressure, and to solve the actual operation problem of the water supply system due to changes in water demand, accidents such as pump stoppage, etc., to ensure the normal operation of enterprises.&lt;/p&gt;

&lt;h2&gt;
  
  
  HVAC System
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Chilled Water Storage&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy2wi6znikz4ufevfbleo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy2wi6znikz4ufevfbleo.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;br&gt;
A chilled water system uses a conventional electric chiller to prepare cold water during the valley power period at night, and then store the cold water in a water tank (tank). The water storage technology can cut peaks fill valleys and balance the load of the power grid. The water absorbs heat from the building and disperses it outside. The system cools the water down to a temperature of 4 degrees and then circulates it through the water coil’s air handler.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Water Level Visualization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzogfk6r419nk8tmpjssx.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzogfk6r419nk8tmpjssx.gif" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;br&gt;
Using cloud computing, Internet, GIS, and other technologies to remotely monitor parameters such as water level, water flow speed, load flow rate, cooling tower energy consumption, etc., to obtain the complete change of water level, and convert them into electrical signals to transmit to the computer. Reduce the installed capacity of various equipment, improve the efficiency of the host, make full use of the advantages of the cold storage device, and reduce the energy consumption of the system.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lightning System Visualization
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqczqw2rlf3gbvf56x42g.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqczqw2rlf3gbvf56x42g.gif" alt="Image description" width="1080" height="498"&gt;&lt;/a&gt;&lt;br&gt;
HT supports OBJ format 3d modeling files and MTL files and displays them on the web. Combined with the weather system, we can analyze and control the indoor light intensity and operation duration. Therefore, control the energy consumption. Also, the system will highlight the out-of-function device, easy for operators to locate and maintain.&lt;/p&gt;

&lt;h2&gt;
  
  
  Guest Room Control System
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdox9uxhm0f80d9u0wn79.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdox9uxhm0f80d9u0wn79.png" alt="Image description" width="713" height="346"&gt;&lt;/a&gt;&lt;br&gt;
HT as a visualization tool, adapted to B/S structure, makes it easy to integrate with other systems. Also, the B/S structure offers the ability of remote access to the system anywhere and anytime. Without downloading an app, all the data is live in real time. Operators can access the system on a phone, PC, or tablet with any modern browser, reducing the uncertainty of management and daily operation and increasing efficiency.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Building Energy Management Systems (BEMS) provide real-time remote monitoring and integrated control of a wide range of connected systems, allowing modes of operation, energy use, environmental conditions and so on to be monitored and allowing hours of operation, set points, and so on to be adjusted to optimize performance and comfort. BEMS can also trigger alarms, predict problems, and inform maintenance programs.&lt;/p&gt;

&lt;p&gt;Hightopo brings the web graphic library — &lt;strong&gt;HT for Web&lt;/strong&gt; to empower BEMS, and use digitization and visualization as two key pillars to help achieve the energy efficiency goals and towards the goal of Carbon Neutral.&lt;/p&gt;

&lt;p&gt;Hightopo Portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Medium Blog: &lt;a href="https://hightopo.medium.com/" rel="noopener noreferrer"&gt;https://hightopo.medium.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>frontend</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Digital Twins in Smart Buildings</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Wed, 05 Mar 2025 14:31:01 +0000</pubDate>
      <link>https://forem.com/hightopo/digital-twins-in-smart-buildings-231f</link>
      <guid>https://forem.com/hightopo/digital-twins-in-smart-buildings-231f</guid>
      <description>&lt;p&gt;The terms “Intelligent Community” or “Smart Park” refer to a type of building that incorporates technologies such as the Internet of Things (IoT), big data, and artificial intelligence (AI) into traditional infrastructure to achieve comprehensive monitoring, management, and service of the community/buildings. By connecting equipment, facilities, and systems within the community, it enables the transmission, sharing, and response of data, thus improving management efficiency and operational benefits. Additionally, it can provide residents and users with more intelligent and comfortable services and environments.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Hightopo Software has developed multiple intelligent community digital twin systems using its self-developed graphics engine, “HT for Web.” These systems can realistically recreate the 3D scenes of buildings and provide detailed displays of security equipment, fire protection systems, lighting, air conditioning, elevators, water supply and drainage, power equipment, and their statuses. Combined with the data dashboard on both sides, people can intuitively obtain information on asset data, environmental data, security data, and other building-related information from the system.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/1SecSfC7bOk"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Additionally, the system can further achieve personnel and equipment management, energy consumption monitoring and adjustment, safety monitoring and early warning, intelligent traffic management and other functions within the park through human-computer interaction, information sharing, and other means. This creates a comfortable, safe, and convenient living and working environment for people.&lt;/p&gt;

&lt;h2&gt;
  
  
  Energy Management
&lt;/h2&gt;

&lt;p&gt;Hightopo software integrates the functions of various units within a community. It provides global management of security, energy efficiency, transportation, environment, equipment, and assets within the park through data visualization, achieving refined management of park energy. This can reduce total energy consumption, improve energy utilization, and decrease management costs. For instance:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Air conditioning monitoring and management&lt;/strong&gt;: By collecting and analyzing the operational data of air conditioning systems, this system can monitor the status of air conditioning units in real-time. It can also raise an alarm for equipment anomalies and allow for remote monitoring and adjustment of the equipment. Additionally, the system can use AI to calculate the temperature that achieves the best energy efficiency ratio based on the current environmental temperature, and synchronize it in real-time to all air conditioning equipment. This achieves the goal of energy saving, emissions reduction, and cost reduction.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lighting control&lt;/strong&gt;: This feature supports remote control of the on/off function and brightness levels of various lighting facilities within the park. It allows for remote monitoring and adjustment of lighting equipment, ultimately leading to improved efficiency of the lighting facilities.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Power Monitoring&lt;/strong&gt;: Monitor the power equipment in the park to grasp its operating status in real-time. Raise alerts and alarms in case of abnormal situations and take timely measures to ensure the stable operation of the power equipment.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcp10piwikulsp1wu8t52.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcp10piwikulsp1wu8t52.gif" alt="Image description" width="640" height="359"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Security System
&lt;/h2&gt;

&lt;p&gt;The security system integrates video surveillance, patrol systems, access control systems, and fire safety systems to create a comprehensive security network. This allows for a visual security system and effective allocation of resources to ensure the safety of residents, personnel, and property within the community.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Video Surveillance&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The system can showcase the park’s camera locations using 3D scenes, allowing for easy interaction through mouse clicks to access the corresponding monitoring videos. Moreover, it can highlight the alarm monitoring devices for quick and convenient management.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F57a0z78m7fbz683a94j4.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F57a0z78m7fbz683a94j4.gif" alt="Image description" width="799" height="373"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Patrol&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The system can obtain and display patrol routes and points in real-time in the virtual 3D scene by connecting the locator of security personnel. This achieves digital twins between the 3D and real-world scenes, effectively improving the security management.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi130gedpkmggv4u41l1r.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi130gedpkmggv4u41l1r.gif" alt="Image description" width="500" height="233"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Access Control&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The system also supports marking access control points in the 3D scene and integrates access control system to monitor real-time access information for each access point.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frshrzufckqacy9zo7589.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frshrzufckqacy9zo7589.gif" alt="Image description" width="640" height="331"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fire Protection System&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;These systems support real-time viewing and management of firefighting equipment. Additionally, they also allow for the creation of emergency plans and firefighting simulations. This helps to improve fire safety levels and reduce personnel and property losses.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv4r8tfppyvm100yotgeg.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv4r8tfppyvm100yotgeg.gif" alt="Image description" width="800" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjt26mrb2f0wwx42dm65e.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjt26mrb2f0wwx42dm65e.gif" alt="Image description" width="640" height="298"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Traffic Management
&lt;/h2&gt;

&lt;p&gt;Hightopo Intelligent Community supports comprehensive management of personnel access, vehicle access, parking spaces, elevators, and other aspects within the park.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Elevators&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the Intelligent Community system, we use proportional restoration to incorporate elevator models into a 3D scene. We then combine them with real-time elevator operational data to achieve real-time display of elevator running status. Furthermore, the system can highlight elevators with abnormal alarms and notify maintenance personnel, greatly enhancing the response efficiency for elevator malfunctions and ensuring personnel safety.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fplu3zw3hg1phkokzrwxp.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fplu3zw3hg1phkokzrwxp.gif" alt="Image description" width="640" height="337"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feeihkt1ncw592oe9x8jd.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feeihkt1ncw592oe9x8jd.gif" alt="Image description" width="640" height="337"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbhza2g4u64zcfuuhw3e8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbhza2g4u64zcfuuhw3e8.gif" alt="Image description" width="799" height="421"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parking Lot&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Hightopo created a 3D model of the parking lot and accurately replicated the main facilities to scale. By tapping into parking space data, the system can monitor and restore real-time parking space usage. Additionally, it dynamically updates and displays analytical data on vehicle flow, types, and time periods based on multi-dimensional data such as space and time. When combined with the database, it can also provide real-time summaries of daily parking space usage in the park, thereby effectively improving traffic efficiency and parking space utilization efficiency.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkzulvuv48coedp4u3dj2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkzulvuv48coedp4u3dj2.gif" alt="Image description" width="800" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvojh9kbspch3srkq6hdc.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvojh9kbspch3srkq6hdc.gif" alt="Image description" width="799" height="367"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbed0vnszjhnrdnsbhm1x.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbed0vnszjhnrdnsbhm1x.gif" alt="Image description" width="640" height="294"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Barrier Gate&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Hightopo “Intelligent Community” allows people to view the status of access control devices, access data, and access alarm data in a 3D scene. Additionally, through connection to the backend device control interface, it provides the ability to remotely open and close doors, manage permissions, and perform other necessary functions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Power and Water Supply
&lt;/h2&gt;

&lt;p&gt;Energy management involves monitoring and managing the usage of energy in buildings, including electricity, lighting, air conditioning, and water supply and drainage. It involves analyzing the relationship between equipment data and energy consumption. By regularly evaluating and improving the energy performance of equipment, different building equipment systems can operate efficiently under varying conditions, ultimately achieving the goal of optimizing energy conservation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Power Distribution&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Hightopo enables users to visualize the route of the distribution line by combining it with building models. Additionally, IoT equipment can be used to monitor power data, which allows for prompt alarms when power failures occur, ensuring the safe operation of the power system.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpid7vwjpjh5jlb674p33.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpid7vwjpjh5jlb674p33.gif" alt="Image description" width="640" height="358"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Illuminating System&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;By simulating various lighting devices in a 3D environment and connecting them to the lighting control system, “Intelligent Community” can establish a link between reality and the 3D scene, allowing operators to monitor and control the status of all lighting devices within an office remotely. This results in reduced daily lighting energy consumption and cost savings.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F24mg2t301kb0on0yud1j.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F24mg2t301kb0on0yud1j.gif" alt="Image description" width="500" height="229"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Air Conditioning&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The “Intelligent Community” showcases the pipelines and equipment of the air conditioning system to provide information about the wiring, temperature, humidity, air quality, and other related data. The system also allows for remote control of air conditioning equipment from the 3D scene, enabling real-time maintenance and troubleshooting. This helps to improve air quality within the community and increase the efficiency of the operations and management personnel.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvduudqame8tjafjh695r.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvduudqame8tjafjh695r.gif" alt="Image description" width="500" height="229"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0oyjiv36qozhg1tga0fm.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0oyjiv36qozhg1tga0fm.gif" alt="Image description" width="800" height="368"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Water Supply and Drainage&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This section primarily focuses on the monitoring and management of a building’s water supply, drainage, and sewage treatment systems. Hightopo integrates various data such as water quality, quantity, leakage, pressure, and sewage treatment monitoring into a 3D scene for visual display. This helps operators to understand the real-time status of water supply and drainage, and monitor equipment operation status, abnormal information, and other information. As a result, it helps achieve the goals of safe drinking water, resource conservation, building safety, etc..&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F67vz0itkv586eqe37f6g.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F67vz0itkv586eqe37f6g.gif" alt="Image description" width="640" height="320"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Property Management
&lt;/h2&gt;

&lt;p&gt;The property management module is also an important module. It typically includes aspects such as human resource management system, work order system, and more. This helps the property managers to manage properties more efficiently, thereby improving property service quality and customer satisfaction.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Work Order&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The work order system offers statistics and displays the completion status, unfinished status, and trends of work orders within the community. It also helps allocate and track work orders to improve work order processing efficiency and building maintenance quality.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Floy1e66jzcd2m4q5520p.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Floy1e66jzcd2m4q5520p.gif" alt="Image description" width="640" height="320"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Human Resource&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Human Resource Management System offers an easy-to-use and visually appealing dashboard to track and display employee-related data, such as recruitment, training, attendance, and salary. By utilizing this system, people can effectively manage their employees, and enhance employee performance, work quality, satisfaction, and skill levels. Moreover, with the ability to collect, analyze, and report employee information, performance, and salary data, managers can make informed decisions and improve overall management.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx30gwxw664otnfwstcav.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx30gwxw664otnfwstcav.png" alt="Image description" width="800" height="390"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Others
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Oblique Photography&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Using oblique photography (OP) is a quick way to create 3D models of buildings. This provides detailed information about the terrain, building surfaces, roofs, and surrounding environment. By refining the building models, we can display multiple angles and scales, allowing users to observe and analyze in an all-round manner.&lt;/p&gt;

&lt;p&gt;At the Hightopo Smart Park Intelligent Operations Center (IOC) system, we use oblique photography technology to create a 3D model of the entire park. By combining this technology with geographic information systems (GIS), we’re able to accurately capture information about the park’s buildings, roads, facilities, and surrounding environment.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxezf7wvw4we7p6r6y73z.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxezf7wvw4we7p6r6y73z.gif" alt="Image description" width="640" height="359"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Video Fusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HT utilizes graphic image processing technology to overlay video images onto 3D scene graphics. The video is adjusted based on the camera’s position, angle, and field of view within the 3D scene, allowing the video image to seamlessly blend into the 3D environment. Video fusion offers a more intuitive and comprehensive visual representation, aiding users in comprehending and analyzing real-time surveillance videos on location. This is highly advantageous in areas such as security monitoring, emergency response, and decision-making support.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyagya9a0ihxg6zd9gctk.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyagya9a0ihxg6zd9gctk.gif" alt="Image description" width="640" height="359"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Traffic Flow Simulation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The traffic flow simulation utilizes real traffic data and behavior models to generate a lifelike, visually engaging road environment. By merging a three-dimensional park scene with vehicle models, the simulation replicates the movement and interplay of vehicles on the road. The traffic flow simulation enables users to examine and analyze road traffic flow, traffic conditions, and congestion under various scenarios, which has immense value for traffic planning, optimization, and the development of intelligent transportation systems.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn44lbaccqoabt7ff0yf6.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn44lbaccqoabt7ff0yf6.gif" alt="Image description" width="500" height="229"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;BIM&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Building Information Modeling (BIM) is a three-dimensional model data in the management information system of the construction industry. Engineering professionals can use BIM to obtain relevant information data, and more efficiently plan, design, construct, and manage buildings and infrastructure. Smart parks overlay BIM building data onto map scenes, realizing the combination display of BIM+GIS. By separating the construction of assets on different floors and within floors in the BIM model, the building construction process is dynamically restored and demonstrated.&lt;/p&gt;

&lt;p&gt;Building Information Modeling (BIM) is a data model used in the construction industry. With BIM, engineering professionals can efficiently plan, design, construct, and manage buildings and infrastructure by accessing relevant information. Hightopo “Intelligent Community” utilize BIM building data overlaid onto map scenes. The BIM model separates asset construction on various floors and within floors, dynamically restoring and demonstrating the building construction process.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feoyv6cab7gibxwdkojmk.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feoyv6cab7gibxwdkojmk.gif" alt="Image description" width="640" height="314"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;This article presents the Intelligent Community Collection and Hightopo Digital Twin Control System. It comprises modules for managing energy, security, efficiency, and property, along with additional features, such as oblique photography, video fusion, traffic simulation, and BIM building construction. The system can be viewed through a three-dimensional scene, which helps operations personnel grasp the real-time status of various aspects and monitor equipment operation status and abnormal information. This leads to improved management efficiency of the community, reduced energy consumption, and cost savings.&lt;/p&gt;

&lt;p&gt;Hightopo Software insists on independent innovation and development. In addition to providing VR/AR visualization technology, it also provides web visualization application solutions for BIM, GIS, XR, MR, 2D configuration, and 3D configuration. Our self-developed graphic engine “HT for Web” not only supports the ability to provide graphical configuration SCADA, but also supports building low-code and zero-code IoT platforms at the PaaS and SaaS levels. Hightopo products have been widely used in various fields such as smart cities, parks, buildings, factories, intelligent manufacturing, water, energy, photovoltaics, wind power, electricity, new infrastructure, operation and maintenance, government affairs, transportation, medical, finance, and scientific research.&lt;/p&gt;

&lt;p&gt;You can visit our official website to view more cases:&lt;br&gt;
&lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;YouTube: &lt;a href="https://www.youtube.com/hightopo" rel="noopener noreferrer"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Linkedin: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>webdev</category>
      <category>webgl</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Unleashing Creativity: Case Studies in Hightopo 3D and Gaussian Splatting</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Wed, 26 Feb 2025 06:52:09 +0000</pubDate>
      <link>https://forem.com/hightopo/unleashing-creativity-case-studies-in-hightopo-3d-and-gaussian-splatting-59ff</link>
      <guid>https://forem.com/hightopo/unleashing-creativity-case-studies-in-hightopo-3d-and-gaussian-splatting-59ff</guid>
      <description>&lt;p&gt;3D Gaussian Splatting (also known as 3D Gaussian Splashing or 3D Gaussian Spray) represents a significant breakthrough in 3D scene representation and rendering. It utilizes deep learning technology, using 3D Gaussian points instead of traditional triangle meshes to express scenes. This approach facilitates both efficient 3D transformation and produces exceptional photorealistic rendering results. In comparison to conventional methodologies, this technology has significant improvements across key performance metrics, including rendering quality, rendering speed, and training speed.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/oQwW1bFFzjc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;In this article, we will introduce the visualization project built using 3D Gaussian Splatting technology for Hightopo Software’s Xiamen office and Zhongshan Road Pedestrian Street. By completely mapping every building, detail, light and shadow from the real scene into the virtual space, users can enjoy the architectural environment from all angles in the virtual space and obtain an immersive spatial interactive experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  About 3D Gaussian Splatting
&lt;/h2&gt;

&lt;p&gt;The basic workflow of 3D Gaussian Splatting can be divided into three main stages:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Data Acquisition Stage&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;• For small scenes: Simple video capture using a smartphone is sufficient&lt;/p&gt;

&lt;p&gt;• For large scenes: Professional equipment is used to ensure high precision and clarity, typically completed within 30 minutes&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Model Training Stage&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;• Utilizes GPU computing power to process and train the model data&lt;/p&gt;

&lt;p&gt;• Training duration depends on GPU capabilities, usually taking about one day&lt;/p&gt;

&lt;p&gt;• Involves processing captured images to generate 3D Gaussian points with position, scale, rotation, and appearance attributes&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Rendering and Deployment Stage&lt;/strong&gt;&lt;br&gt;
• Implementation of real-time rendering using Hightopo graphics engines&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs1j9i67sj1mqcmoj1op9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs1j9i67sj1mqcmoj1op9.png" alt="Image description" width="800" height="585"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzabt6dsj74f16sj1cl14.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzabt6dsj74f16sj1cl14.png" alt="Image description" width="800" height="591"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ficba53g3pm2o7knpzxsi.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ficba53g3pm2o7knpzxsi.gif" alt="Image description" width="640" height="491"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Technical Advantages and Limitations
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;■ Key Advantages&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;High-Quality Rendering: 3D Gaussian Splatting can generate highly realistic 3D scenes with excellent detail and texture representation.&lt;/li&gt;
&lt;li&gt;Efficient Modeling: Compared to traditional methods and other techniques like NeRF, training with 3D Gaussian Splatting converges faster, allowing complex scene modeling in less time.&lt;/li&gt;
&lt;li&gt;Strong Adaptability: This technique can handle a wide range of scenarios, from microscopic objects to macro environments.&lt;/li&gt;
&lt;li&gt;Real-time Performance: 3D Gaussian Splatting provides fast rendering and real-time interaction, offering a smooth user experience.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Flexible Data Processing: The method can process multiple data inputs, including images, videos, and point clouds.&lt;br&gt;
&lt;strong&gt;■ Limitations&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;High Storage Requirements: Large-scale point cloud data processing and storage demand significant disk space, affecting web page loading speed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Compatibility Issues: Integrating 3D Gaussian Splatting models with traditional triangle-based mesh models presents challenges.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Hardware Requirements: Performing large-scale scene rendering requires high-performance hardware and GPUs.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  3D Gaussian Splatting Scene of Hightopo Office
&lt;/h2&gt;

&lt;p&gt;Using 3D Gaussian Splatting technology combined with the Hightopo graphics engine, we have achieved precise reconstruction of the office’s interior space. Beyond perfectly capturing the geometric structure of the space, it excellently renders material textures and lighting effects. The surface materials of walls, floors, furniture, and LED lighting fixtures have been meticulously modeled, creating a scene experience that rivals video-like realism.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/1xSRIlFMFyw"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;This demonstration showcases our office environment through an immersive third-person perspective, utilizing advanced PBR (Physically Based Rendering) material technology to deliver sophisticated character visualization.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl4c71kbef69n2kok229l.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl4c71kbef69n2kok229l.gif" alt="Image description" width="500" height="278"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3D Navigation&lt;/strong&gt;&lt;br&gt;
Within our advanced 3D office environment, users navigate the workspace through an interactive virtual avatar. Upon approaching designated workstations, the system renders a detailed 3D representation of the corresponding employee and their current status. A professional interface displays pertinent organizational information, including departmental affiliations and role specifications. This sophisticated interactive framework facilitates comprehensive visualization of workplace dynamics and personnel distribution, optimizing both operational efficiency and user engagement in information acquisition.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0yuwxhg7mocqn75pruf8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0yuwxhg7mocqn75pruf8.gif" alt="Image description" width="640" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Point Cloud Mode&lt;/strong&gt;&lt;br&gt;
This 3D scene also supports point cloud mode, which clearly displays the spatial layout and details.&lt;/p&gt;

&lt;p&gt;Each office area, meeting room, and facility is precisely represented by dense point clusters, fully recreating the geometric structure, furniture layout, and spatial characteristics of the office environment.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffpld4p664t7yguqzozj4.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffpld4p664t7yguqzozj4.gif" alt="Image description" width="800" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Point clouds have extensive applications, playing crucial roles in urban planning, architectural surveying, human-computer interaction, autonomous driving and other fields, providing a reliable data foundation for spatial analysis and scene understanding.&lt;/p&gt;

&lt;h2&gt;
  
  
  Outdoor 3D Gaussian Splatting Scene
&lt;/h2&gt;

&lt;p&gt;In this scene, we collected 3D data of Xiamen’s Zhongshan Road pedestrian street using point cloud technology and transformed it into Gaussian points, precisely capturing the geometric shapes and material details of the buildings. After professional processing, these Gaussian points form continuous smooth surface effects, perfectly reproducing the architectural features. Whether it’s buildings, road vegetation, street lights, or vehicles, all scene elements are accurately recreated at a 1:1 scale.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Virtual Street Tour&lt;/strong&gt;&lt;br&gt;
In this high-quality 3D visualization scene, the unique Southern Fujian architectural charm of Zhongshan Road is fully preserved, with clear presentation of everything from the green glazed tile gate tower roofs to the Chinese cloud pattern decorations on the door pillars. Users can freely stroll in this virtual environment, experiencing an immersive journey through the distinctive Southeast Asian style and Southern Fujian traditional architectural charm of Zhongshan Road’s arcade buildings.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgkq2pjoixputlg9nicin.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgkq2pjoixputlg9nicin.gif" alt="Image description" width="500" height="301"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiecjakx0ceaqmx35eldv.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiecjakx0ceaqmx35eldv.gif" alt="Image description" width="640" height="385"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Multi-Device Interaction
&lt;/h2&gt;

&lt;p&gt;In terms of system functionality and accessibility, Hightopo Graphics Engine’s underlying technology ensures perfect operation of the system across multiple devices.&lt;/p&gt;

&lt;p&gt;Users can operate through various terminal devices including PC, mobile phones, tablets, large screens, and VR/AR devices. It supports keyboard control using WASD or arrow keys, and for touch screen devices, it offers functions like single-finger rotation, two-finger zooming, and three-finger panning.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flzxpbo9wn7pujyz317ty.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flzxpbo9wn7pujyz317ty.gif" alt="Image description" width="441" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fajj8d2g39limx6nukoc6.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fajj8d2g39limx6nukoc6.gif" alt="Image description" width="441" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;In recent years, 3D Gaussian Splatting technology has shown tremendous application potential in virtual tours, digital cultural tourism, emergency rescue, and other fields of scene reconstruction, providing unlimited possibilities for virtual reality and metaverse industries.&lt;/p&gt;

&lt;p&gt;As a pioneer in HTML5 (Canvas/WebGL/WebGPU/WebXR) Web technology innovation, Hightopo Software will continue to deepen industry development, delivering stunning large-scale scenes to clients through more refined, realistic, and efficient 3D rendering technology, driving digital transformation across industries to new heights.&lt;/p&gt;

&lt;p&gt;You can visit our official website to view more cases:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hightopo.com/demos/index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;YouTube: &lt;a href="https://www.youtube.com/hightopo" rel="noopener noreferrer"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo portfolio: &lt;a href="https://www.hightopo.com/demos/en-index.html" rel="noopener noreferrer"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Linkedin: &lt;a href="https://www.linkedin.com/company/hightopo" rel="noopener noreferrer"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d/" rel="noopener noreferrer"&gt;https://www.facebook.com/hightopo2d3d/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d" rel="noopener noreferrer"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo/" rel="noopener noreferrer"&gt;https://www.instagram.com/hightopo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>gaussian</category>
      <category>hightopo</category>
    </item>
    <item>
      <title>Virtual Reality (VR) Application for Smart Office Visualization</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Fri, 30 Jun 2023 09:21:43 +0000</pubDate>
      <link>https://forem.com/hightopo/virtual-reality-vr-application-for-smart-office-visualization-3ohk</link>
      <guid>https://forem.com/hightopo/virtual-reality-vr-application-for-smart-office-visualization-3ohk</guid>
      <description>&lt;p&gt;“Virtual Reality”, or VR technology, is a computer-generated simulation of an environment or situation that can be experienced through a VR headset or similar device. The rapidly growing field of VR has the potential to revolutionize many industries, from gaming to education to healthcare.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/exinJFf-Nxw"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Project Overview&lt;/strong&gt;&lt;br&gt;
With the self-developed graphic engine “HT for Web”, Hightopo Software has built a 3D model of the Tianjin office. The office has been transferred into a virtual reality scene, maintaining a 1:1 ratio with the real-world office environment. The 3D scene within the VR setting showcases the functional areas of the office, including room distribution, workstation layout, meeting rooms, and bathroom facilities. Managers can receive real-time feedback on key locations through video surveillance, temperature and humidity monitoring, and water level tracking, providing them with a more accurate understanding of the office’s situation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;System Analysis&lt;/strong&gt;&lt;br&gt;
The essence of VR lies in creating a virtual three-dimensional interactive environment. With the help of special hardware devices, users can immerse themselves in a virtual world that transcends physical boundaries and allows for natural interactions. By using a VR headset as a display terminal, along with VR controllers, sensors, wireless kits, and other tools, it’s easy to present a 3D scene from an office right within the VR headset.&lt;/p&gt;

&lt;p&gt;Hightopo leverages the WebXR standard to allow users to interact with various devices in a virtual office setting in real-time. Through language, gestures, walking, and 360° free movement using VR devices, users can immerse themselves in the Hightopo VR scene and focus on experiencing the office layout, personnel information, and current usage status of functional areas while interacting with others. This creates an immersive experience. Additionally, Hightopo VR now supports multiple VR devices, including HTC Vive, Oculus, Qeust2, and Pico.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First Person Roaming&lt;/strong&gt;&lt;br&gt;
Hightopo Software uses 3D virtual simulation technology and digital twin technology to simulate the Tianjin office environment in the real world. This includes accurately replicating office equipment and wall structures in three dimensions, allowing for a clear and comprehensive visualization of the entire environment in a browser.&lt;/p&gt;

&lt;p&gt;Once the VR feature is enabled, users will be able to move around the virtual space with ease by wearing VR devices. They can explore the office from a first-person perspective and view various devices, wall-mounted demo pictures, and other objects within the office from any angle.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FTeouDJT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyv5jtfnaw916gu8w4e2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FTeouDJT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyv5jtfnaw916gu8w4e2.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;br&gt;
Users can move the VR controller to the demo image on the wall and click the interaction button to play the demo video. This feature makes it easier for visitors to view relevant content and improves the user experience.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Wkt4BfgI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldkq5un74dgqhubvttxp.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Wkt4BfgI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldkq5un74dgqhubvttxp.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;br&gt;
When users view 3D scenes on other devices such as PCs or mobile phones, “HT for Web” graphics engine can support both first-person free roaming and third-person perspective free roaming.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8qWtU2aA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73t21vvosboodb4e2utm.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8qWtU2aA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73t21vvosboodb4e2utm.gif" alt="Image description" width="607" height="390"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;VR Access Control&lt;/strong&gt;&lt;br&gt;
The VR virtual office also includes an access control function. To use it, the viewer can press the control button on the controller and aim the handset ray at the lock on the door to open the menu. They can then select the appropriate number on the menu, and after entering the correct password, the company door will be opened.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PKENyJgF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sovvzp2oo6hbphvsjf5.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PKENyJgF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sovvzp2oo6hbphvsjf5.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;br&gt;
This system can connect with the company’s security and protection system. By monitoring dynamic data such as access control status, area location, card swiping times, and passage time, the administrator can manage the office remotely.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;VR Zone Management&lt;/strong&gt;&lt;br&gt;
Hightopo VR employs a handheld interactive menu to optimize visual space in VR mode. Users can easily access the function menu by clicking the button on the gamepad. Selecting “Personnel Distribution” on the menu will display the distribution status of personnel on workstations in the office. In the 3D scene, Hightopo uses electronic fences of varying colors and textual descriptions to identify workstations based on different professions, facilitating quick comprehension of personnel distribution by new colleagues and visiting clients.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gkj3iqck--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3cs7c6xx6y4hwdy2f36.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gkj3iqck--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3cs7c6xx6y4hwdy2f36.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The electronic fence function is a commonly used feature in industrial digital twins, which is widely used in various fields, such as substations, sewage treatment plants, thermal power plants, commercial communities, and airports. With “HT for Web”, designer an developer can rapidly produce perimeter models tailored to customer specifications. By integrating UWB personnel positioning or fence alarm data, the software can achieve perimeter prevention and alarm functions in hazardous areas. This capability enables managers to quickly respond to diverse situations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;VR Resource Management&lt;/strong&gt;&lt;br&gt;
By using Hightopo software’s 2D panel components, this system can display real-time information of personnel or equipment in a 3D scene without distortion. This enables managers to easily grasp the situation in the office at any time and perform remote control.&lt;/p&gt;

&lt;p&gt;When the user clicks on the employee nameplate on the desktop, a popup window will appear in the scene displaying real-time information about the employee at the current cube, such as name, position, contact information, current status, and device list.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wgMnYcul--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh6hvy2tlltier0g1fns.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wgMnYcul--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh6hvy2tlltier0g1fns.gif" alt="Image description" width="400" height="415"&gt;&lt;/a&gt;&lt;br&gt;
When clicking on the computer on the desktop, a pop-up window will appear in the scene displaying information about the employee and device at the current workstation, such as the employee name, position, equipment being used at the current cube, and a list of all company equipment.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--r0_SqrzR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqm19kmgcmrgr6lcdmjo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--r0_SqrzR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqm19kmgcmrgr6lcdmjo.gif" alt="Image description" width="400" height="414"&gt;&lt;/a&gt;&lt;br&gt;
Office restrooms and meeting rooms are two public areas with high usage frequency. With “HT for Web”, we can add corresponding prompt panels on the model to help users quickly understand the usage situation of the current place. Meeting rooms can also be booked and queued through the company’s management system to improve office efficiency.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WdadoFid--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw146g39rtz0nudkp38r.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WdadoFid--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw146g39rtz0nudkp38r.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EI_pwH2f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kha1j69t9rpt581jtksx.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EI_pwH2f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kha1j69t9rpt581jtksx.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;br&gt;
Users can click on the character model in the scene and use the pop-up operation panel to change the character’s clothing and logo style.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EAJj3Bbh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuukxcpzpwvszifcffxs.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EAJj3Bbh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuukxcpzpwvszifcffxs.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--15m-vVvY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zto9vnv4pxdtrqr9vfn.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--15m-vVvY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zto9vnv4pxdtrqr9vfn.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;br&gt;
In digital twins, changing the model texture can alter the appearance and texture of the model surface, thereby affecting the visual effect of the model. This is very important for model design, rendering, and previewing. The “HT for Web” supports replacing model textures and improves the authenticity and credibility of digital twins.&lt;/p&gt;

&lt;p&gt;Additionally, the 3D graphic engine “HT for Web” supports changing model textures to simulate different materials and textures, such as metal, wood, and fabric, which makes digital twins more detailed and realistic. This is of great significance for industrial design, product manufacturing, and architectural design.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;VR Device Management&lt;/strong&gt;&lt;br&gt;
“HT for Web” supports using pop-up windows to display real-time camera data in a 3D scene. The software also supports integrating video surveillance with security systems to form a complete security system. Managers can remotely check the office status to ensure the safe operation of the office.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2JobSKkT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cip9xto4y9dk1z42lr2k.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2JobSKkT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cip9xto4y9dk1z42lr2k.gif" alt="Image description" width="758" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Temperature and humidity are another important indicators that need special attention in the office. The Hightopo VR Office system combines temperature and humidity sensor data with 2D panel components to display real-time values in the office. Managers can quickly adjust related equipment to provide employees with a comfortable working environment.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2ZLBjiZd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ruj7vy1e56ey5dwi5ko.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2ZLBjiZd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ruj7vy1e56ey5dwi5ko.gif" alt="Image description" width="743" height="381"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;VR Remote Control&lt;/strong&gt;&lt;br&gt;
The system also supports two-way control between 3D simulation and physical equipment. That is, managers can directly control the lights or air conditioners in the office through VR; office personnel switch lights or adjust air conditioners, and they can also be presented in real-time in the 3D simulation scene.&lt;/p&gt;

&lt;p&gt;Hightopo software supports two-way control between 3D scene and physical equipment. This means that managers can directly manage the lights or air conditioners in the office through VR. Meanwhile, office personnel can turn on/off lights or adjust air conditioning, and these actions can be displayed in real-time in the 3D scene.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ggMvcUud--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riy66wh2xm5q00y6yirk.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ggMvcUud--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riy66wh2xm5q00y6yirk.gif" alt="Image description" width="762" height="382"&gt;&lt;/a&gt;&lt;br&gt;
During cold winters or hot summers, managers can pre-start the air conditioning to adjust the office temperature, making the working environment more comfortable for employees.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8Sg4iiNR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0gbgya3kwgd6f6sfo1u.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8Sg4iiNR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0gbgya3kwgd6f6sfo1u.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Bi-directional control is often used in digital twin projects for factories. In some dangerous environments, conventional operation may cause harm to the worker. By using digital twin bi-directional control technology, administrators can remotely turn on/off the corresponding equipment, which is both convenient and safe.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;VR Alarm Control&lt;/strong&gt;&lt;br&gt;
Hightopo software supports integrating the data resources of the existing office system and establishing corresponding threshold alarm triggering rules.&lt;/p&gt;

&lt;p&gt;In the following example, we have enabled event monitoring for the water level in the office. An alert message will be automatically triggered when the water level exceeds the threshold.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zGJDKU3s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5bllncnt8vroktf7wfe.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zGJDKU3s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5bllncnt8vroktf7wfe.gif" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The system also provides quick troubleshooting based on recognized fault information or abnormal operation. This helps guide users to the corresponding location for fault diagnosis. Additionally, the system will display the alarm parameter panel, which assists users in analyzing key indicators, alarm information, and historical tracing, among other aspects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Summary&lt;/strong&gt;&lt;br&gt;
With the support of VR and AR technologies, the interaction between users and digital twins is no longer limited to traditional screen display, but begins to resemble physical entity interactions. This makes the digital world closer to the real world in terms of sensory and operational experience. Decisions made based on digital twins for physical entities will be more accurate and closer to reality.&lt;/p&gt;

&lt;p&gt;Hightopo Software insists on independent innovation and development. In addition to providing VR/AR visualization technology, it also provides web visualization application solutions for BIM, GIS, XR, MR, 2D configuration, and 3D configuration. Our self-developed graphic engine “HT for Web” not only supports the ability to provide graphical configuration SCADA, but also supports building low-code and zero-code IoT platforms at the PaaS and SaaS levels. Hightopo products have been widely used in various fields such as smart cities, parks, buildings, factories, intelligent manufacturing, water, energy, photovoltaics, wind power, electricity, new infrastructure, operation and maintenance, government affairs, transportation, medical, finance, and scientific research.&lt;/p&gt;

&lt;p&gt;For more industry application examples, please refer to the Hightopo Software official website.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.hightopo.com/demos/en-index.html"&gt;Hightopo Software Official Website&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To get a free trial: &lt;a href="https://www.hightopo.com/en-request.html"&gt;https://www.hightopo.com/en-request.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo YouTube: &lt;a href="https://www.youtube.com/hightopo"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;br&gt;
Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;br&gt;
Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d"&gt;https://www.facebook.com/hightopo2d3d&lt;/a&gt;&lt;br&gt;
Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;br&gt;
Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo"&gt;https://www.instagram.com/hightopo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>vr</category>
      <category>ar</category>
      <category>javascript</category>
      <category>webgl</category>
    </item>
    <item>
      <title>Hightopo Smart Civil Aviation Management System</title>
      <dc:creator>Hightopo</dc:creator>
      <pubDate>Fri, 19 May 2023 08:12:01 +0000</pubDate>
      <link>https://forem.com/hightopo/hightopo-smart-civil-aviation-management-system-il3</link>
      <guid>https://forem.com/hightopo/hightopo-smart-civil-aviation-management-system-il3</guid>
      <description>&lt;p&gt;&lt;strong&gt;Foreword&lt;/strong&gt;&lt;br&gt;
The Hightopo Smart Civil Aviation Management System (HSCAMS) is built using JavaScript and HT for Web (HT for short), a Web-based 2D/3D visualization engine. The system creates digital twins of the aircraft exterior, cabin management, cabin equipment, airplane engine, and cockpit in a sci-fi style. Various data is then integrated and analyzed using technologies such as the Internet of Things (IoT), cloud computing, big data analysis, and artificial intelligence. This allows for the establishment of a smart aircraft comprehensive management platform that is scenario-based, intelligent, and user-friendly. This platform offers managers a comprehensive and diverse management approach that includes multi-angle and multi-data management. In addition, it aims to create a green, smart, and secure civil aviation management system in the field of civil aviation.&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/wM0HTRxC5SI"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Model Selection&lt;/strong&gt;&lt;br&gt;
The system’s 3D scene showcases three distinct aircraft types and their appearance parameters:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Airbus A380: a massive, wide-body passenger airliner with four engines, designed and manufactured by Airbus for long-range flights.&lt;/li&gt;
&lt;li&gt;Boeing 787: the first ever mid-size airliner with long-range capabilities, making it a game changer in aviation history.&lt;/li&gt;
&lt;li&gt;Boeing 727: a narrow-body civilian aircraft with medium-range capabilities, developed and manufactured by Boeing in the United States.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Wl5MdcCt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mc6i9j9gv9yfjlvzpo0k.gif" alt="Image description" width="800" height="447"&gt;
Regarding the above models, we use virtual simulation and digital twin technologies combined with the HT for Web engine to render seamless 2D and 3D flight scenes, simulating the aerodynamic layout and geometric parameters of Airbus A380, Boeing 787, and Boeing 727, etc.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After selecting the model with the mouse, the system will show the overall shape of the currently selected plane in a roaming animation. By clicking the small triangle next to the model, a brief introduction of the current aircraft will pop up. So as to understand the history of the passenger aircraft, as well as engine other parameter information.&lt;/p&gt;

&lt;p&gt;By connecting to the real-time data of the aircraft and its flight management system, it is possible to monitor the equipment data and passenger status in real time. This allows for sharing real-time data between the control tower and flying aircraft, which can help with pre-warning and post-event review, thereby effectively reducing the occurrence of various aviation accidents.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--G1xTFLez--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zykcxdeo04xm3g6karkx.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--G1xTFLez--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zykcxdeo04xm3g6karkx.gif" alt="Image description" width="649" height="446"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Dp7_ylte--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wscbioqyq0d1631hifbj.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Dp7_ylte--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wscbioqyq0d1631hifbj.gif" alt="Image description" width="799" height="447"&gt;&lt;/a&gt;&lt;br&gt;
The 3D engine “HT for Web” is developed based on WebGL technology. It enables seamless rendering of 3D scenes and models of aircraft in the browser, as well as the creation of intricate navigation and data visualization. By accessing real-time data such as wing span, fuel capacity, and interference drag of the aircraft, HSCAMS allows for precise flight management. Additionally, it provides an immersive experience by simulating real-time flight scenes.&lt;/p&gt;

&lt;p&gt;With Hightopo software’s all-in-one development tool, designers and programmers can collaborate on the design of view components, icons, 2D drawings, and 3D scenes for various aircraft models. This results in the rapid realization of 2D and 3D visualizations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Aircraft Monitoring&lt;/strong&gt;&lt;br&gt;
After connecting the airport monitoring data to the system, the system not only displays the real-time status of various aircraft components such as the wing, fuselage, tail wing, landing gear, control system, and power equipment, but also provides information on the aircraft’s interference resistance, fuel load, and cargo compartment load rate. This helps the tower and instrument flight control room manage flights more effectively and scientifically.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tCTMpbNk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g0ym5dt06hiw1i8hvv7.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tCTMpbNk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g0ym5dt06hiw1i8hvv7.gif" alt="Image description" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interference Resistance Information&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In addition to friction, pressure, and induced resistance, “interference resistance” is an additional resistance generated by the mutual interference of airflow between various parts of the aircraft such as wings, fuselage, and tail. When designing an aircraft, the relative positions can be effectively calculated to reduce interference resistance.&lt;/p&gt;

&lt;p&gt;We incorporate real-time resistance data into the HSCAMS. A red triangle with an exclamation mark will appear when the resistance is too high, making it convenient for the ground control tower to detect problems in a timely manner and contact the crew to confirm flight safety. The system’s historical records can also be used to optimize future aircraft designs.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5WlROLYH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df36golz464qw400x4dd.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5WlROLYH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df36golz464qw400x4dd.gif" alt="Image description" width="644" height="368"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fuel Capacity Information&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;An aircraft’s fuel capacity can be categorized into three groups: maximum fuel capacity, minimum fuel capacity, and takeoff fuel quantity. The maximum fuel capacity is the greatest amount of fuel that the aircraft can carry while still ensuring safe flight. Minimum fuel capacity refers to the amount of fuel that the aircraft can carry after arriving at the destination airport, which should be sufficient to allow the aircraft to fly for 30 minutes at holding speed over the airport. Takeoff fuel quantity refers to the total amount of fuel carried by an aircraft for a flight’s mission.&lt;/p&gt;

&lt;p&gt;This system combines sensors, 5G, and other technologies, and display the capacity data on 2D panels of the Hightopo visualization system, helping relevant personnel to monitor fuel consumption at all times. By adjusting the flight speed appropriately to make the actual fuel consumption as close as possible to the theoretical minimum value, it can also achieve cost reduction, carbon emissions reduction, and other purposes.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--N6JyhS_G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4j0clpctxlmjxg95ilt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N6JyhS_G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4j0clpctxlmjxg95ilt.png" alt="Image description" width="800" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cargo Information&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HSCAMS utilizes Hightopo’s robust charts, graphics, and design elements to display information about general cargo, chemicals, overweight items, fresh goods, and more in a more user-friendly manner. By integrating real-time data from the cargo hold with data from the ground passenger and cargo transportation service area, it can also enhance airport loading and unloading efficiency.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fcTLkZsi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhwedsywjf4phclis4x4.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fcTLkZsi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhwedsywjf4phclis4x4.gif" alt="Image description" width="478" height="351"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The cargo loading capacity is a crucial indicator of an aircraft’s performance. For instance, the Airbus A380 has a maximum cargo capacity of 66.4 tons. The indicator is primarily restricted by weight, volume, door size, and floor load capacity. The system retrieves the loading capacity data of the aircraft model in the 2D panel and shows the current cargo hold load rate in percentage. Additionally, the 2D panel can also support unmanned monitoring of the cargo hold and fire warning.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cabin Management&lt;/strong&gt;&lt;br&gt;
The Airbus A380, colloquially known as the “giant” of the skies, is the largest commercial passenger airliner in the world. Many A380s boast exceptional onboard entertainment such as fitness rooms, bathrooms, restaurants, and bars, providing passengers with a fun and enjoyable experience while flying. A unique feature of this aircraft is its two-story cabin and luggage compartment, which are separately displayed in the system. This provides a visual representation of the cabin structure, layout, and facilities and equipment, which correspond one-to-one with their actual locations and numbers, maintaining consistency with the actual aircraft.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FAz7h44R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzb9v070pp6r4bz7lvso.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FAz7h44R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzb9v070pp6r4bz7lvso.gif" alt="Image description" width="799" height="495"&gt;&lt;/a&gt;&lt;br&gt;
The cabin is divided into three classes — first class, business class, and economy class — based on the size and comfort of the seats. Once connected to the ticketing system, different seat types, including selected, remaining, and VIP seats, are color-coded for easy differentiation.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--76J8e5R8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubg3cvnjkaep3k66orvn.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--76J8e5R8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubg3cvnjkaep3k66orvn.gif" alt="Image description" width="800" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Passenger Information&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The system supports displaying passenger information such as name, class, boarding number, available mileage, etc., so that flight attendants can make more reasonable arrangements for passenger service.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ayCF3l6B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1mpih4jyhbfo52vcnfh.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ayCF3l6B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1mpih4jyhbfo52vcnfh.gif" alt="Image description" width="800" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cabin Equipment Management&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Clicking on the cabin equipment will take you to the details page, where you can view related information such as passenger volume, flight information, system parameters, and more.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--B3NmJsSR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t8zpaxpksx8u58a1oxd.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--B3NmJsSR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t8zpaxpksx8u58a1oxd.gif" alt="Image description" width="800" height="447"&gt;&lt;/a&gt;&lt;br&gt;
In terms of design, we utilized a futuristic wireframe pattern and implemented a transparent shell for the aircraft. This allows for easy visual inspection of the cabin equipment by maintenance personnel, providing a clear view of the overall layout and structure. By integrating device data into the system, faults can be promptly detected, ensuring a safe flight. Additionally, by integrating passenger information data, the distribution of passenger nationalities can be viewed through small flashing dots on a world map located in the upper right corner, so as to help flight attendants provide personalized service to customers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Aircraft Equipment View&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Clicking on the Aircraft Equipment View will automatically remove the aircraft’s transparent mask. By clicking on the internal equipment again, the equipment name and its properties will be displayed. Our system uses the virtual simulation technology of Hightopo software to create a 3D interactive model of the aircraft that is based on its actual appearance. This high-precision model helps maintenance personnel to grasp flight data through real-time data-driven operations.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LbfID0I---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klpvje5qj6se5gx19toz.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LbfID0I---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klpvje5qj6se5gx19toz.gif" alt="Image description" width="800" height="448"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Equipment Self-check&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Monitoring device data is a way to supervise processes as they happen, while equipment self-checks serve as reminders before a process begins. The HSCAMS interface’s 2D panel can scroll to show the current safety system status, and it includes an intelligent warning analysis feature. If the system data exceeds the set threshold, the relevant information will be highlighted in the list to remind maintenance personnel to promptly check the equipment’s health status.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Aircraft System Presentation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In this page, the Flight Management System (FMS) is capable of automating flight missions. The Aircraft Health Management System (AHMS) includes monitoring, diagnosis, and evaluation of the aircraft’s health status. The Air Data Inertial Reference System (ADIRSP) measures various factors such as the aircraft’s position, speed, trajectory, wind direction/speed, and attitude. The Information System (IS) provides flight, maintenance, cabin, and operational information. The Integrated Modular Avionics (IMA) is based on core computing, RTOS, and on-board networks that support system interconnection and data communication. The Communication System (CNS) is primarily used to maintain two-way voice and signal contact between the aircraft and ground navigation controllers, dispatchers, and maintenance personnel. The Display System (CDS) provides pilots with an integrated monitoring and cockpit display control system to enhance situational awareness.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PtKji1MH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wddnr7y7jqri3vs5bl80.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PtKji1MH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wddnr7y7jqri3vs5bl80.gif" alt="Image description" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Engine&lt;/strong&gt;&lt;br&gt;
The aircraft engine generates thrust to propel the aircraft forward. In HSCAMS, for instance, the TRENT 900 specification engine can be viewed from all angles through four methods: section, airflow, disassembly, and reset.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--96IJquZ7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7fnuoewg0wnxd0maxx1.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--96IJquZ7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7fnuoewg0wnxd0maxx1.gif" alt="Image description" width="800" height="448"&gt;&lt;/a&gt;&lt;br&gt;
The TRENT 900 turbofan engine is composed of a compressor, a combustion chamber, a high-pressure turbine (which drives the compressor), a low-pressure turbine (which drives the fan), and an exhaust system. The diagram in the center of the page illustrates the working conditions of the high-pressure turbine blades. The Trent 900 engine has 70 high-pressure turbine blades, each of which is capable of generating nearly 600 kilowatt-hours of power. The 2D panel on the right displays the changes in engine pressure and temperature using line charts.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ChnTQKfJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zywibvm0wdp4akme8lw.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ChnTQKfJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zywibvm0wdp4akme8lw.gif" alt="Image description" width="800" height="447"&gt;&lt;/a&gt;&lt;br&gt;
On the airflow page, the system presents the propulsion efficiency of various turbojet engines. This includes values for inlet airflow, aerodynamic load, thermal load, centrifugal load, and other indicators. The inflow and outflow airflow are differentiated with red and green arrows.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--v9pTI66b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4s2njoitbdq2rb8apco.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--v9pTI66b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4s2njoitbdq2rb8apco.gif" alt="Image description" width="800" height="447"&gt;&lt;/a&gt;&lt;br&gt;
The software enables visualization of the engine’s internal structure by breaking down its components and displaying their names, including hollow structure fan blades, titanium alloy honeycomb cores, honeycomb interlayers, and superplastic formed wide-chord fans. It also allows for detailed viewing of each individual part after disassembling the engine. By connecting to IoT data of the components, the current status of each part can be monitored and visualized, enabling global monitoring from a macro to micro perspective.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bFWTjm19--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqbfxlbg6fmm3xr5ztyk.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bFWTjm19--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqbfxlbg6fmm3xr5ztyk.gif" alt="Image description" width="800" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cockpit&lt;/strong&gt;&lt;br&gt;
The cockpit of a civil aviation plane is a complex and highly technical environment. It is here that pilots control the aircraft, monitor its systems, and communicate with air traffic control and other aircraft. The cockpit is designed to be ergonomic and intuitive, allowing pilots to quickly and accurately make critical decisions in real-time. Modern cockpits are equipped with advanced technologies such as digital displays, GPS navigation, and automated systems to enhance safety and efficiency.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VgKSb25J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf0sdxysmkxp8oq6fk7u.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VgKSb25J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf0sdxysmkxp8oq6fk7u.gif" alt="Image description" width="800" height="449"&gt;&lt;/a&gt;&lt;br&gt;
Flight instruments in the cockpit are divided into three main categories: navigation, communication, and flight control. Navigation instruments guide pilots to navigate correctly during flights, while communication instruments maintain communication between the aircraft and the ground. Flight control instruments allow pilots to control the aircraft’s attitude and speed. On the cockpit page of this system, different flight information can be displayed by clicking on different displays, which will then pop up the corresponding 2D panel.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hCXBPUmu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbd8ot6oygomezi0msci.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hCXBPUmu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbd8ot6oygomezi0msci.gif" alt="Image description" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Engine Indicating and Crew Alerting System (EICAS/ECAM) is utilized to monitor and present engine status and crew alerting information.&lt;/li&gt;
&lt;li&gt;The Flight Management System (FMS) is utilized to enter and validate flight plans, control speed, and more.&lt;/li&gt;
&lt;li&gt;The Multi-Function Display (MFD) provides a visual interface that can be utilized for integrated flight information, engine monitoring, and flight parameter configuration.&lt;/li&gt;
&lt;li&gt;The Navigation Display (ND) displays the current aircraft heading information on a three-dimensional map.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--q92u40nI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo8rr6wyvt6zhnwo78k7.png" alt="Image description" width="800" height="447"&gt;
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ctZc8V1a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfyhg4d1ofoufmq3dw0k.png" alt="Image description" width="800" height="447"&gt;
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JfngeCWW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfo27vzoa810clmabcbk.png" alt="Image description" width="800" height="447"&gt;
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--br2Umuha--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wak677hcmctwcamm781.png" alt="Image description" width="800" height="447"&gt;
Aviation navigation refers to the various systems and equipment used in aircraft during flight, including flight computers, radar, inertial navigation, celestial navigation, and global satellite positioning. These systems provide continuous, safe, and reliable technical services for airborne aircraft. On the cockpit display, it shows the three-dimensional position and speed of the aircraft, as well as provide important information such as heading and attitude.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OEpinMPj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk71vi1h60ua2xic0pqv.gif" alt="Image description" width="800" height="448"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Summary&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Hightopo Smart Civil Aviation Management System (HSCAMS) uses 3D visualization and virtual simulation, as well as big data, cloud computing, and other technologies. This allows users to view a 3D interactive model of the aircraft and access operating data, helping relevant personnel to analyze flight data in real-time. Users can gain a comprehensive understanding of the aircraft’s working conditions and the status of various systems through device self-checks, aircraft system displays, and engine, cockpit, and other page operations. This results in increased flight reliability, reduced costs, and simplified maintenance. It also includes information on aircraft fuel capacity and engine operating curves, leading to digitization and more environmentally-friendly flight within the general aviation industry.&lt;/p&gt;

&lt;p&gt;For more industry application examples, please refer to the Hightopo Software official website.&lt;br&gt;
&lt;a href="https://www.hightopo.com/demos/en-index.html"&gt;https://www.hightopo.com/demos/en-index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hightopo YouTube: &lt;a href="https://www.youtube.com/hightopo"&gt;https://www.youtube.com/hightopo&lt;/a&gt;&lt;br&gt;
Hightopo LinkedIn: &lt;a href="https://www.linkedin.com/company/hightopo"&gt;https://www.linkedin.com/company/hightopo&lt;/a&gt;&lt;br&gt;
Hightopo Facebook: &lt;a href="https://www.facebook.com/hightopo2d3d"&gt;https://www.facebook.com/hightopo2d3d&lt;/a&gt;&lt;br&gt;
Hightopo Twitter: &lt;a href="https://twitter.com/hightopo2d3d"&gt;https://twitter.com/hightopo2d3d&lt;/a&gt;&lt;br&gt;
Hightopo Instagram: &lt;a href="https://www.instagram.com/hightopo"&gt;https://www.instagram.com/hightopo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aviation</category>
      <category>webgl</category>
      <category>visualization</category>
      <category>3d</category>
    </item>
  </channel>
</rss>
