I Rebuilt My Portfolio as a 3D World You Fly Through: Here's What I Learned

TL;DR: A cinematic 3D website moves a camera through a real 3D world as you scroll, creating a film-like experience visitors remember. I rebuilt my portfolio this way using WebGL and three.js, optimized it down from 10.8 MB to 4.9 MB for phones, and learned exactly where this approach works and where it doesn't. It's not for every site, but when you need something unforgettable, nothing else comes close.

I rebuilt my portfolio site as a 3D world you fly through. Not parallax. Not layered images. A real 3D scene rendered live in the browser, where scrolling moves a camera from a dark room, over a lake, past floating project screens, to a contact form hovering in the air like a hologram. It took weeks to get right on phones, and it's not for everyone, but visitors who see it remember it.

This is what a cinematic 3D website is, how it works under the hood, what it costs to build, and who should actually use one.

What a cinematic 3D website actually is

A cinematic 3D website is a site where the camera moves through a real 3D environment as you scroll, like a short film you control. Instead of a page sliding up, you fly from scene to scene: into a room, over water, past floating screens, toward a destination waiting in the distance.

My site, julianneagu.com, now has three versions you can switch between at the top: a classic layout, a lighter immersive version with 2.5D effects, and the full cinematic 3D experience. All three hold the same content, my story, the projects I've built, the App Store, the numbers, but the 3D version treats every section as a place in one connected world.

What makes it cinematic instead of just 3D:

• A camera that moves like a film. Scrolling doesn't move the page. It moves the camera, with smooth turns and deliberate pauses at each scene.
• One continuous world, not separate pages. The room, the lake, the projects, and the contact form exist in the same 3D space, so the journey between them feels seamless.
• Interactive moments. Tap a project to zoom in. Flip through product screenshots. Send a message from a form floating in mid-air.
• Sound cues, if you want them. Soft clicks as you move between scenes, with a sound toggle to turn it off.

The entire scene is drawn live with WebGL, so it's real 3D geometry and lighting, not layered pictures with parallax. That's also why it's heavier than a normal site and why mobile optimization became the hardest part.

Classic vs immersive vs cinematic 3D

I offer three versions because not every visitor has a phone that can run WebGL smoothly, and not every project needs a 3D engine. Here's how they compare:

If you only need the feeling of depth, the immersive style gives you most of it at a fraction of the weight. A cinematic 3D site is for when the 3D world itself is the point: walking through a property, turning a product in space, or a brand launch people remember.

I cover the difference in detail in my guide to 3D site styles, which breaks down when each approach makes sense.

A walkthrough of the 3D site, scene by scene

The 3D version of my portfolio is one continuous trip. Here's what each scene does.

1. The room and the signature

It starts in a dark room with a wide window. Tap Step inside or start scrolling, and the camera moves through the glass into open air above a lake, where my signature is written in light.

2. The numbers and the App Store

The camera passes panels floating over the water: 1000+ domains, 500+ AI tools, 300+ apps. Then it reaches the VisionVix App Store, with real app screenshots suspended in the scene. Each screen is clickable and shows actual product details.

3. Projects you can tap

Projects fan out in the air as screenshots. Tap one and it zooms in so you can read the text and see the design. Tap again to close it. This is where the 3D interaction matters most, because visitors can explore work at their own pace without jumping to a new page.

4. How I work and what I've shipped

Next come the stages of how I take an idea to a live product, each with a floating laptop screen showing a different part of the process. After that, a wall of products I've built and helped launch, and the tools I use to build them.

5. A contact form in the air

The trip ends at a contact form floating as a hologram over the lake. It switches between nine languages using the flags along the top, so visitors can write in their own language. The form works like a normal form, it just happens to exist in 3D space.

How I built it, in plain technical terms

A 3D engine in the browser. The scene is drawn live with three.js, a widely used library for WebGL. The camera, the lights, the water reflections, and the floating objects are all real 3D, not images with CSS transforms.

A path, not free walking. The camera follows a route I designed, with stops at each scene. Scroll, swipe, or the arrow keys move it forward and back along that path. You can't look around freely, because the experience is meant to feel like a guided tour, not an open-world game.

Real text on top. Headlines and body copy sit above the 3D scene as normal HTML text, so they stay sharp and readable on every screen. The 3D scene handles visuals, the HTML layer handles words.

A classic fallback. The classic site is always one tap away in the version switcher, and older phones that struggle with 3D can use it without missing any content.

Phones were the hard part

A 3D scene keeps every texture (image) in the phone's graphics memory, so large images can slow it down or crash the page. I gave phones their own smaller copies of every image, which cut the download from about 10.8 MB to about 4.9 MB and the graphics memory requirement to less than half.

The camera path is also set up differently for portrait screens, so vertical phones get a route that makes sense for their aspect ratio.

