3D Rendering Capabilities
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The 3D rendering capabilities of this portfolio project are centered around an immersive hero section that utilizes high-fidelity 3D scenes and particle systems. The architecture integrates third-party 3D design tools with modern React-based animation libraries to create a visually rich user experience. By leveraging hardware acceleration and smooth scrolling primitives, the system ensures that 3D assets are rendered efficiently while maintaining interactivity.
Sources: src/components/3D-Hero/Hero3D.jsx, package.json:14-16
Core 3D Architecture
The rendering system is built on a React-based stack that combines the Spline runtime with Framer Motion and Lenis for motion orchestration. The primary entry point for 3D content is the Hero3D component, which serves as a container for the 3D scene and supplementary visual layers.
Spline Integration
The project uses @splinetool/react-spline to embed exported 3D scenes. The Spline component is configured as an absolute background layer, occupying the full viewport height and width. This allows for a deep integration of 3D geometry directly into the DOM structure without interfering with the interactive overlay elements.
<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, package.json:14
Visual Layer Stack
The rendering engine follows a specific z-index stacking order to maintain visual depth:
- Base Layer: The Spline 3D Scene rendered via a remote
.splinecodefile. - Intermediate Layer: A
ParticleBgcomponent providing granular visual noise. - Interactive Layer: UI elements including typography and
MagneticButtoncomponents.
Rendering Flow Diagram
The following diagram illustrates how the 3D scene and UI components are orchestrated within the Hero section.
This diagram shows the relationship between core components and the external libraries driving the 3D and motion systems.
Sources: src/App.jsx:7-24, src/components/3D-Hero/Hero3D.jsx:7-55
Motion and Interaction
To complement the 3D environment, the project implements smooth scrolling and magnetic interactions that respond to user input.
Smooth Scrolling (Lenis)
The App component initializes the Lenis library to handle the global scrolling behavior. This is critical for 3D environments to prevent "jitter" during rapid navigation. The easing function is defined as (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), providing a logarithmic decay for scroll momentum.
Sources: src/App.jsx:7-19, src/styles/globals.css:26-44
Magnetic Interactions
Interactive elements within the 3D space utilize the react-magnetic library. The MagneticButton component applies a "magnetic" pull to links, enhancing the tactile feel of the 3D interface.
| Feature | Library | Implementation Detail |
|---|---|---|
| 3D Scene Rendering | @splinetool/react-spline | Renders .splinecode binary files |
| Smooth Scrolling | lenis | Custom easing: $1.001 - 2^{-10t}$ |
| UI Animations | framer-motion | Opacity and Y-axis entry transitions |
| Interactive Links | react-magnetic | Strength value of 0.3 for pull effect |
Sources: package.json:14-20, MagneticButtom.jsx:4, src/App.jsx:10
Implementation Details
Configuration Summary
The project environment is optimized for high-performance rendering using Vite.
| Dependency | Version | Purpose |
|---|---|---|
react | ^18.2.0 | Component framework |
@splinetool/react-spline | ^3.0.20 | 3D Runtime |
framer-motion | ^10.16.4 | Component transitions |
lenis | ^1.0.4 | Scroll physics |
react-particles | ^2.12.2 | Particle background systems |
Sources: package.json:12-22
CSS Styling for 3D
The globals.css file ensures that the 3D canvas does not overflow the container and that the body maintains a dark theme (#0a0a0a) to contrast with the 3D lighting effects.
html, body {
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
background: #0a0a0a;
color: white;
}
Sources: src/styles/globals.css:12-20
Conclusion
The 3D rendering system in this portfolio project provides a seamless integration between high-end 3D design (Spline) and modern web performance standards. By offloading complex geometry rendering to the Spline runtime and managing interactions with Framer Motion and Lenis, the project achieves a "pixel-perfect" experience without compromising on-page performance or accessibility.