# 3d Carousel z position issue

**URL:** <https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449>\
**Category:** Questions\
**Created:** [January 14, 2025, 11:54am UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449 "2025-01-14T11:54:08Z")\
**Posts on this page:** 13\
**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:** [January 14, 2025, 11:54am UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/1 "2025-01-14T11:54:08Z")

</div>

Ok I did it via shaders I need to be able to bend the vertices and add some effects… rotate the carousel now I am stuck at the raycaster detection I need the meshes to be clickable to open a link but the regular raycaster dose not work, how can I solve this?

> **[Shader Carousel](https://webdesign-flash.ro/p/sc/)**
>
> I've dreamt of bringing this vision to life since I first started developing in the 2000s. For nearly 25 years, this idea has lived in my mind—waiting for the right moment, the right tools, and the right technology. And now, at last, it's possible!

Thank you!

---

<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:** [January 14, 2025, 5:39pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/2 "2025-01-14T17:39:52Z")

</div>

I don’t know if this is responsive to your question and I don’t use const much. But it seems odd to use const as a temporary variable (const worldPosition) within a subroutine.

My understanding is that variables created within a subroutine are destroyed when you exit the subroutine. But if const prevents that destruction, then you will have several const variables with the same name.

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [January 14, 2025, 6:23pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/3 "2025-01-14T18:23:23Z")

</div>

> [@Tibi](#):
>
> they all have the same value

You’re not actually moving the meshes. You’re updating their geometry’s vertices. All the meshes remain at their initial position (0, 0, 0). The position you’re seeing is that of their parent, `this.carouselMeshGroup`.

---

<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:** [January 15, 2025, 8:57am UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/4 "2025-01-15T08:57:49Z")

</div>

Ok I did it via shaders I need to be able to bend the vertices and add some effects… rotate the carousel now I am stuck at the Raycaster detection I need the meshes to be clickable to open a link but the regular Raycaster dose not work, how can I solve this?

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

 ![444](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/d/4d0ee3addb9c543cb9b5c2b167049501d6bb8e2d.jpeg)

Thank you!

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [January 15, 2025, 5:13pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/5 "2025-01-15T17:13:55Z")

</div>

You have `n` planes evenly distributed around a 360° circle. Get the clicked plane’s index, multiply it by the angle step (the division of 2π by `n`). You may also need to adjust the `angleOffset` based on the carousel initial rotation.

Here is the [jsFiddle](https://jsfiddle.net/wpudkzyx/1/), and the relevant code:

**Intersection:**

```js
const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
const targetQuat = new THREE.Quaternion()
const axis = new THREE.Vector3(0, 1, 0)

function onClick(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

  raycaster.setFromCamera(mouse, camera)

  const intersects = raycaster.intersectObjects(group.children)

  const angleStep = (2 * Math.PI) / count;

  if (intersects.length > 0) {
    const clickedPlane = intersects[0].object

    const planeIndex = group.children.indexOf(clickedPlane);

    const angle = angleStep * planeIndex - angleOffset;

    targetQuat.setFromAxisAngle(axis, angle)

    startRotation()
  }
}

```

**Animation:**

```js
const duration = 1
const clock = new THREE.Clock()
let progress = 0
let rotate = false

function startRotation() {
  rotate = true
  progress = 0
  clock.start()
}

// Call this function within the animation loop
function animateRotation() {
  if (!rotate) return
  progress += clock.getDelta()
  const step = Math.min(1, progress / duration)

  group.quaternion.slerp(targetQuat, step)
  if (step === 1) rotate = false
}

```

---

<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:** [January 15, 2025, 5:26pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/6 "2025-01-15T17:26:15Z")

</div>

Thank you guys I figured it out…

I did the bending in the vertex shader and created fake meshes for the raycaster… is almost perfect good enoug…

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

---

<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:** [January 15, 2025, 9:18pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/7 "2025-01-15T21:18:22Z")

</div>

I’ve done it this is what I wanted to do add liquid ripple as well [Start](https://webdesign-flash.ro/ht/carousel/)

---

<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:** [January 16, 2025, 4:46pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/8 "2025-01-16T16:46:55Z")

</div>

I think I am done… added postprocessing as well… [Start](https://webdesign-flash.ro/ht/carousel/)

 ![444](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/e/de50625be7e14a6246eaaeb8aa4f92211819df91.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:** [January 17, 2025, 8:10pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/9 "2025-01-17T20:10:38Z")

</div>

Done an infinte slider as well [Start](https://webdesign-flash.ro/ht/slider/)

---

<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:** [January 19, 2025, 7:49pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/10 "2025-01-19T19:49:54Z")

</div>

I have done another one [Start](https://webdesign-flash.ro/ht/circ/)

---

<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:** [January 24, 2025, 3:05pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/11 "2025-01-24T15:05:14Z")

</div>

I manage to do the infinite spiral is soo cool [Start](https://webdesign-flash.ro/ht/spiral/)

 ![spiral](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/e/ae11c6b5ef467d2430816e5690b0a1f03a1d8916.jpeg)

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [January 24, 2025, 3:34pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/12 "2025-01-24T15:34:40Z")

</div>

Looks great, but it seems to be slowing down. If I’m correct, you’re creating a new geometry for each plane. Instead, you could generate one geometry and reuse it, adjusting the mesh rotations as needed. To optimize further, you could use `InstancedMeshes` along with a texture atlas.

---

<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:** [January 24, 2025, 5:52pm UTC](https://discourse.threejs.org/t/3d-carousel-z-position-issue/76449/13 "2025-01-24T17:52:29Z")

</div>

I don’t think instanced mesh is required for this… probably is slowing down because of the textures they are huge, I need to optimimize those.