# Film strip carousel

**URL:** <https://discourse.threejs.org/t/film-strip-carousel/77416>\
**Category:** Questions\
**Created:** [February 2, 2025, 11:37am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416 "2025-02-02T11:37:56Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![trueshko](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trueshko/32/26031_2.png) [@trueshko](https://discourse.threejs.org/u/trueshko)\
**Post date:** [February 8, 2025, 1:47pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/21 "2025-02-08T13:47:34Z")

</div>

> [@Tibi](#):
>
> So what I can’t figure out is how to perfetly align the mehes on the curve with no gaps and also to be able to add more and they shuld just continue on the right and left, I hope it makes sense.  
> [Glitch :･ﾟ✧](https://glitch.com/edit/#!/enshrined-fierce-brie?path=script.js%3A26%3A14)

Here I made such [a version](https://glitch.com/edit/#!/gabby-veil-coyote?path=script.js%3A151%3A24) from your code.

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [February 8, 2025, 3:19pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/22 "2025-02-08T15:19:02Z")

</div>

This is amazing thank you so much, can you do the wrapping as well please I am lost in this code…

Is it possible to create a version just with normal geometries on top of the shader one, I will need that for raycasting.

My brain is fried at this point trying this is like I don’t understand anything 🙂

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [February 8, 2025, 6:50pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/23 "2025-02-08T18:50:31Z")

</div>

If you have time can you help me center it I mean the center mesh should be in the center and the rest distributed left and right, the origin point should be in the center now on the left, and the wrapping 🙂

I tried on my own but failed I will keep trying…

I just don’t understand the darn math here… I tried chatgpt it makes such a mess…

> **[Glitch Code Editor ･ﾟ✧](https://glitch.com/edit/#!/puddle-pointy-palladium?path=script.js%3A147%3A67)**
>
> Simple, powerful, free tools to create and use millions of apps.

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [February 9, 2025, 1:27pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/24 "2025-02-09T13:27:33Z")

</div>

Lets say there are 17 mehes the center mesh 8 should be on the center of the curve the rest distributed left and right… I can’t figure it out, tried ChatGPT is a disaster…

I am willing to pay to get this done I am lost 🙂

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [February 10, 2025, 5:08pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/25 "2025-02-10T17:08:07Z")

</div>

Thank you @ [trueshko](https://discourse.threejs.org/u/trueshko), we did the shader versio perfectly…

I need help with the normal vetritces version I need this for raycasting and positioning some html elements, I am completely lost in the math behind this, I need help )

> **[Glitch Code Editor ･ﾟ✧](https://glitch.com/edit/#!/nebulous-puzzle-drink?path=script.js%3A215%3A45)**
>
> Simple, powerful, free tools to create and use millions of apps.

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [February 13, 2025, 7:55pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/26 "2025-02-13T19:55:10Z")

</div>

I did itm, huge thank you @ [trueshko](https://discourse.threejs.org/u/trueshko) and @ [prisoner849](https://discourse.threejs.org/u/prisoner849)

[https://webdesign-flash.ro/ht/carousel/filmstrip.html](https://webdesign-flash.ro/ht/carousel/filmstrip.html)

 ![Untitled-1-Recovered](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/6/e60f5b47c31aa753b9b9205070a5ccf0dd1729bd.jpeg)

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [February 13, 2025, 9:22pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/27 "2025-02-13T21:22:59Z")

</div>

One question here how can I change visually this curve to create other variations?

// this.curve = new THREE.CatmullRomCurve3([  
// vec3(-7, 1, -1),  
// vec3(-1, 1.25, -1.2),  
// vec3(-2, -0.5, 2),  
// vec3(3, -0.5, 2),  
// vec3(2, 1, -1),  
// vec3(7, 1, -1)  
// ], false, “catmullrom”, 0.9);

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [March 7, 2025, 6:41am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/28 "2025-03-07T06:41:54Z")

</div>

Done it here [Shader Carousel](https://webdesign-flash.ro/p/sc/filmstrip-preset-2.html)

Thank you for the help.

[Previous page](https://discourse.threejs.org/t/film-strip-carousel/77416.md?page=1)