Porsche 911 – Interactive 3D Viewer (Three.js)

Showcase
, , , , , , ,
1

Hey everyone!
I just finished building a cinematic 3D demo of the Porsche 911, fully interactive and optimized for web. :automobile::sparkles:
Built entirely with Three.js + GSAP + WebGL.
(This is my first test in Three.js!)

:sparkles: Features:
• Cinematic intro & demo loop
• Car paint customizer
• Hotspots with text & image popups
• HDRI lighting + DRACO/KTX2 compression
• Responsive UI (mobile + desktop)
• Background music & engine sound

:light_bulb: Ready-to-use static template (HTML, CSS, JS) — perfect for 3D product viewers & portfolios.

:backhand_index_pointing_right: Live Demo: https://porsche911.pure-art.co

Porsche911
Porsche9111344×768 141 KB

4 Likes
4

Nicely detailed model.

When I tried changing the color to red, I got more of a pink.

The car looks a bit too shiny, so perhaps it is picking up too much of the gray color from the environment and turning the red into pink. Or you could increase the roughness a tiny bit.

I assume that you are using colors created in Blender or whatever modeling software you are using?

Also, could you move the center of the camera view up so that when you get closer you are looking into the interior rather than the lower door panel?

5

This is nice, very well done, everything is really smooth.

Could not help but notice the issues in reflection at window borders

image
image858×539 68.5 KB

Inspecting your model, it seems like image size and/or compression is affecting the resolution of this areas. Here you can see the metallic and roughness channels.

image
image1085×596 58.6 KB

image
image1121×618 90.7 KB

Both textures are embedded in the glb model, and this is not about three.js but the asset preparation, so be prepared to manually modify the glb file if you want to address this.

Just my two cents

6

Good catch. Looks like that is also a problem with the upright pillars on the windshield (but not the top or bottom of the windshield). I am guessing that the easiest way to fix this problem would be to create an actual frame for the front and side window, like he apparently did on the back windows.

7

ok this is sick. a great tribute to the greatest car ever made

8

ok this is sick. a great tribute to the greatest car ever made

Thanks! Really happy you liked it — the 911 is truly a legend, but Three.js is even more legendary :smiling_face_with_sunglasses:

9

Great observation! You’re absolutely right — I’ll try adding proper window frames like the rear ones to fix that. Thanks for noticing! :folded_hands:

10

Thanks a lot for the detailed feedback! :folded_hands:
You’re right — the red looks a bit pink because of HDRI reflections. I’ll tweak the roughness and maybe adjust the color tone in code.
The colors aren’t from Blender; they’re handled dynamically inside the script.
I’ll also raise the camera target a bit so the interior shows better when zooming in. Thanks again for the great feedback!

1 Like
11

Thanks a lot for the careful inspection and pointers! :folded_hands:
You’re right — the window-border reflections are being hurt by how the metallic/roughness were packed/compressed inside the GLB. I’ll repack higher-res M/R maps (and ease compression), check mipmaps/texel density, and replace the embedded textures (manually if needed).
This is actually my first test in Three.js, so your feedback really helps me improve.
I’ll push an update after re-exporting the asset. Really appreciate the heads-up

1 Like