# 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:** 20\
**Page:** 1

<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 2, 2025, 11:37am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/1 "2025-02-02T11:37:57Z")

</div>

I have built a 3D carousel using mehes with vertices bent in the vertex shader and it works as I want [Start](https://webdesign-flash.ro/ht/carousel/)

I would like to bend the meshes like a film strip but I am lost, I tried ChatGPT but no luck any help is appreciated it

[https://www.pngwing.com/en/free-png-ttolf](https://www.pngwing.com/en/free-png-ttolf)

Thank you!

---

<div class="post-metadata">

**Author:** ![LearningMike](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/learningmike/32/48097_2.png) [@LearningMike](https://discourse.threejs.org/u/LearningMike)\
**Post date:** [February 2, 2025, 11:51am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/2 "2025-02-02T11:51:11Z")

</div>

you might want to look into splines, i haven’t used ThreeJS SplineCurves yet but in Unreal that’s what i use in level design to bend meshes like a bridge or a pipe.

---

<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 2, 2025, 12:25pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/3 "2025-02-02T12:25:53Z")

</div>

Thank you the thing is that I need this in the vertex shader so the math must be done in the vertex, I don’t think Spline would help in this case.

---

<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 3, 2025, 8:47pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/4 "2025-02-03T20:47:49Z")

</div>

You can create a plane which width will the same as the number of widht segments. Then vertices x coordinates will an integers, and this values сould be used as indeces to set its realy x and z coordinates from the 2d-spline. If you want to do it in the vertex shader, you can attach a spline coordinates as a texture.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 4, 2025, 11:01am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/5 "2025-02-04T11:01:16Z")

</div>

Tried it with `CatmullRomCurve3` and animated textures 🤔

Video:

Demo: [https://codepen.io/prisoner849/full/dPbERZx](https://codepen.io/prisoner849/full/dPbERZx)

---

<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 4, 2025, 4:17pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/6 "2025-02-04T16:17:36Z")

</div>

Thank you man this is what I need, I manage to replicate this in the vertex shader since I need it in the vertex , it works perfect with one mesh but I can’t figure out the math for multiple meshes to stay connected

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 4, 2025, 5:57pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/7 "2025-02-04T17:57:24Z")

</div>

@Tibi  
I see no difficulties to achieve the desired result, using vertex shader. @trueshko gave you a nice hint about to put spline data into `DataTexture`. 🤔

---

<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 4, 2025, 6:21pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/8 "2025-02-04T18:21:35Z")

</div>

Ok guys I almost did what I needed but I can’t figure out how to calculate the plane with in the fragment shader so that the meshes are arranged correctly with no gaps … thank you

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 Code Editor ･ﾟ✧](https://glitch.com/edit/#!/enshrined-fierce-brie?path=script.js%3A26%3A14)**
>
> 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 5, 2025, 5:39pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/9 "2025-02-05T17:39:31Z")

</div>

I give up I can’t figure out the math, any help is appreciated it.

Willing to pay for this just to get it done…

---

<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 7, 2025, 4:20am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/10 "2025-02-07T04:20:43Z")

</div>

I’m trying now to do this by passing the position to the shader via a data texture. Like in [this example](https://codepen.io/prisoner849/pen/WNQNdpv).

---

<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 7, 2025, 5:44am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/11 "2025-02-07T05:44:52Z")

</div>

If you can figure out the math so that we can add as many meshes as we want it is a done deal, that is what is missing.

Thank you for helping!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 7, 2025, 8:39am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/12 "2025-02-07T08:39:23Z")

</div>

For now, I could put instanced planes along a spline, whose data was written to `DataTexture` 🤔  
If/when I have some more progress, I’ll make a post here.

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/b/5b69519fb569d4573d2431aff4e941e3185f1b9e.png)

---

<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 7, 2025, 8:56am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/13 "2025-02-07T08:56:00Z")

</div>

The issue is that I need fragment shader so that I can distort the uvs, this is why I need individual meshes, aybe I am seeing this wrong.

Please share the code if you can.

Thank you.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 7, 2025, 9:31am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/14 "2025-02-07T09:31:30Z")

</div>

This is the best I could achieve.

Picture

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/e/eee3eda91802a959ff25e7d882ff1b6ca67bfbdd.jpeg)

Demo: [https://codepen.io/prisoner849/full/ogvrJxv](https://codepen.io/prisoner849/full/ogvrJxv)

Not sure, if it helps, but I leave it here 😅

---

<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 7, 2025, 9:55am UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/15 "2025-02-07T09:55:19Z")

</div>

Holy crap 🙂

Thank you sooo much, I will start digging into this but it looks like what I need.

If you have time can you address the number of mehes basically if I add for example 20 meshes they should remain at the same size visually now the entire curve scales, this is what I could not solve, and put me on hold.

THANK YOU!!!

---

<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 7, 2025, 8:21pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/16 "2025-02-07T20:21:04Z")

</div>

I am looking into this and is great ut why is it not smooth on scroll no matter how I adjust the smoothness is jaggery?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 7, 2025, 8:29pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/17 "2025-02-07T20:29:12Z")

</div>

Added these lines:

```javascript
splineData.magFilter = THREE.LinearFilter;
splineData.minFilter = THREE.LinearFilter;

```

---

<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 7, 2025, 8:43pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/18 "2025-02-07T20:43:02Z")

</div>

> [@prisoner849](#):
>
> ```javascript
> splineData.magFilter = THREE.LinearFilter;
> splineData.minFilter = THREE.LinearFilter;
> 
> ```

This seams to fix it, thank you 🙂 Is not perfect but I gess this is how threejs randers this stuff

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 7, 2025, 8:46pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/19 "2025-02-07T20:46:34Z")

</div>

> [@Tibi](#):
>
> Is not perfect

You are always free to find a better way 🙂 🤝

---

<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 7, 2025, 8:49pm UTC](https://discourse.threejs.org/t/film-strip-carousel/77416/20 "2025-02-07T20:49:55Z")

</div>

I know man, don’t get me wrong is great.

Thank you again.

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