Integration of interactive 3D models into React-based application

Abstract

This thesis explores the possibilities of integrating interactive 3D interfaces into React-based web applications, utilizing specialized tools and techniques to enhance web applications through the integration of 3D elements, while the primary objective was to explore the capabilities of React as a foundation for developing 3D web applications, with a focus on creating visually engaging and responsive 3D content. The thesis examined several prominent 3D libraries and tools, such as Three.js, React Three Fiber (R3F), Spline, Babylon.js and p5.js, analysing their unique features, limitations and compatibility with the React ecosystem, and conducting a comprehensive comparison, thus providing a basis for evaluating each tool's effectiveness, functionality and user interaction. Ultimately, the project aims to identify the most efficient and scalable solutions for building interactive 3D experiences in React environments. This thesis highlights the potential of interactive 3D interfaces to enhance web applications through a comprehensive research and development process. The finalized application, designed for desktop use and hosted on GitHub Pages, illustrates various implementations of 3D elements within a React framework. This work adds to the knowledge of 3D development tools and methods specifically concerning React, serving as a valuable resource for both developers and researchers eager to explore advancements in interactive 3D web technologies.