# Interactive Ducati desmodromic valve train animation

**URL:** <https://discourse.threejs.org/t/interactive-ducati-desmodromic-valve-train-animation/30394>\
**Category:** Showcase\
**Tags:** interactive, animation, mechanics\
**Created:** [September 30, 2021, 11:21am UTC](https://discourse.threejs.org/t/interactive-ducati-desmodromic-valve-train-animation/30394 "2021-09-30T11:21:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [September 30, 2021, 11:21am UTC](https://discourse.threejs.org/t/interactive-ducati-desmodromic-valve-train-animation/30394/1 "2021-09-30T11:21:12Z")

</div>

Ladies, Gents, Bikers,  
I’ve created a fully rotatable, zoomable and pannable model of a Ducati Testastretta Evoluzione 4-valve cylinder head **_in motion_** , including all moving parts (camshafts, rockers, shafts, valves, shims, auxiliary springs). You can include or exclude any of the above in the animation, modify animation speed, start or stall the animation.  
Pretty well optimised (low draw-call-count) for best performance even on mobile devices).  
Enjoy!

**Update (20211007):**  
Following an exchange via PM I got encouraged to publish more details about this project, so here goes:

I’m aware that I’m not advancing the understanding or application of three.js as such. Obviously, I’m particularly weak on the materials and lighting side of three.js.

The foremost challenge for me was on the geometry side:

- finding and disassembling a genuine Ducati Testastretta cylinder head and acquiring the geometry information of all parts involved.
- modelling most of the parts in Cinema4D
- hard-coding the purely rotationally-symmetrical parts as THREE.LatheBufferGeometry/ies
- hard-coding the springs as two(!) overlapping THREE.TubeBufferGeometry/ies each, to fake the spring bending part of the animation
- exporting the geometry from Cinema4D as VRML
- importing those \*.wrl files into my viewer.

For the optimisation, I hard-coded geometries where possible, merged BufferGeometries where applicable, combined the partners in Boolean operations in Cinema4D during VRML export into one object each. This brings the count of draw-calls per frame down to around 80. All in all, this yields approx… 35 fps on my iPhone 5S while on my iMac of 2014 and my MacBookAir of 2017 the full 60 fps are maintained, at least at the initial zoom level. I did notice however, that iMac and MacBook Air both seem to be fill-rate-limited. Because after zooming in (more pixels on screen covered), the frame rate drops and the fans go off.

As far as the animation goes, within my Cinema4D model I collected a multi-column, 72 row array of values for the rocking angles of the closing and opening rockers, at 5° intervals of the camshafts, as well as the (local) longitudinal travel values of the valves. For any intermediate camshaft angles, I’m interpolating.

I’ve described the “how I did it” on my blog, which is - alas - German only, but has many photographs and sketches, so you might enjoy it nevertheless:

[https://vielzutun.ch/wordpress/?p=5764](https://vielzutun.ch/wordpress/?p=5764)

Regards,

Chris

> **[DESMO Visualizer by vielzutun.ch](https://vielzutun.ch/wordpress/Desmo/Three.js/Main.html)**
>
> Interactive animation of a Ducati Testastretta Evoluzione 4-valve cylinder head, including all moving parts, which can be selectively shown or hidden.

---

<div class="post-metadata">

**Author:** ![Ivan\_Arakistain](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ivan_arakistain/32/23917_2.png) [@Ivan\_Arakistain](https://discourse.threejs.org/u/Ivan_Arakistain)\
**Post date:** [February 1, 2022, 4:38am UTC](https://discourse.threejs.org/t/interactive-ducati-desmodromic-valve-train-animation/30394/2 "2022-02-01T04:38:23Z")

</div>

Wow! Is it open source?

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [February 1, 2022, 5:07am UTC](https://discourse.threejs.org/t/interactive-ducati-desmodromic-valve-train-animation/30394/3 "2022-02-01T05:07:15Z")

</div>

The animation is in the public domain. It’s source and data is not.

---

<div class="post-metadata">

**Author:** ![mroy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mroy/32/73262_2.png) [@mroy](https://discourse.threejs.org/u/mroy)\
**Post date:** [October 10, 2026, 8:38am UTC](https://discourse.threejs.org/t/interactive-ducati-desmodromic-valve-train-animation/30394/4 "2026-10-10T08:38:59Z")

</div>

> [@vielzutun.ch](#):
>
> - Ducati Testastretta

That is beautiful. I love how you have done the reflections. Is that your bike? Hard to figure out because of the geometric distortion, but it looks like a 998.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [October 10, 2026, 8:57am UTC](https://discourse.threejs.org/t/interactive-ducati-desmodromic-valve-train-animation/30394/5 "2026-10-10T08:57:23Z")

</div>

The reflections are simple environment reflection mappings. There’s a Three.js example on how it’s done:

> **[three.js examples](https://threejs.org/examples/#webgl_materials_envmaps)**

I used to have a Ducati Monster 1200S having the same 4-valve desmodromic Testastretta engine. But I bought a used and defective cylinder head of the same type to work from for this animation. [See this](https://vielzutun.ch/wordpress/?p=5764) for more. (Blog post in German)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [October 10, 2026, 10:37am UTC](https://discourse.threejs.org/t/interactive-ducati-desmodromic-valve-train-animation/30394/6 "2026-10-10T10:37:56Z")

</div>

Wow sick. TIL. Great visualisation man!