Spline 3D Scene Showcase

Integrate interactive 3D scenes into your Next.js application

Project Configuration

Paste the URL of your published Spline scene

Example Spline Scene

This is an example 3D scene created with Spline. Try interacting with it!

How to Use the SplineScene Component

import { SplineScene } from '@/components/spline-scene'

export default function MyPage() {
  return (
    <div className="h-[500px]">
      <SplineScene 
        scene="YOUR_SPLINE_SCENE_URL" 
        className="w-full h-full"
      />
    </div>
  )
}

Steps to integrate:

  1. Create a scene in Spline
  2. Export and publish your scene to get a URL
  3. Import the SplineScene component in your page
  4. Add the component with your scene URL
  5. Style the container to control the dimensions