If you want to judge speed for yourself, Google's Core Web Vitals explain what gets measured. The performance checks in my website best practices guide still apply here, you just have to work harder to meet them when you're rendering a 3D scene.

Motion is not for everyone, so the site respects the phone or computer setting to reduce motion. If a visitor has that preference enabled, the 3D scene skips the camera animation and shows static scenes instead.

Here's what the scene setup looks like in three.js:

``javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Cap at 2 for performance
document.body.appendChild(renderer.domElement);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);
``

That creates the scene, camera, and lights. The setPixelRatio cap is critical on phones with high-DPI screens, you don't need to render at 3x resolution when 2x looks identical and runs twice as fast.

For the camera path, I used a CatmullRomCurve3 to define waypoints, then animate the camera position and look-at target based on scroll position:

``javascript
const points = [
new THREE.Vector3(0, 2, 10), // Start in the room
new THREE.Vector3(0, 5, 0), // Move through the window
new THREE.Vector3(10, 3, -5), // Over the lake
new THREE.Vector3(20, 4, -10), // Reach the projects
new THREE.Vector3(30, 3, -15) // End at the contact form
];

const curve = new THREE.CatmullRomCurve3(points);

function updateCamera(scrollPercent) {
const position = curve.getPointAt(scrollPercent);
const lookAt = curve.getPointAt(Math.min(scrollPercent + 0.05, 1));

camera.position.copy(position);
camera.lookAt(lookAt);
}

window.addEventListener('scroll', () => {
const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight);
updateCamera(scrollPercent);
renderer.render(scene, camera);
});
``

The scrollPercent maps scroll position (0 to 1) to a point along the curve. The camera looks slightly ahead along the path, which creates the smooth "traveling through space" feel.

You can see the full site live at julianneagu.com/3d and watch me build similar projects on my YouTube channel.

What a cinematic 3D website costs

3D work is specialized, so prices vary a lot. The pricing guides from Utsubo and Hon Tran put a freelance cinematic 3D site starting around $8,000, one 3D scene from an agency at $20,000 to $50,000, and a full cinematic 3D story at $50,000 to $100,000.

My own fixed quote for a cinematic 3D site is £3,000 to £5,000, depending on the number of scenes and the content involved. That includes design, build, mobile optimization, and deployment.

The cost comes from three things:

1. 3D modeling and scene design. Every object, every light, every texture needs to be created and optimized.
2. Camera choreography. The path has to feel deliberate, not random, and that takes iteration.
3. Mobile performance work. Getting a 3D scene to run smoothly on a mid-range phone takes more time than building the desktop version.

If you just need one showpiece scene (a product launch page, a homepage hero), the cost is lower. If you need a full multi-scene story with interactive elements, it's higher.

Is a 3D website good for SEO?

It can be, but it takes care. Search engines read text, not 3D scenes, so the words on my 3D site stay as real HTML text with proper headings, and every section that contains information also exists in the classic version with the same content and the same URLs.

Google doesn't penalize 3D sites for being 3D. It penalizes sites that are slow, hard to navigate, or hide their content in JavaScript that doesn't render server-side. If you:

• Keep text as real HTML (not drawn in the 3D scene as textures)
• Serve a fast fallback for older devices
• Use proper headings, meta tags, and structured data
• Keep Core Web Vitals in check

then a 3D site can rank just fine. My 3D portfolio ranks for "Julian Neagu," "VisionVix," and related terms, because the content is real and the classic version carries the full text for crawlers.

The bigger SEO risk is that 3D sites often get built with no fallback, no real text, and no regard for load time. That's a choice, not a requirement of the format.

Who should build a cinematic 3D website

Not everyone. A cinematic 3D site works when:

• The experience itself is the product. A portfolio, a showroom, a brand launch where being memorable matters more than converting in three seconds.
• You have one story to tell, not 500 products to list. 3D sites work best with a single narrative path. If you need category pages, filters, and a search bar, stick to a classic layout.
• Your audience has modern devices. If half your visitors use old phones on slow networks, the classic or immersive version is a better default.
• You want something people talk about. A well-done 3D site gets shared. A badly done one gets closed.

A cinematic 3D site is not for:

• E-commerce with large catalogs
• Content-heavy blogs or news sites
• SaaS dashboards or tools used daily
• Any site where speed is more important than impression

If your goal is to be remembered, a 3D site does that. If your goal is to convert traffic at scale, a fast classic site does that. Sometimes you need both, which is why I built all three versions and let visitors switch.

A cinematic 3D website is a real 3D world rendered live in the browser, where the camera moves like a film as you scroll. It's the most memorable of the three styles, also the heaviest, and works best for portfolios, showrooms, and launches where the experience itself is the message. I built mine, optimized it for phones, and put it next to a classic version so visitors can choose. If you need to be unforgettable, this is how you do it. If you need to be fast, this is not.