One property · Six tenants · Hypothetical assumptions
Own the whole plaza
Start with the property.
Lease snapshot · January 1, 2027
Annual amounts in USD
Explore the retail plaza
Orbit the plaza, tour its shops, or visit the selected premise.
Shared plaza
Opening the district…
Drag to orbit; scroll to zoom. Use Walk or Tour to enter the stores. Choose Leasing plan to stop 3-D and inspect individual leases, or open a separate tab for a full-window view.
First landlord decision
Midori’s lease ends in December 2027.
Would a higher asking rent justify losing the tenant? Test the cost of an empty shop before making your recommendation.
The whole property
Rent roll & lease expirations
| Premise | Area · SF | Rent / SF / year | Annual base | Recoveries | Expires |
|---|
When does the space roll over?
Share of rentable area expiring each calendar year
Annual landlord operating snapshot
Contractual run rate, before vacancy, debt service and capital costs. This is not a five-year property forecast.
Activity 01 · Leasing a 450 SF premise
Keep Midori, or re-lease the space?
You own the entire plaza. Midori’s lease expires on December 31, 2027. Compare two offers over the same five calendar years, January 2028–December 2032, then explain your choice.
Follow the landlord’s cash flows
USD · selected premise only · TI and commissions are below NOI
| Year | Renew · NOI | Renew · leasing costs | Renew · net cash | Re-lease · NOI | Re-lease · leasing costs | Re-lease · net cash |
|---|
How the comparison is calculated
Operating cash flows arrive at each month-end. Rent increases on each lease anniversary. Free rent begins when the tenant takes possession; recoveries are still paid during free rent. During downtime the landlord pays all allocated operating expenses without rent or recoveries.
Tenant improvements (TI) and leasing commissions are paid at the start of occupancy. Commission is a percentage of scheduled base rent before concessions, over the remaining months through December 2032. Both alternatives end on that date, so downtime shortens the new lease. No renewal, sale proceeds or residual value is assumed.
The monthly discount rate is (1 + annual discount rate)1/12 − 1. NPV includes monthly NOI less the separately timed leasing costs. Fixed allocated operating expenses are $3,600 per year; occupied NNN recoveries are $3,300 per year. All other tenants are held constant and excluded from this incremental comparison.
Questions to consider
- Which offer creates more value under your assumptions?
- How much downtime or tenant improvement cost would change your decision?
- What would you investigate about tenant credit, market rent, and the tenant mix before committing?
Read the model
A teaching property, with explicit assumptions.
Property & leases
- A single landlord owns the six-premise plaza and its shared spaces.
- All tenant identities, areas, rents, lease dates and expenses are hypothetical. They are not market comparables or actual leases.
- The 3,600 SF rent roll covers ground-floor retail only. The model’s decorative upper structures are not additional rentable premises. Areas are rounded teaching inputs, not surveyed measurements.
- Courtyard, terrace, landscaping, streets and parking are excluded from rentable area. The visual design does not establish zoning, parking, accessibility or building-code compliance.
- Rents are stated in USD per SF per year. Current rates apply January 1, 2027; annual lease increases occur each January 1 in the existing rent roll.
- No percentage rent, rent arrears, options, deposits or credit losses are modeled. Displayed rent roll amounts are contractual annual run rates.
Expenses & recoveries
NNN tenants reimburse their area share of taxes, insurance and common-area maintenance (CAM). Kissa Ao reimburses CAM only. Tsuki Books pays gross rent with no separate reimbursement. Owner administration is never recovered.
No expense inflation, recovery caps, exclusions, base years or annual reconciliations are modeled. Utilities are paid directly by tenants. Repairs to tenant equipment are excluded.
What the studio can—and cannot—tell you
The model connects premises, contractual income and leasing cash flows. Physical features may prompt questions about access, visibility and customer experience; they do not automatically increase rent or sales in this model. Any offered rent must be supplied as an explicit assumption.
The first activity compares two leases for one premise. It does not value the whole property and includes no financing, tax effects, appreciation or terminal sale. The 3-D map is the default property view; the leasing plan and all financial activities also work without 3-D graphics.
Prototype scope: property inspection, rent roll, lease expirations and one landlord decision. Future activities can add operating budgets, tenant mix, capital improvements and property-level underwriting.
Behind the district
How Three.js brings the plaza to life
Three.js is a JavaScript library for building interactive 3-D scenes in a web browser. In Ame Quarter, it draws the plaza from a virtual camera and updates the view as you move, change the light, or switch the weather.
From shapes to a place
- Build the objects. Boxes, cylinders and other shapes form walls, roofs, furniture, plants and shop goods. Most of this district is generated from code.
- Give surfaces a finish. Colors, textures and materials distinguish wood, glass, brick and wet pavement.
- Position the camera and lights. The camera sets your viewpoint. Lights, shadows and reflections help show depth, surface detail and time of day.
- Add movement and interaction. Small updates animate rain, leaves, trees and doors. Controls let you orbit the plaza, walk through it or follow a tour.
Features you can explore here
- Navigation: miniature, walking and guided-tour views, with shop interiors and doors that open as you approach.
- Lighting: rainy night and post-rain dusk, plus a moving light direction to examine changing shadows.
- Atmosphere: rain, falling leaves, swaying plants and roof vapor.
- Detail and performance: hide roofs to inspect interiors, or compare Balanced graphics with Full reflections.
These effects are configured for this scene. Three.js provides the building blocks; the project code defines how they behave.
What could students build next?
A small extension could let a user click a storefront in 3-D to display its lease, compare alternative outdoor seating layouts, or color premises by lease expiration. A more developed exercise could connect an editable property layout with explicit area, rent and improvement-cost assumptions.
Start with one shop or one feature, change a single parameter, and observe the result. Keep any financial assumptions separate from visual appearance: a more attractive model does not establish a higher market rent.
Learning resources: Three.js fundamentals · Selecting objects in a scene
Where does the rendering happen?
The website host delivers the files. Your browser then uses your device’s graphics hardware to draw the scene. Moving the camera or animating leaves does not ask GitHub to draw or stream a new image.
More visitors can increase file-download bandwidth. More detailed graphics mainly affect each visitor’s frame rate, memory use and battery. Balanced graphics reduces that workload. Switching to Leasing plan stops the scene and releases its view; the financial activity remains available without 3-D.