Skip to main content
A dynamic and interactive 3D carousel component using Three.js and Motion-V, allowing smooth infinite rotation and user-controlled interactions.

​
Installation

npm install three motion-v

​
Usage

<script setup lang="ts">
import { Carousel3D } from '@/components/visualization'

const items = [
  '/image1.jpg',
  '/image2.jpg',
  '/image3.jpg',
  '/image4.jpg',
]
</script>

<template>
  <Carousel3D :items="items" :width="450" :height="600" />
</template>

​
Props

Prop NameTypeDefaultDescription
itemsunknown[][]List of images or elements to be displayed in the carousel.
classstring""Additional CSS classes for styling the carousel overlay.
containerClassstring""CSS classes for styling the carousel container.
widthnumber450Width of individual carousel items.
heightnumber600Height of individual carousel items.

​
Credits

  • Built using Three.js for 3D rendering
  • Utilizes Motion-V for seamless animations
  • Thanks @safakdinc for sharing this component

Build docs developers (and LLMs) love

Get started for freeTalk to us