Sourcing and Displaying 3D Geometry
I have created 3D models in Alias and other packages in the past, but creating a 3D model of the M5 Stack seemed like a daunting task to put in the middle of my intentionally rapid project.
Another open question: would I be able to display and animate a 3D model in a React App? I have modeled and animated in Unity, but this required a special output format that newer browsers support known as Web Assembly or WASM. It isn’t exactly streamlined for integration with JavaScript, although I was able to manage connecting them for interactivity.
“Look before you build” is a reflexive impulse, and always search for exactly what you want first. Google “free M5Stack Core 2 3d model” and receive a list of sources to choose from. Of course a gadget sold to “makers” exists in a 3d model format free to use for whatever you want.
GrabCAD was the first site I picked. It has an impressive library along with other resources for 3D modellers and builders.
After downloading the file in IGES format (a really old CAD interchange format that should be convertible to other formats), I looked for a React 3D library, and found React 3 Fiber which comes highly rated and recommended. It is a React wrapper for three.js which is the defacto standard 3D rendering package for browser/Javascript. I found it via a tutorial describing how to set up a viewer using it. The tutorial detailed file formats and how to export a model from Blender that would work seamlessly with the library. This looked like it was going to be easy. Not so fast…
The Hidden Cost of Third Party Libraries
In order to use the React 3 Fiber I would need to upgrade the version of React I was using (16). Some of the libraries and dependencies I used to for MQTT device communications only work with the earlier version. This is an all-to-typical issue encountered when piecing together a collection of resources to integrate them into something bigger. I resolved to upgrade to React 18 and fix the breaking changes somehow.
To do this I created a feature branch and modified the package.json file to include the newer React version and attempted a project rebuild. As the build failed I would use the logs to determine what dependency broke the build and searched for solutions. as usual, I was not the first person to face this issue and followed the trail of breadcrumbs to some solutions and workarounds until I was up and running again. And then I added React 3 Fiber and all of its dependencies, which fortunately did not introduce any additional blocks.
Now I could open Blender and convert my model from IGES to GLTF with recommended settings for React Three Fiber, put the file in the project Build folder, import it and view it in a matter of minutes. I had to hold myself back from adding textures and other details that were seen in the preview on GrabCAD that were missing in Blender. The recommended settings export GLTF in a binary format with the .glb suffix which is optimized for online delivery and uses any available hardware video acceleration in the browser. The GLTF format is a JSON file which I was delighted to find can be edited and previewed in VSCode using the three.js library that underpins React Three Fiber. It can even reverse out the JSON file from the binary version if you don’t have it.
