Website Development Update-React, 3D model viewer (glb) and virtual tour
Budget: €250 – €750 EUR
We need a programmer/developer that excels in React (three.js / reactjs) and has experience with the implementation of 3D model viewers in websites. The website will also have a virtual tour with 360º images (6k resolution) implemented with cube maps. The main part of the website is done you will be responsible for implementing the Showroom and All products part.
Expected working hours for the project:
2 weeks / 50 hours
Website Content Detailed and Tasks
- 4 Showrooms in a total
- BYCICLE https://adobe.ly/2TU3dqv
- 2 360º images
- 10 hotspots
- BOBIKE https://adobe.ly/3xJVmKH
- 2 360º images
- 10 hotspots
- CATLIKE
- 5 360º images
- 7 hotspots
- OFFROAD https://adobe.ly/3d88phn
- 7 360º images
- 10 hotspots
- All Products Page
- BYCICLE https://adobe.ly/3zPSq17
-10 products (same screens with 3D models has the hotspots on the Showroom part)
- BOBIKE https://adobe.ly/3x3AjTL
-10 products (same screens with 3D models has the hotspots on the Showroom part)
- CATLIKE (the sames has the other but in orange)
-7 products (same screens with 3D models has the hotspots on the Showroom part)
- OFFROAD https://adobe.ly/3qinylB
-10 products (same screens with 3D models has the hotspots on the Showroom part)
- Hotspot page aka 3D model page
- BYCICLE https://adobe.ly/35ISRfM
- OFFROAD https://adobe.ly/3wTZs2Q
- BOBIKE https://adobe.ly/3xJ0izr
-CALIKE (the sames has the other but in orange)
We already have most of the website done, with the 360º image viewer implemented.
You can take a look at the website here: https://polisport.vr360.pt/
You can take a look at the Adobe XD file here: https://xd.adobe.com/view/30f3a081-8a95-4e8e-a429-c73f566b762a-65a0/grid
In this menu, you would do the Showroom and All Products part of the website: https://xd.adobe.com/view/30f3a081-8a95-4e8e-a429-c73f566b762a-65a0/screen/923771b3-08c0-4f2f-9eb9-d4a2b5f81491/
You would be responsible for implementing the following Adobe XD slides on our website:
Slides 68 to 90 and also their mobile version.
Where the 3D models will be displayed on a viewer: https://xd.adobe.com/view/30f3a081-8a95-4e8e-a429-c73f566b762a-65a0/screen/4f2aced9-2597-4f07-a421-3b7023b10b52/
Example of the 3D viewer experience we want: https://www.dropbox.com/s/ljrba1hhmxdnh04/3D%20model%20viewer%20example.mp4?dl=0
The 3D models will all be provided in glb format.
We have a mockup of the 360º image part so you can easily follow the navigation logic:
https://kuula.co/post/7SJpx/collection/7Yg8b
There are four showrooms so we have four 360º tour mockups.
We will provide all the content ready for implementation and an Excel file with the content organizer so you as many guides as possible for smooth development.
We will also provide all the code done at the moment so you can refurbish it. But you will have to sign an NDA.
Milestones:
1-Fix a bug on the current code where the 360º videos don't aren't playing with sound. And implementation of a navigation map on the current part of the website.
2- Creation of website pages following the Adobe XD files (must be pixel perfect).
3-Implementation of the 360º Tour with all the provided cube maps.
4-Implementation of all the product hotspots on the 360º images, following the Kuula mockups and Excel files with text and image contents.
5-Implementation of the 3D model viewer with all the provided 3d models. Must test our 3D models glb files so their lighting is correct on the website.
6-Website launch. You must ensure file migration to the client-side and also the website launch.
For each milestone deliverable, you must upload/update all the files in GitHub and into our server (using Filezilla) for approval. After the first review by the Project Manager, the corrections (if needed) will be posted in Trello to complete until the final approval. When there are no corrections needed the milestone will be completed at Freelancer.com
Final Deadline: 09/07/2021
Expected working hours for the project:
2 weeks / 50 hours
Website Content Detailed and Tasks
- 4 Showrooms in a total
- BYCICLE https://adobe.ly/2TU3dqv
- 2 360º images
- 10 hotspots
- BOBIKE https://adobe.ly/3xJVmKH
- 2 360º images
- 10 hotspots
- CATLIKE
- 5 360º images
- 7 hotspots
- OFFROAD https://adobe.ly/3d88phn
- 7 360º images
- 10 hotspots
- All Products Page
- BYCICLE https://adobe.ly/3zPSq17
-10 products (same screens with 3D models has the hotspots on the Showroom part)
- BOBIKE https://adobe.ly/3x3AjTL
-10 products (same screens with 3D models has the hotspots on the Showroom part)
- CATLIKE (the sames has the other but in orange)
-7 products (same screens with 3D models has the hotspots on the Showroom part)
- OFFROAD https://adobe.ly/3qinylB
-10 products (same screens with 3D models has the hotspots on the Showroom part)
- Hotspot page aka 3D model page
- BYCICLE https://adobe.ly/35ISRfM
- OFFROAD https://adobe.ly/3wTZs2Q
- BOBIKE https://adobe.ly/3xJ0izr
-CALIKE (the sames has the other but in orange)
We already have most of the website done, with the 360º image viewer implemented.
You can take a look at the website here: https://polisport.vr360.pt/
You can take a look at the Adobe XD file here: https://xd.adobe.com/view/30f3a081-8a95-4e8e-a429-c73f566b762a-65a0/grid
In this menu, you would do the Showroom and All Products part of the website: https://xd.adobe.com/view/30f3a081-8a95-4e8e-a429-c73f566b762a-65a0/screen/923771b3-08c0-4f2f-9eb9-d4a2b5f81491/
You would be responsible for implementing the following Adobe XD slides on our website:
Slides 68 to 90 and also their mobile version.
Where the 3D models will be displayed on a viewer: https://xd.adobe.com/view/30f3a081-8a95-4e8e-a429-c73f566b762a-65a0/screen/4f2aced9-2597-4f07-a421-3b7023b10b52/
Example of the 3D viewer experience we want: https://www.dropbox.com/s/ljrba1hhmxdnh04/3D%20model%20viewer%20example.mp4?dl=0
The 3D models will all be provided in glb format.
We have a mockup of the 360º image part so you can easily follow the navigation logic:
https://kuula.co/post/7SJpx/collection/7Yg8b
There are four showrooms so we have four 360º tour mockups.
We will provide all the content ready for implementation and an Excel file with the content organizer so you as many guides as possible for smooth development.
We will also provide all the code done at the moment so you can refurbish it. But you will have to sign an NDA.
Milestones:
1-Fix a bug on the current code where the 360º videos don't aren't playing with sound. And implementation of a navigation map on the current part of the website.
2- Creation of website pages following the Adobe XD files (must be pixel perfect).
3-Implementation of the 360º Tour with all the provided cube maps.
4-Implementation of all the product hotspots on the 360º images, following the Kuula mockups and Excel files with text and image contents.
5-Implementation of the 3D model viewer with all the provided 3d models. Must test our 3D models glb files so their lighting is correct on the website.
6-Website launch. You must ensure file migration to the client-side and also the website launch.
For each milestone deliverable, you must upload/update all the files in GitHub and into our server (using Filezilla) for approval. After the first review by the Project Manager, the corrections (if needed) will be posted in Trello to complete until the final approval. When there are no corrections needed the milestone will be completed at Freelancer.com
Final Deadline: 09/07/2021