Project details
Starting point
VCGI brings together around ten trades: surveying, geotechnics, engineering, environment, equipment, earthworks, techniques, civil engineering, drainage, and its in-house tool Linaster. They had to fit on a single page, for clients and partners who speak three languages, without turning into yet another list of services.
The challenge
Three constraints drove the project. Visitors must never get lost in the scene. The machines' animations, prepared by Simon in Blender (27 animations: excavators, bulldozers, roller, dump truck, drone, trains…), had to run on the site exactly as they did in Blender. And the scene had to feel alive without weighing the geometry down further.
Process & Decisions
A fixed isometric camera, panning limited to dragging and no zoom: the overview is always there. Each trade is a white point on the map; on click, the camera settles on the area and a panel opens with the content. Simon's animations play exactly as he made them: I wrote the mapping between each machine and its animation, and we iterated together until all of them worked in the browser. The scene comes alive through shaders rather than more models.
Execution
The site is built with Vue 3 and Three.js (r163). The machines are animated by an AnimationMixer that maps each object to its Blender animation. The clickable points go through a Raycaster that moves the camera and opens the trade's panel. Shaders extend Three.js materials (onBeforeCompile) for wind in the trees, cloud shadows passing over the site and the waves sent out by the radio masts and the drone. Loading runs in three priority tiers (essential, secondary, additional) behind a screen that shows progress. GSAP and Swiper complete the interface, and the content is available in French, English and German.
A project like this one?
contact@valentingassend.comTry me for 3 days at a fixed price on a component or a pitch prototype: not invoiced if the result doesn't work for you. Reply within 72h.
See offers and rates