3D file Viewer in React using GLTFLoader (Three.js)

Objective: Create a React-based 3D viewer for stone block images captured in .glb format, originating from the Polycam iPhone app. The viewer should allow users to interact with the 3D models, providing a 360-degree view along the x-axis and 180-degree rotation along the y-axis while keeping the bottom side of the stone block fixed to the ground. Additionally, a slider should facilitate switching between two input 3D image files, one with five visible sides and another with the sixth side view. Detailed Requirements: 1. Input Data: • The input consists of two 3D image files in .glb format. One file contains a view of five sides, and the other file contains the view of the sixth side. • The sixth side must be adjusted and placed at the bottom to ensure visibility. 2. Viewer Functionality: • Utilize the GLTFLoader from the [login to view URL] library to render 3D models in a React application. • Implement a 360-degree rotation feature along the x-axis. • Implement a 180-degree rotation feature along the y-axis to keep the bottom part fixed to the ground. • Enable zooming within reasonable limits to prevent the camera from entering the stone block. 3. User Interface Elements: • Provide a slider that allows users to switch between the two input 3D image files. • Include a button within the 3D viewer to toggle the display of dimensions for each side of the stone block during rotation. 4. Data Integrity: • Ensure that the merging of the two input files results in a single object representing the stone block with all six sides. • Guarantee there is no data loss or overlaps in the merged object. The merged object should be an accurate replica of the original stone block. 5. Integration: • The 3D viewer should be seamlessly integrated into an existing React application. Acceptance Criteria: • The React-based 3D viewer meets the specified functionality and user interface requirements. • The viewer allows users to smoothly switch between the two input 3D image files. • The viewer enables 360-degree x-axis rotation and 180-degree y-axis rotation while keeping the bottom side fixed. • Zooming is implemented within reasonable limits, preventing the camera from entering the stone block. • The "show/hide dimensions" button functions correctly. • The merged 3D object accurately represents the stone block with all six sides, without data loss or overlaps. • The viewer is successfully integrated into the existing React application. Note: We are open to accept a solution that involves merging the two input files to create a single 3D object that can be viewed from all six sides, as long as it meets the specified requirements without any data loss or overlaps. Design Requirements: - The client is open to suggestions for the viewer interface design. The developer should be able to provide creative ideas and suggestions for an intuitive and user-friendly interface. Skills and Experience: - Proficiency in React and [login to view URL] - Experience with GLTF file format and the GLTFLoader - Strong understanding of 3D rendering and manipulation - Ability to create a polished and visually appealing user interface If you have the required skills and experience, and you are ready to take on this exciting project, please submit your proposal.