--- title: Bend, Aim, Fling: Turning the Eiffel Tower into a... description: An interactive Three.js demo turns the Eiffel Tower into a springy catapult that flings a ball across a photorealistic 3D reconstruction of Paris, letting... canonical: https://daily.dev/posts/bend-aim-fling-turning-the-eiffel-tower-into-a-catapult-with-three-js-kys2duatr twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Bend, Aim, Fling: Turning the Eiffel Tower into a Catapult with Three.js | daily.dev og:description: An interactive Three.js demo turns the Eiffel Tower into a springy catapult that flings a ball across a photorealistic 3D reconstruction of Paris, letting... og:url: https://daily.dev/posts/bend-aim-fling-turning-the-eiffel-tower-into-a-catapult-with-three-js-kys2duatr og:image: https://api.daily.dev/og/posts/KYs2duATr.png og:image:alt: Bend, Aim, Fling: Turning the Eiffel Tower into a Catapult with Three.js og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Bend, Aim, Fling: Turning the Eiffel Tower into a Catapult with Three.js **[Codrops](https://daily.dev/sources/codrops)** · 4 min read · 1 upvotes · 0 comments ## Summary An interactive Three.js demo turns the Eiffel Tower into a springy catapult that flings a ball across a photorealistic 3D reconstruction of Paris, letting users try to land at Maison de la Chimie, venue for the first Three.js conference. The build combines the bone-based spring physics library Wiggle for tower deformation with real-world geospatial data from Cesium ion and Google's Photorealistic 3D Tiles, plus a cinematic zoom technique from a repo by conference organizer David Ronai. The piece also promotes the conference with a 15% discount code. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I add spring physics and bone-based deformation to a 3D model in Three.js? Use the Wiggle library, which adds bones to any Three.js object and applies spring physics to make it wiggle, wobble, and bounce interactively rather than relying on baked animations. It was used to rig an Eiffel Tower model, letting users drag and bend the tower like a springy launcher in a physics-based demo. _Developers exploring interactive Three.js physics can find demos and write-ups like this through daily.dev._ ### How do I add real-world photorealistic 3D city data to a Three.js scene? Stream geospatial content into the scene using Cesium ion, which provides access to Google's Photorealistic 3D Tiles alongside CesiumJS for rendering. This gives a Three.js scene real-world geographic context, such as an accurate 3D reconstruction of Paris, while Three.js still handles interactivity, animation, and physics on top. _daily.dev surfaces creative coding techniques for developers combining Three.js with geospatial data._ ## Similar posts on daily.dev - [When Cells Collide: The Making of an Organic Particle Experiment with Rapier & Three.js](https://daily.dev/posts/when-cells-collide-the-making-of-an-organic-particle-experiment-with-rapier-three-js-f187oqmwb) · Codrops · 0 upvotes · 0 comments - [When Community Becomes UI: Building the Website for the First Three.js Conference](https://daily.dev/posts/when-community-becomes-ui-building-the-website-for-the-first-three-js-conference-7wnsbhrf1) · Codrops · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#3d](https://daily.dev/tags/3d), [#threejs](https://daily.dev/tags/threejs), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/bend-aim-fling-turning-the-eiffel-tower-into-a-catapult-with-three-js-kys2duatr) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Bend, Aim, Fling: Turning the Eiffel Tower into a Catapult with Three.js","url":"https://daily.dev/posts/bend-aim-fling-turning-the-eiffel-tower-into-a-catapult-with-three-js-kys2duatr","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/bend-aim-fling-turning-the-eiffel-tower-into-a-catapult-with-three-js-kys2duatr"},"datePublished":"2026-09-01T12:45:34.836Z","dateModified":"2026-09-01T12:46:02.071Z","description":"An interactive Three.js demo turns the Eiffel Tower into a springy catapult that flings a ball across a photorealistic 3D reconstruction of Paris, letting...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c97ea55384ae910d9cc4aa74d88eb826?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c97ea55384ae910d9cc4aa74d88eb826?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/bend-aim-fling-turning-the-eiffel-tower-into-a-catapult-with-three-js-kys2duatr","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,3d,threejs,creative-coding","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Bend, Aim, Fling: Turning the Eiffel Tower into a Catapult with Three.js"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/bend-aim-fling-turning-the-eiffel-tower-into-a-catapult-with-three-js-kys2duatr#faq","mainEntity":[{"@type":"Question","name":"How can I add spring physics and bone-based deformation to a 3D model in Three.js?","acceptedAnswer":{"@type":"Answer","text":"Use the Wiggle library, which adds bones to any Three.js object and applies spring physics to make it wiggle, wobble, and bounce interactively rather than relying on baked animations. It was used to rig an Eiffel Tower model, letting users drag and bend the tower like a springy launcher in a physics-based demo. Developers exploring interactive Three.js physics can find demos and write-ups like this through daily.dev."}},{"@type":"Question","name":"How do I add real-world photorealistic 3D city data to a Three.js scene?","acceptedAnswer":{"@type":"Answer","text":"Stream geospatial content into the scene using Cesium ion, which provides access to Google's Photorealistic 3D Tiles alongside CesiumJS for rendering. This gives a Three.js scene real-world geographic context, such as an accurate 3D reconstruction of Paris, while Three.js still handles interactivity, animation, and physics on top. daily.dev surfaces creative coding techniques for developers combining Three.js with geospatial data."}}]} ```