glTF Model Optimization & Three.js setup.
Budget: $30 – $250 USD
This project requires expertise in both glTF file optimization and Three.js development.
Tasks
1. Optimize a glTF file (.glb) by reducing its size for use on our website. By simplifying and removing any extra information (e.g. device internals). However, we don’t want the final render to be affected.
We want to keep the full display and battery cover.
2. Setup Three.js (Html/JavaScript) website 3D Viewer. Including scene, camera, etc.
a Setup interactive 3D viewer (use mouse to spin, pan, zoom etc)
b. Add button to toggle the device colour (white and black).
c. Add button for additional lighting.
d. Add 2 x buttons to animate display (https://cloudfront-surpic.s3.eu-west-1.amazonaws.com/Test/3DViewerAnimation.html):
1. Spinning square
2. Flashing square.
Notes
• We want the final render to look as good as the current glTF does, when viewed on https://playcanvas.com/viewer.
• Quality is important.
Attachments
• Site page design
• Image of the Device in White
• Image of the Device in Black
• glTF file
Tasks
1. Optimize a glTF file (.glb) by reducing its size for use on our website. By simplifying and removing any extra information (e.g. device internals). However, we don’t want the final render to be affected.
We want to keep the full display and battery cover.
2. Setup Three.js (Html/JavaScript) website 3D Viewer. Including scene, camera, etc.
a Setup interactive 3D viewer (use mouse to spin, pan, zoom etc)
b. Add button to toggle the device colour (white and black).
c. Add button for additional lighting.
d. Add 2 x buttons to animate display (https://cloudfront-surpic.s3.eu-west-1.amazonaws.com/Test/3DViewerAnimation.html):
1. Spinning square
2. Flashing square.
Notes
• We want the final render to look as good as the current glTF does, when viewed on https://playcanvas.com/viewer.
• Quality is important.
Attachments
• Site page design
• Image of the Device in White
• Image of the Device in Black
• glTF file