If you visit Volkswagen Mexico’s car configurator (Virtual Studio), they have a feature which allows you to load and unload luggage into the car boot. You can see an image of what this looks like here (https://global.discourse-cdn.com/standard17/uploads/threejs/original/3X/6/8/680b44686ee87320b1caeb1ec0b203d4a770f5a3.jpeg). My hunch is they have created 3D models for the car and the luggage and then animated them. How is that possible? I’m new to threejs so my animation knowledge is a bit limited. Thanks!
i doubt that this is animated by code, most likely keyframe animations. if you know blender it’s not that hard. in threejs you just call .play(), but the effort is in the modelling software.
I noticed you asked the same question on the Volkswagen Showcase. If we talk about the animation itself, whether it’s done in another environment or Three.js, its principle is relatively simple:
- the luggage animation path is basically made of 2 perpendicular lines, i.e. → and then ↓ for unloading, or ↑ and then ← for loading (possibly another segment to “raise” the luggage from the back of the car before unloading)
- since the luggage doesn’t rotate or anything like that, if it were to be done in Three.js it would probably be just a matter of iterating through the luggage objects with a
forand translating those objects along the said path, the latter being possible via some Object3D’s .translateX(), … translateZ(), .translateOnAxis(), altering the object’s position to move it along a certain distance in a certain direction, or tweening
If you’re very new to Three.js and you don’t know the basics yet, here is a nice introduction to such transformations. The animation thing is most often done via requestAnimationFrame() - a simple example here, except that in this case, you’d be performing a small translation step instead of a rotational one on the object.
Thank you for this breakdown!