3d Carousel z position issue

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/

Thank you!

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.

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.

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/

Thank you!

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, and the relevant code:

Intersection:

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:

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
}

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/

1 Like

I’ve done it this is what I wanted to do add liquid ripple as well Start

I think I am done… added postprocessing as well… Start

1 Like

Done an infinte slider as well Start

I have done another one Start

I manage to do the infinite spiral is soo cool Start

2 Likes

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.

1 Like

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.