A fully interactive, isometric 3D portfolio built with Three.js and vanilla JavaScript. Navigate a custom 3D world with a character you control, click on objects to open project modals, and toggle between light and dark themes — all rendered live in the browser.
- Walkable 3D scene — Control a character through a custom
.glbenvironment using keyboard or mobile on-screen controls - Physics & collision — Capsule collider with Octree-based collision detection; character respawns if it falls off the map
- Raycaster interactions — Click on named scene objects (
Project_1,Project_2,Advertise,Character) to open detail modals - Dark / light theme — Persisted via
localStorage; GSAP animates lighting transitions smoothly in real-time - Cinematic loading screen — GSAP timeline fades out once the GLB model finishes loading
- Jump animation — Scale-squash-stretch animation plays on every character jump
- Mobile support — On-screen directional pad with
touchstart/touchendcontrols; pointer events work across devices - Orthographic camera — Isometric-style camera that follows the character at a fixed offset
- Responsive — Canvas and camera recalculate on window resize
| Layer | Technology |
|---|---|
| 3D Rendering | Three.js |
| Animation | GSAP |
| 3D Model | Blender → .glb (GLTF) |
| Physics | Three.js Capsule + Octree |
| Deployment | Vercel |
| Language | Vanilla JavaScript (ES Modules) |
- A modern browser with WebGL support
- A local static file server (required for ES module imports and
.glbloading)
# Clone the repository
git clone https://github.com/eemraydin/ThreeJs-Portfolio.git
cd ThreeJs-PortfolioSince the project uses ES modules and loads a local .glb file, you must serve it over HTTP — opening index.html directly will not work.
# Option 1: VS Code Live Server extension (recommended)
# Right-click index.html → "Open with Live Server"
# Option 2: Node.js http-server
npx http-server .
# Option 3: Python
python -m http.server 8080Then open http://localhost:8080 (or the port shown) in your browser.
| Key | Action |
|---|---|
W / ↑ |
Move forward |
S / ↓ |
Move backward |
A / ← |
Move left |
D / → |
Move right |
R |
Respawn character |
Escape |
Close modal |
| Input | Action |
|---|---|
| Click / Tap on object | Open project modal |
| On-screen D-pad | Move character (mobile) |
ThreeJs-Portfolio/
├── index.html # App shell, modal markup, mobile controls, loading screen
├── main.js # Three.js scene, physics, controls, theming, and UI logic
├── style.css # Theming, modal styles, mobile controls, loading screen
└── portfolioV6.glb # Custom 3D scene exported from Blender
Thank you Andrew Woan! You are best!