PLANO
Each home is defined in data.js with room coordinates and the site generates its 3D model automatically: walls, openings, flooring, furniture and shadows. Features a scroll-driven exploded view with sunlight simulation, floor-by-floor exploration, property listings with filters, developments, and visit forms.
69 €VAT included · one-time payment
- Size
- ~700 KB
- Languages
- English and Spanish
- Build
- None
The template
What it includes
3D model generated from floor plans
Each property is defined in data.js with room coordinates. The template automatically generates walls, doors, windows, flooring (wood, stone, tile) and fitted furniture without requiring 3D modelling.
- three.js
- No 3D modelling
- 2D fallback
Floor-by-floor opening on scroll
The featured home on the front page opens floor by floor as you scroll while the sun moves across the day into the blue hour, lighting up the windows.
Interactive property exploration
Drag to rotate, pinch or Ctrl + wheel to zoom, switch to top view or open in fullscreen. Selecting a floor moves upper levels aside to reveal the interior.
- Rotate and zoom
- Top view
- Fullscreen
Room inspection and surface areas
Hovering over a room highlights its name and square metres; clicking locks the selection. With all floors in view, upper levels lift to let you see inside. Indoor and outdoor areas are calculated straight from the floor plan.
Sunlight, shadows and orientation
Time slider from 7:00 to 21:00 and a 12-second play button running until the blue hour, paired with a rotating compass. Shadows follow the property's real orientation set via the north field.
- 7:00 to 21:00
- Blue hour
- Compass
Listing, filters and favourites
Filter by sale or rent, area, property type, bedrooms and price, with shareable URLs and an empty state. Includes browser-saved favourites, similar listings and support for your own photos alongside generated views.
New development showcase
Dedicated development page displaying unit typologies with their individual 3D models and plans, starting prices, availability, and a phased construction tracker.
Validated visit and contact forms
Agency contact and property visit forms with browser validation. Connects directly to Formspree, Web3Forms, Basin or your own backend endpoint.
English, Spanish and accessible
Language switch with no reload, keyboard and screen reader support, reduced-motion support and a 2D plan when WebGL is not available. On slower phones it lowers the resolution by itself to stay smooth.
Screenshots
The demo, screen by screen
Click an image to enlarge it. The arrow keys move between images and Esc closes the viewer.
Specifications
Under the hood
- Stack
- HTML, CSS and plain JavaScript
- 3D
- three.js r160 (MIT), included in the zip
- Fonts
- Bodoni Moda and Jost (SIL OFL 1.1), served locally
- Build
- None. No framework, no bundler, no packages to install
- External requests
- None. Fonts and libraries are served from your own host
- Size
- A zip of about 700 KB
- Languages
- English and Spanish, with a live switch
- Browsers
- Current browsers with WebGL. Without WebGL, a 2D plan replaces the 3D model
- Hosting
- Any static host: Netlify, Vercel, Cloudflare Pages, GitHub Pages
- Contact form
- Formspree, Web3Forms, Basin or any custom JSON endpoint
- Accessibility
- Keyboard navigation, screen reader support, accessible controls and reduced-motion support
FAQ
About PLANO
How do I add properties without 3D knowledge?
You only need to list each room's corner coordinates in metres in data.js. The template calculates areas, raises walls, adds doors and windows, applies floor materials and places furniture automatically.
What happens on older devices or without WebGL?
Without WebGL, the 3D model is replaced by a 2D floor plan drawn from the same coordinates, with each room's name and area. On slower phones, the model lowers its resolution by itself to stay smooth.
Can I use real photos of the properties?
Yes. By default the gallery creates views of the 3D model and 2D floor plans. Add your images to the images array in data.js and they will take pride of place in both the gallery and the listing.
How do I receive messages from the forms?
In the demo, forms validate in the browser without sending data. Put your Formspree, Web3Forms, Basin or custom API URL into formEndpoint in data.js to receive inquiries and visit requests directly.
Licence, payment and download: general questions
Open the demo, then decide.
- The templateThe real estate site in HTML, CSS and JavaScript, with property sheets, new developments, three.js and the fonts included.
- Bilingual documentationA docs/index.html page in English and Spanish with a guide for floor plans (rectangles, L-shapes, doors, windows, party walls) and common troubleshooting.
- Licence and creditsThe licence in plain terms, and credits for three.js (MIT) and the fonts (SIL OFL 1.1).