As part of our new company website, I wanted to generate some eye-catching visuals.
You can see the finished site here : http://didacticservices.co.uk
Our company specialises in high-tech engineering, and our website should reflect that, while also being engaging - The website is primarily a showcase for our range... more like a showroom than a technical handbook.
I had started experimenting with 3D in the web a few years back, and tried using three.js directly, as well as number of other frameworks.
I had also looked at using game engine exporters such as godot, but these had all felt clumsy
Model-viewer
Thankfully, plugins for this have matured a bit, and i was now able to use google model-viewer, for a quick intergration.
model-viewer is built on three.js, so has a solid backend, but helps by providing some simple touch controls, orbit, and camera settings.
Conversion
DWG --> GLB --> Blender --> GLB --> GLB*MESHOPT
My Files start life as .dwg files - A type of annoyingly propriotory CAD file.
In order to use these online I need to go through a fairly painstaking process of conversion.
First we export them to .GLB format
The .DWG editor is windows-only, so we use a remote-desktop machine to do this work
Then we import to Blender.
We use plugins AnimAll and Govie Tools to assist in animating
(GLB format supports only one animation track, so these tools help to enforce this, and merge animations, or convert mesh animations to keys)
After Blender, we can then re-export back to .GLB format.
Are we done? No - Not yet.
In order to reduce the file size and speed up the webpage, we want to use a program called gltfpack This will help to optimise the mesh
We have to use a meshopt unpacker extension later! but it reduces load time for the broweser so this is still worth while!
Side note : Some files dont optimise very well - moving transparent parts in particular seem to have issues.
Gltfpac is a command line app, but we have dozens of these to do, so we will use a quick automater app that uses a bash shell to do this.
Render
The files are then uploaded to the sites content bucket, where they are rendered with a custom vue3 component, to allow interactivity and to keep consistant stylng across the site
Finally - We have our animated .GLB
Top comments (0)