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