Hightopo

Posted on Sep 5

Create 3D Explosion Animations with HT for Web

#webdev #programming #javascript #productivity

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.

Hightopo Software (HT) 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.

Implementation Steps

Let’s use a simple example to explain how the model part explosion effect is implemented.

Model Assembly
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.

Below, we’ll use a robotic arm 3D model as an example:

/**
 * @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
*/
function assemblyModel(shape3d,obj,mtl,prefix,block){
  ht.Default.loadObj(obj,mtl, {
    prefix:prefix,
    cube: true,
    center: true,
    shape3d:shape3d,
    finishFunc: function (modelMap, array, rawS3) {
      if (modelMap) {
        const obj = new ht.Node();
        obj .s({
          'shape3d': shape3d
        });
        obj .s3(rawS3);
        obj.setAnchor3d([0.5, 0.5, 0.5]);
        // Model position is set to the position in the modeling software
        obj.p3(array.center);
        block.addChild(obj)
        dm.add(obj);
      }
    }
});
}
var armModels = {
  ‘sump’:{
    ‘obj’:’assets/sump.obj’,
    ‘mtl’:’assets/sump.mtl’,
    ‘prefix’:’assets/’
  },
  ‘base’:{
    ‘obj’:’assets/base.obj’,
    ‘mtl’:’assets/base.mtl’,
    ‘prefix’:’assets/’
  },
  ‘arm1’:{
    ‘obj’:’assets/arm1.obj’,
    ‘mtl’:’assets/arm1.mtl,
    ‘prefix’:’assets/’
  },
......
}

// init g3d
var g3d = new ht.graph3d.Graph3dView();
var dm = g3d.dm();
g3d.addToDOM();

var robotArms= new ht.Block();
dm.add(robotArms);
for(var key in armModels ){
  var arm = armModels [key];
  assemblyModel(key ,arm[‘obj’],arm[‘mtl’],arm[‘prefix’],robotArms);
}

Record Positions
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.

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

function getNodePosition(position){
  robotArms.eachChild(d => {
      position[d.s('shape3d')] = d.p3()
  })
}

Path Design
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.

Let’s illustrate this with the example of linear diffusion:

function bigBang(isOpen = true,toPositions, defaultPositions, finishFunc) {
  robotArms.eachChild(d => {
    d.a({
      'fromPosition': ht.Default.clone(d.p3()),
      'endPosition': ht.Default.clone(isOpen ? toPositions[d.s('shape3d')]: defaultPositions[d.s('shape3d')]),
    })
  })

  return ht.Default.startAnim({
    duration: 1e3,
    easing: function (t) { return t * t; },
    finishFunc: function () {
      finishFunc && finishFunc()
    },
    action: function (v, t) {
      robotArms.eachChild(d => {
        var fromPosition = d.a('fromPosition');
        var endPosition = d.a('endPosition');

        d.p3([fromPosition[0] + (endPosition[0] - fromPosition[0]) * v, fromPosition[1] + (endPosition[1] - fromPosition[1]) * v, fromPosition[2] + (endPosition[2] - fromPosition[2]) * v]);

      })
    }
  });

}
// Listen to background click event to start animation
var isOpen = true;
var _bigBang; 
g3d.mi(e => {
  if(e.kind === "doubleClickBackground"){
    _bigBang?.pause();
    _bigBang = bigBang(isOpen, function () {
      _bigBang = null;
    })
    isOpen = !isOpen;
  }
})

Virtual Reality (VR) Equipment Disassembly

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.

Using the “HT for Web” 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.

3D Manual

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.

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.

Application Scenarios

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.

Industrial Manufacturing Field

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.

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.

Aerospace Field

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.

Military Industry Field

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.

Power and Energy Sector

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.

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.

Advantages

Enhanced Visual Presentation

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.

Improved Comprehension Efficiency

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.

Facilitates Solution Assessment and Optimization

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.

Promotes Knowledge Dissemination and Retention

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.

Streamlines Work Processes

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.

Summary

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.

Appendix

“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.