3D file Viewer in React using GLTFLoader (Three.js)
Budget: ₹2,000 – ₹18,000 INR
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 Three.js 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 Three.js
- 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.
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 Three.js 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 Three.js
- 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.