Create 3D Spiral Carousel

Questions
1

I want to recreate 3d spiral carousel that looks like “rotating stairs” from this website. So far i succeful to create rotating stairs shape with this code :

import * as THREE from 'three'
import { type MutableRefObject, useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Image, type ImageProps, useScroll } from '@react-three/drei'
import { easing } from 'maath'
import './3d-util'

export function Carousel({ radius = 2, count = 8 }) {
  const groupRef: MutableRefObject<THREE.Group | null> = useRef(null)
  const scroll = useScroll()

  useFrame((state, delta) => {
    if (groupRef.current) {
      groupRef.current.rotation.y = scroll.offset * (Math.PI * 2)
    }

    state.events.update?.()
    state.camera.lookAt(0, 0, 0)
  })

  return (
    <group ref={groupRef}>
      {Array.from({ length: count }, (_, i) => (
        <Card
          key={i}
          url={i === 0 ? '/images/test.png' : '/images/og-image.png'}
          position={[
            -Math.sin((i / count) * Math.PI * 2) * radius,
            -0.2 * i,
            Math.cos((i / count) * Math.PI * 2) * radius,
          ]}
          rotation={[0, -(i / count) * Math.PI * 2, 0]}
        />
      ))}
    </group>
  )
}

export function Card({ url, ...props }: ImageProps & { url: string }) {
  const ref = useRef<THREE.Mesh>(null)

  useFrame((_state, delta) => {
    easing.damp3(ref.current!.scale, 1.2, 0.1, delta)
    easing.damp(ref.current!.material, 'radius', 0.1, 0.2, delta)
  })

  return (
    <Image ref={ref} url={url} transparent side={THREE.DoubleSide} {...props}>
      <bentPlaneGeometry args={[0.1, 1, 1, 20, 20]} />
    </Image>
  )
}

but there something i cant replicate:

  • I cant replicate scroll based rotation and positioning
  • Currently my code just rotate the y angle but cannot make the card at the right position

I want to replicate their rotating interaction which is the images/card moving to the right and going to up like rotating stairs. how can i do this? is there any example that looks like my specifications? thank you

2

Here it is Shader Carousel