The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Next.js | Interactive 3D Real Estate Website Development
An immersive 3D real estate website experience combining modern web development with interactive property visualization to make exploring apartments more engaging and intuitive.
The experience features realistic 3D floor plans, smooth camera transitions, interactive room selection, and detailed property information panels. Visitors can explore apartment layouts from different angles, understand available spaces, and review property details without relying on traditional images or static floor plans.
With a clean dashboard interface, seamless 3D interactions, and user-focused navigation, the concept demonstrates how immersive technology can help real estate businesses present properties more effectively, build buyer confidence, and generate qualified inquiries.
Tech Stack: Next.js · Three.js · React Three Fiber · Blender · GSAP
Top Skills: 3D Web Development · Three.js Development · Interactive UI/UX Design
3d floor plans in three.js is cool. how heavy does it get on mobile?
Thanks! It can get heavy pretty quickly if it isn’t optimized. I usually keep the mobile version lighter with compressed/low-poly models, limited textures and shadows, lazy loading, reduced draw calls, and a capped pixel ratio. That keeps the 3D experience smooth without making mobile users load the full desktop scene.
How are you shipping the 3D floor plan to mobile? A Blender export can be several MB, so I'm curious whether you compress the model or load it in steps before the first render.
Thanks for asking! We use a multi-layered optimization pipeline. The Blender export is first processed into a lightweight format (like GLTF/GLB with Draco compression) to drastically reduce the file size. Then, we leverage progressive loading and level-of-detail (LOD) streaming...
Thanks for the detail. Does the level-of-detail switch happen by distance from the camera, or by scroll position? And how long does the first view take to show on a mid-range phone?
It looks amazing. 🙌
Thanks🙌
This is very nice and good honestly
Thank you 🙌
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Gorgeous 😍
How fast can a template get without changing a single pixel?
⠀
We just optimized 11 of our templates in Framer, Astro and Next.js. The rule was simple: nothing visible changes, only how things load.
⠀
What we changed: CSS inside the page, fonts from our own domain instead of Google Fonts, WebP images with phone-sized copies, videos that load when you scroll near them, heavy videos re-encoded without visible loss (one template went from about 20 MB of video to 2.4 MB), WebGL that starts near the screen, and analytics after the page. Every page was checked pixel by pixel at three widths before and after.
⠀
Mobile PageSpeed now, Astro / Next.js:
Sunbeam 100 / 100
Auria 100 / 96
Lapse 97 / 98, up from 64 / 66
Parley 97 / 94
Nova Quinn 93 / 92 ⠀
On desktop, Mote scores 98 in Framer and 100 in Astro and Next.js.
More posts on the individual fixes coming.
Nothing visible changes, only how things load is such a good rule. Speed work like this is underrated, buyers feel it even if they can't see it.
Your Hero Section Has One Job: Be Clear.
You don’t need huge headlines or long explanations. You need the right image + short headline + clear offer.
For the first version, we worked on the branding, the image and the copy together, so at first glance it’s clear: this is a makeup course, and here’s what you’ll get.
The second version is still beautiful and still feels like beauty. But what are you actually getting? A makeup course? Products? A store? That’s the problem with a Hero that looks good but isn’t thought through.
Your first screen doesn’t need to say everything. It just needs to say the right thing.
22 voted
61%
14 voted
39%
36 votes
Closed
