Skip to main content

​
Prerequisites

Before you begin, make sure you have the following installed:

Node.js 18+

Download from nodejs.org. Run node -v to verify your version.

Git

Download from git-scm.com. Run git --version to verify.

​
Set up the project

1

Clone the repository

Clone the project to your local machine:
git clone https://github.com/namith1003/3DPortfolio.git
cd 3DPortfolio
2

Install dependencies

Install all required packages using your preferred package manager:
npm install
This installs React Three Fiber, Drei, GSAP, Tailwind CSS, and all other dependencies listed in package.json.
3

Start the development server

Launch the Vite dev server:
npm run dev
Vite will print a local URL, typically http://localhost:5173.
4

Open the experience

Open http://localhost:5173 in your browser. You will see a loading screen followed by the interactive 3D bedroom scene.The scene lighting adjusts automatically based on your system clock. For example, visiting at 9 AM renders the scene with the park (morning) environment preset.

​
Customize the portfolio iframe

The monitor mesh in the bedroom scene embeds a personal portfolio website inside an <iframe>. The URL is set in src/models/Computer.jsx:
src/models/Computer.jsx
<Html
  wrapperClass='monitor'
  position={[-1.93, 1.245, -0.479]}
  transform
  rotation={[1.6, 1.67, -1.6]}
  distanceFactor={0.236}
>
  <iframe
    seamless
    frameBorder={0}
    loading='lazy'
    src="https://namith.vercel.app/"
  />
</Html>
Replace https://namith.vercel.app/ with the URL you want to display on the in-scene monitor.
The iframe loads lazily (loading='lazy'). Content only fetches when the component mounts, not on initial page load.

​
Project structure

src/
├── App.jsx
├── pages/
│   ├── Home.jsx
│   └── Home.css
├── models/
│   └── Computer.jsx
├── components/
│   └── Loader.jsx
└── assets/
    ├── 3d/bedroom.glb
    ├── fonts/retro.ttf
    ├── icons/
    │   ├── clock.gif
    │   ├── github.png
    │   └── linkedin.png
    └── images/
        ├── loader.jpg
        └── loader-mobile.jpg
package.json
vite.config.js

​
Next steps

3D scene

Learn how the bedroom GLTF model is loaded and rendered.

Time of day

Understand how lighting adapts to the current time.

Interactions

Explore click-to-zoom, keyboard navigation, and responsive camera logic.

Build docs developers (and LLMs) love

Get started for freeTalk to us