Development of a Web-Based 3D Model Visualization Application to Support Community-Based Product Design Processes

Abstract

This research and development study aims to develop a web-based interactive 3D visualization application to support participatory product design in community contexts. The study is grounded in the limitations of conventional two-dimensional presentations, which are unable to fully communicate product shape, proportions, and details, resulting in misunderstandings and inefficiencies in design-related decision-making. The system was developed using WebGL technology and the Three.js library to enable real-time 3D rendering through web browsers without requiring additional software installation. The scope of the study included the development of eight packaging and product label models in .glb and .obj formats. Model optimization techniques, including polygon reduction and file compression, were applied to enhance system performance. Technical testing results indicated that reducing the polygon count by approximately 30% decreased file sizes from 120–150 MB to 40–60 MB and reduced loading time from 8–10 seconds to 5–8 seconds, while maintaining an average frame rate of 18–20 FPS. The system functioned reliably across desktop computers, smartphones, and tablets without errors. In addition, the system was tested with 51 participants and evaluated by five experts. The overall mean score was 4.74 with a standard deviation of 0.51, indicating a high level of suitability. Users reported improved clarity in understanding product forms, reduced design communication errors, and enhanced collaborative decision-making at the community level. In conclusion, the developed system serves as a digital tool that enhances the product design and community-based product development process, with strong potential for application in educational settings and future research.