3dscroll

📹 Watch the tutorial → x.com/DieselSharma/status/1949003509309080062

A plug-and-play React + Three.js scroll animation component for 3D .glb models.

✨ Features

• 🚀 Scroll-based 3D transitions
• 🎯 Animate position, rotation, scale, and opacity
• ⚙️ Fully customizable with phases array
• 🧩 Built with three, @react-three/fiber, @react-three/drei, and gsap

📦 Installation

npm install 3dscroll

🚀 Usage

"use client";
import { ThreeScene } from "3dscroll";

export default function App() {
  const phases = [
    { position: [0, 0, -15], rotation: [0, 0, 0], scale: 1, opacity: 1 },
    { position: [0, 5, -15], rotation: [0, 0, 0], scale: 1.5, opacity: 0.5 },
    { position: [0, 0, -15], rotation: [0, 0, 0], scale: 2, opacity: 0.2 },
    { position: [0, 5, -15], rotation: [0, 0, 0], scale: 1, opacity: 1 },
  ];

  return (
    <div style={{ background: "black", minHeight: "100vh" }}>
      <ThreeScene
        modelPath="/model.glb"
        phases={phases}
        phaseSize={2} // optional, default is 2
      />
    </div>
  );
}

📁 Props

| Prop | Type | Description | |-------------|----------|-----------------------------------------------------------| | modelPath | string | Path to your .glb model (must be placed in public/) | | phases | array | Animation steps for position, rotation, scale, opacity | | phaseSize | number | Scroll height multiplier per phase (default = 2) |

🔧 Built With

• three
• @react-three/fiber
• @react-three/drei
• gsap
• react, typescript, and rollup for bundling

🧠 Author

Made with ❤️ by @3diesel
Follow on Twitter/X