Bend, Aim, Fling: Turning the Eiffel Tower into a Catapult with Three.js

Editor’s note: Another addition to our Three.js party marathon, celebrating the first Three.js conference coming to Paris this September 🎉 This time, Yuri has cooked up a very fun interactive demo where you can literally catapult yourself from the Eiffel Tower all the way to Maison de la Chimie, the iconic venue for the conference. We’d also like to thank Cesium ion for supporting this experiment and helping us make it available throughout the conference celebration. The Concept The idea is simple: bend the Eiffel Tower, aim, and fling yourself across Paris. The catapult is built as an interactive Three.js scene, with the tower acting as a springy, deformable launcher. Dragging it changes its shape and builds up energy for the launch; release sends the ball flying in the direction you’ve aimed. You can fling yourself pretty much anywhere across Paris - but the real challenge is getting your trajectory just right and landing at the conference venue. From there, the demo takes care of the trajectory, collisions and landing, with the whole thing wrapped up as a playful physics experiment. But the Eiffel Tower and Maison de la Chimie aren’t just floating in a hand-built scene. The Paris around them comes from Cesium ion, which provides access to streamed 3D geospatial content and Google’s Photorealistic 3D Tiles. That gives the experiment a real-world geographic context while still letting Three.js handle the interactive experience, animation and physics on top. So underneath the slightly ridiculous premise, there’s a nice mix of interactive deformation, physics, real-world 3D data and web-based rendering, all coming together to turn a trip across Paris into a rather unconventional way of getting to the conference. 🇫🇷 Ready to fling yourself to Paris? The very first Three.js conference is almost here! If you’re still deciding whether to make the trip, consider this your launch signal. Use code CODROPS for 15% off your ticket and launch yourself to the conference → How it works Physics If you follow Three.js news closely, you’ve probably heard of an amazing library called Wiggle made by Xavier. The idea behind it is that we can add bones to any object. But not just to bake some boring animations. We can then apply spring physics to make it wiggle, wobble, and bounce in an interactive way. And oh my, how much fun is that! Just look at it and go ahead and try it yourself. Now, of course, we can use this technique on any object, so I decided to try rigging the Eiffel Tower model. My first attempt, in my opinion, exceeded all my expectations, and I still think this is the one that should have gone into production. Just look at this cutie! Jokes aside, you can see the number of bones and basically how it works here. Paris On the other hand, the organizer of the upcoming Three.js conference, David Ronai, recently posted a new repo featuring cinematic zoom, based on Garret Johnson’s 3D Tiles and the amazing CesiumJS. So I just couldn’t pass up this coincidence. Now the tower should bend in the real-world Paris! It’s actually as easy as adding a 3D model. I just needed to collapse the original scanned version of the 3D tower, and voilà, we have a spring-based Eiffel Tower right in the real city. (By the way, we can still see the original tower collapsed on the ground.) The rest is easy. I added a ball to the tip, added a physics engine, and now you can literally throw yourself into the conference location! Hope you’ll have fun doing that 😀 And I hope to see you in Paris! <3