# Circular to Axial movement with Three.js

**URL:** <https://discourse.threejs.org/t/circular-to-axial-movement-with-three-js/64928>\
**Category:** Showcase\
**Tags:** animation\
**Created:** [May 1, 2024, 6:23pm UTC](https://discourse.threejs.org/t/circular-to-axial-movement-with-three-js/64928 "2024-05-01T18:23:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [May 1, 2024, 6:23pm UTC](https://discourse.threejs.org/t/circular-to-axial-movement-with-three-js/64928/1 "2024-05-01T18:23:09Z")

</div>

Circular to Axial movement with Three.js

The link

> **[cir\_axi.html](https://jrlazz.github.io/anim/cir_axi.html)**

Obs: Cylinder from 2 points code based on:

> [@Straight tube geometry](https://discourse.threejs.org/t/straight-tube-geometry/45946/3):
>
> The main problem is that i’m trying to make it appear in runtime but the fact that the cylinder geometry create itself from the center and grow from both side instead of only one make it look very bad on my project, i tried to post a video here but it says that the format is not supported. Can you give me an hand?

@prisoner849 … Dec 2022  
… Looks like you’re trying to put a tube from one point to another.

 ![cir_axi](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/9/f9cc1dc458b0b937bfb45071e24a7dabc29b1981.jpeg)

---

<div class="post-metadata">

**Author:** ![didi\_softwares](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didi_softwares/32/22686_2.png) [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)\
**Post date:** [May 1, 2024, 9:45pm UTC](https://discourse.threejs.org/t/circular-to-axial-movement-with-three-js/64928/2 "2024-05-01T21:45:30Z")

</div>

> Boa zé kkk tu é br  
> nice sample

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [May 3, 2024, 4:41am UTC](https://discourse.threejs.org/t/circular-to-axial-movement-with-three-js/64928/3 "2024-05-03T04:41:39Z")

</div>

As an alternative, you can also create those kinds of animations using Blender - which may be easier.

Here is my [Blender animation](http://philcrowther.com/WebGL/Viewer/ANM_FM2_lgr.html) of a fairly complicated airplane landing gear which has been imported into three.js. Press “G” to see it extend and retract.

Each of the struts has been given an animation.

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [May 3, 2024, 3:42pm UTC](https://discourse.threejs.org/t/circular-to-axial-movement-with-three-js/64928/4 "2024-05-03T15:42:08Z")

</div>

Hi @phil_crowther ,

I really liked Your animation with Blender… I’ll check it out this option 😉

PS: I put something else in the post, with some electrical components!