PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

0.1.1

npm

3d-model-gallery

Interactive 3D model gallery with Three.js - Display and navigate 3D models with smooth carousel navigation. Works with React, Next.js, and other frameworks.

3d3d-modelangularcarouseldreigalleryglbgltfmodelmodel-viewernextjsreactreact-three-fiberthreethreejsvue
All keywords (33)
webgl3d-carousel3d-gallery3d-model-gallery3d-product3d-showcase3d-viewerfbxinteractive-3dmodel-gallerynext.jsobjproduct-viewerr3freact-3d-carouselreact-componentthree.js
Published30 Nov 2025
Direct dependencies10
Transitive dependenciesNot calculated

README

Current package documentation

3D Model Gallery

npm version License: MIT

Interactive 3D model gallery for React with Three.js. Display and navigate 3D models with smooth carousel navigation.

✨ Features

  • 🎨 Interactive 3D model viewing
  • 🔄 Smooth carousel navigation
  • ⌨️ Keyboard navigation support
  • 📱 Responsive design
  • 🎯 Configurable height and scroll speed
  • 🖼️ Support for GLB, GLTF formats
  • ⚡ Built with React Three Fiber

📦 Installation

npm install 3d-model-gallery

Peer Dependencies:

npm install react react-dom three @react-three/fiber @react-three/drei

🚀 Usage

import { GalleryCarousel, ModelData } from '3d-model-gallery';

const models: ModelData[] = [
  {
    id: 1,
    name: 'My 3D Model',
    description: 'An awesome 3D model',
    instruction: 'Scroll to rotate',
    modelUrl: 'https://models.readyplayer.me/64bfa15f0e72c63d7c3934a6.glb',
    height: '80vh'
  }
];

function App() {
  return (
    <GalleryCarousel 
      models={models} 
      showNavigation={true}
      showArrows={true}
      showDots={true}
      height="80vh"
      scrollMultiplier={4}
    />
  );
}

📖 Props

PropTypeDefaultDescription
modelsModelData[]requiredArray of 3D models to display
showNavigationbooleanfalseEnable navigation controls
showArrowsbooleanfalseShow left/right arrows
showDotsbooleanfalseShow dot indicators
heightstring'80vh'Carousel height
scrollMultipliernumber4Rotation speed
isLoadingbooleanfalseShow loading state
errorstring | nullnullError message

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

📄 License

MIT © Contributors

🌟 Show Your Support

Give a ⭐️ if this project helped you!

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 15

Native requirements
10 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
tsup
Environment
{
  "local_name": "tsup",
  "alias": false,
  "peer_metadata": null
}
^8.0.0development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^18.3.1development
three
Environment
{
  "local_name": "three",
  "alias": false,
  "peer_metadata": null
}
^0.181.2development
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
^18.3.1development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^5.0.0development
@types/react
Environment
{
  "local_name": "@types/react",
  "alias": false,
  "peer_metadata": null
}
^18.0.0development
@types/three
Environment
{
  "local_name": "@types/three",
  "alias": false,
  "peer_metadata": null
}
^0.160.0development
@types/react-dom
Environment
{
  "local_name": "@types/react-dom",
  "alias": false,
  "peer_metadata": null
}
^18.0.0development
@react-three/drei
Environment
{
  "local_name": "@react-three/drei",
  "alias": false,
  "peer_metadata": null
}
^10.7.7development
@react-three/fiber
Environment
{
  "local_name": "@react-three/fiber",
  "alias": false,
  "peer_metadata": null
}
^9.4.0development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
>=18peer
three
Environment
{
  "local_name": "three",
  "alias": false,
  "peer_metadata": null
}
>=0.160.0peer
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
>=18peer
@react-three/drei
Environment
{
  "local_name": "@react-three/drei",
  "alias": false,
  "peer_metadata": null
}
>=10.0.0peer
@react-three/fiber
Environment
{
  "local_name": "@react-three/fiber",
  "alias": false,
  "peer_metadata": null
}
>=9.0.0peer

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "f91b4c3a940ace3bece9d8d9931cf01dbde3d171",
  "tarball": "https://registry.npmjs.org/3d-model-gallery/-/3d-model-gallery-0.1.1.tgz",
  "fileCount": 9,
  "integrity": "sha512-69c7VYnktRMeyhqGu+0uaASa6GTBUYgaJeVaU8dXtke9+sh4INscaB95k2Vhi8bjKrKr3ZsOAYiaG8RckpudDQ==",
  "signatures": [
    {
      "sig": "MEUCIQCsozs6gn8W2UD2m4XAs85tiSpxSlWy3k0G7UFKD+ePigIgQGyw3wU5mnDN8tIW5z9A/JJyz4cLxSY+IBYSXNxZu6o=",
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
    }
  ],
  "unpackedSize": 81082
}

Repository

PENDING
ashikjs/3d-model-gallery

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:36 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:eb888cba2bd4ea6091ae744dc6f0f2122c8122ba24db01bc0ea7b6e639b076c6

Other collected versions

0.1.430 Nov0.1.330 Nov0.1.230 Nov0.1.028 NovView all collected versions →