Adding Custom 3D Models
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The implementation of 3D models within this portfolio project is primarily handled through the integration of Spline, a collaborative 3D design tool. This system allows for high-fidelity interactive scenes to be embedded directly into the React application, specifically within the Hero section of the site.
The scope of "Adding Custom 3D Models" covers the technical requirements for rendering .splinecode scenes, managing dependencies, and overlaying UI components on top of the 3D canvas.
Sources: src/components/3D-Hero/Hero3D.jsx:1-12, package.json:14-16
Core Architecture and Dependencies
The project utilizes the @splinetool/react-spline library to interface with Spline scenes. The 3D scene serves as a background element, while interactive React components are layered on top using absolute positioning and z-indexing.
Dependency Requirements
To support 3D model rendering, the following packages must be present in the project environment:
| Package | Version | Purpose |
|---|---|---|
@splinetool/react-spline | ^3.0.20 | React component wrapper for Spline scenes |
framer-motion | ^10.16.4 | Animation of UI elements over the 3D scene |
react-particles | ^2.12.2 | Particle system overlays |
Sources: package.json:14-21
Data Flow for 3D Rendering
The following diagram illustrates how the Hero3D component initializes the 3D environment and manages the visual hierarchy.
The Hero3D component acts as a container that spans the full viewport (h-screen w-full), ensuring the 3D model has a proper canvas for rendering.
Sources: src/components/3D-Hero/Hero3D.jsx:7-9, src/App.jsx:21-26
Implementation Details
Scene Integration
The Spline component is the primary interface for adding custom models. It requires a scene URL which points to a hosted .splinecode file.
<Spline
className="absolute inset-0 w-full h-full"
scene="https://prod.spline.design/f9mXvGfQ6oZ0k8rN/scene.splinecode"
/>
Sources: src/components/3D-Hero/Hero3D.jsx:10-13
UI Integration and Interaction
Custom 3D models are enhanced by magnetic interaction elements and scroll indicators. The MagneticButton component, utilizing the react-magnetic hook, provides a tactile feel that complements the 3D depth.
Styling Constraints
To ensure the 3D model renders correctly without layout shifts, specific CSS rules are applied to the root and body:
overflow-x: hiddenonhtml, bodyprevents horizontal scrollbars from 3D overflows.background: #0a0a0aprovides a dark base for scene transparency.absolute inset-0on theSplinecomponent ensures it fills the container.
Sources: src/styles/globals.css:12-21, src/components/3D-Hero/Hero3D.jsx:11
Summary
Adding custom 3D models to this project involves exporting a scene via Spline and utilizing the <Spline /> component within a relative-positioned React container. The architecture separates the 3D rendering layer from the interactive UI and particle effects, ensuring high performance and clear component responsibility.