Building an interactive ultrasonic cleaner for the web

A product photograph can tell you a lot about a machine. It shows the shape, the controls and the finish. It leaves you to imagine what happens when you turn a dial, or what is going on beneath the tank.

For the Elma New Zealand store, I built an interactive Elmasonic cleaner into the homepage. You can rotate it, try the simulated controls and switch to a cutaway view. There is also a separate interactive explainer for the cleaning process itself.

The two experiences have different jobs. The model helps someone explore a particular piece of equipment. The explainer gives them a way to look at the sound and bubbles involved in ultrasonic cleaning. Both sit alongside the product information a buyer needs: dimensions, specifications, manuals and a way to ask for advice.

Starting with the product photograph

The cleaner on the homepage is based on the Elmasonic P 120 H. Product photography supplied the visual reference, while Elma's published dimensions gave the model its proportions.

The current model is constructed in code using Three.js. The photograph was a reference for that work, rather than an input to automatic image-to-mesh conversion.

The housing, tank and controls are built from geometry. Materials and lighting give the stainless steel, blue front panel and other surfaces their appearance. This lets the browser show the cleaner from different angles rather than displaying one fixed view of it.

The photograph is especially useful for the front panel. The display, buttons and controls have to sit in the right places for the machine to look familiar. In this build, their positions were measured from a product photograph and the panel artwork was drawn with Canvas, the browser's drawing surface.

Giving the visitor something useful to do

Rotation is the first interaction. It lets someone inspect the cleaner's form and tank from another angle. The simulated controls also change the settings shown on the model's display.

These controls belong to the website demonstration. They do not operate a physical cleaner, and they do not replace the operating instructions. A visitor can try the interface and see the display respond.

The See inside control takes that further. It reveals an illustrative cutaway of the tank and equipment underneath it. A visitor can look past the housing and see how the presentation relates to the cleaning process.

The internal arrangement is an educational illustration. It should not be treated as a manufacturer's engineering drawing or an exact digital twin. It shows the idea without claiming to reproduce every concealed part of the machine.

A photographic rotation sequence provides an alternative when the live 3D scene is unavailable. That is a separate way to present the product; it is not evidence that the browser-generated model came from those frames.

Showing what the machine does

The next question is harder to answer with a product model: what happens in the liquid?

The Elma homepage introduces ultrasonic cleaning in its How it works section. From there, a visitor can open the interactive cavitation explainer and follow the process in more detail.

The explainer moves through the transducers, pressure patterns in the tank, bubble growth and collapse, and the interaction near a surface. Visitors can change settings and inspect the visual explanation as they go.

There is modelling behind those pictures. The acoustic part uses a two-dimensional sound-field simulation running on the graphics processor. The bubble model runs separately in a browser worker. The sound field and the behaviour of a bubble are related parts of the process, represented by different models.

For someone choosing equipment, the useful part is being able to connect the machine with a process that is otherwise difficult to see. They can explore the explanation, then return to the range and its specifications.

Keeping the limits beside the explanation

The cavitation explainer includes reference information and notes that distinguish estimates and illustrative settings from measured facts. It is an educational experience. It does not certify how a particular cleaner will perform on a customer's parts, predict a cleaning result or replace advice about the right equipment and process.

The same applies to the homepage cutaway. It gives someone a visual way into the subject while the product pages and manuals carry the practical buying and operating detail.

Part of the store

The interactive work is one part of a larger custom build. Customers can also browse by application, compare specifications, check tank capacities and choose whether to buy or ask for a quote. The people managing the store have catalogue and sales tools behind it.

I have covered that broader project in the Elma Ultrasonics NZ case study. There is more about the connection between the shop and the work after a sale in Custom e-commerce: the business behind the online shop.

You can try the cleaner on the Elma NZ homepage, open See inside and follow the link to the physics explainer. The product details remain there when you are ready to move from exploring the machine to choosing one.