枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
都市デザインの架空スタジオMERIDIAN GRID。実際のThree.js建築模型と平面図で3つの地区案・36区画を比較し、選んだ区画と計画の問いを相談メモへ引き継ぐ。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build MERIDIAN GRID, a fictional urban-design studio with an interactive Three.js district model and three comparable planning studies. This is a complete editorial website with a usable model, land-use schedule and local planning-brief review. Use ordinary page scrolling. Do not claim a statutory plan, measured performance or real purchasing/booking.
ART DIRECTION
Use warm paper #eeece5, white #faf9f5, ink #252723, muted #63665c and borders #c7c6bc. Selection/CTA accent #914b36; vegetation #69745c. Homes are pale stone #d9d5c9, workspace warm clay #b8846d, public rooms brick #914b36, gardens green. Helvetica/Arial body and headings; ui-monospace for model references. Headings weight 500, text 400, controls 600. Heading scale 40–100px and tight -.05em tracking; body 16–17px with 1.65 line height. Keep a generous asymmetric .8fr/1.4fr opening and horizontal editorial district rows. No neon, decorative traffic loops or arbitrary coordinates.
OPENING AND MODEL
The header has a 3-by-3 grid mark, MERIDIAN GRID, Explore the model, Three districts, Start a conversation and Pause/Resume motion. Retain all navigation on mobile. The opening reads “Room for / more than / buildings.” with “We explore how a district can make room for work, daily life and the spaces in between.” Text is visible immediately. Do not add a loader or opacity-hidden sections.
The right side contains one actual WebGLRenderer with an OrthographicCamera, ACES filmic tone mapping, exposure .95, sRGB output, RoomEnvironment baked once with PMREM (environmentIntensity .5), warm directional intensity 3.2, hemisphere 1.0 and PCFShadowMap 2048² (radius 1.5, normalBias .08, bias -.0003). Own and dispose the room, generator, target and all generated textures. Use a dithered procedural 64×1024 sRGB white-cyclorama gradient #f4f2ec → #e3e1d9. Paper roughness .9, road .95, coloured coating MeshPhysicalMaterial roughness .8 / clearcoat .15. Glazing colour #9fb2b5, roughness .25, clearcoat .6 / .2, envMapIntensity .8. Use a shared RoundedBoxGeometry(1,1,1,2,.02) on solid parts with all dimensions at least 1, retaining BoxGeometry on thin facade strips. Keep the original dimension envelope and instancing. A #e6e3da plinth and a ShadowMaterial floor at -4.05 (opacity .18) anchor the model. Local 64² alpha contact planes at .14 opacity under ground-level parts replace screen-space AO; omit them for embedded previews. The selected plot uses four .24-wide box strokes, depthTest false, renderOrder 10. Cap DPR with sitePixelRatio(2) (1 in embedded previews). Build an original architectural model on a 196 × 196 m site. There are 7-by-7 positions at 28 m pitch, a crossing in row/column 3 and 36 remaining 24 × 24 m plots. Plot IDs use row letters A–G and columns 1–7. Floor height is 3.2 m. Each housing plot has two wings with an open middle, workspace has a two-storey podium and smaller upper floors, public rooms are low slabs and gardens have paths and model trees. Facade strips and trees use InstancedMesh batches per plot. Do not render thousands of separate window meshes.
Use the accompanying source helpers in references/demo-assets/iso-city/ to preserve all three layouts, model quantities, camera fitting and geometry. Follow that folder's README for the small shared helper and import paths. These original source files require the installed Three.js and React dependencies. They are not externally hosted artwork.
Frame all geometry at any supported aspect ratio by projecting a fixed bounding box through the actual camera basis. Yaw begins at 38 degrees and pitch at 42 degrees. Support bounded yaw -180..180 and pitch 30..80. Buildings grow from their bases with a deterministic smoothstep depending on distance from the central crossing. Start construction at 72%, then page scroll raises it to 100% across 60% of the opening height. Manual progress or rotation disables scroll following; a checkbox can restore it. The percentage is a visual sequence, not programme completion.
Offer 3D model / Site plan, district and plot selectors, construction, rotate left/right, viewing angle, reset view, opt-in touch rotation and selected-plot details. Pointer raycasting and the native plot selector must select the same plot. A tap selects; a drag rotates only when enabled for touch, preserving ordinary touch scrolling by default. The plan uses the same data, with a real 28 m scale bar, plot IDs and a text legend. It remains usable if WebGL fails. Keep modelled height, 576 m² plot area and calculated floor area beside the selection. Never require hover to read information.
LIFECYCLE
Only create the renderer while its picture is visible. Release it when outside the viewport or hidden; keep settings, selection and the frame outside GPU resources. Restore the held frame on re-entry. Stop the RAF after convergence and commit the exact target. Use time-correct exponential smoothing with retention .88 at 60Hz. Manual pause and OS reduced motion hold the unfinished pose; explicit inputs may update it immediately. Dispose partial construction, instance buffers, geometry, materials, shadow resources and renderer/context. Check initial drawing and context loss. On failure retain the plan and controls, show Retry 3D, and retry paused with the selection intact.
THREE DISTRICTS
Use Riverbend Quarter (“Daily life, close at hand.”), Market Terrace (“A place to meet and make.”), and Canopy Row (“Give the ground back.”). The first prioritises neighbourhood services, the second transit-led workspace, the third public realm and gardens. Each row contains the actual plan, intent, explicit trade-off, floor area and counts of home/work/public/garden plots. Derive these quantities from the same building parts: sum footprint × storeys. Floor-area/site-area uses the common 38,416 m² site. Counts and totals describe the complete concept, independent of the construction animation. Do not invent demand, carbon savings, walk times or housing capacities.
Each row has Explore this model (updates the district and scrolls/focuses the model) and Discuss this direction (opens the chosen district's brief). Keep keyboard focus and avoid navigating on hover. Selecting a new district may retain the same plot reference for comparison; discussing a different row without first selecting it must not accidentally inherit another district's plot.
PROCESS AND CLOSE
“Start with better questions.” introduces Listen / Test / Define. Describe the site boundary, access, local constraints and people; comparative massing/uses/open space; then the reference district, schedule and open questions for the next study. Close with “What could this ground become?” and Prepare a planning brief.
The local brief carries the selected district, the district-specific planning question, modelled floor area, garden count, and selected plot/use/area if present. Initial-select the corresponding Planning focus by its group label. Allow review and saving the actual choices and explain that this is a fictional concept experience. Do not simulate a sent enquiry. The three priorities are Public realm first, Transit-led phase and Neighbourhood services.
RESPONSIVE AND VERIFICATION
Below 780px use normal flow: introduction, full model/plan, selectors, details, then schedule and district rows. No clipped controls or fixed internal panel heights. Preserve all navigation and visible focus. Native scroll, touch rotation, keyboard selection, 200% zoom, pause/resume, WebGL recovery and the full brief/save journey require actual browser verification; unit tests and a static plan are not proof of visual acceptance.
## Action flow and content
Implement the following local planning experience for the primary CTA, in the visual language of the page. Use a real button opening a labelled modal dialog. Choosing a pricing card must preselect that exact plan. A navigation link may move to another section; a planning CTA must lead to its review flow.
Use this content for the dialog, including the option details and notes:
{
"slug": "iso-city",
"brand": "MERIDIAN GRID",
"accent": "#914b36",
"paper": "#eeece5",
"ink": "#252723",
"colorScheme": "light",
"title": "District planning brief",
"intro": "Keep the district and plot you explored, then choose a priority for the next planning conversation.",
"facts": [
[
"Scope",
"Public realm, transport connections and mixed-use blocks"
],
[
"Deliverables",
"Phasing diagram, land-use schedule and access principles"
],
[
"Status",
"Concept study; not a statutory or approved development plan"
]
],
"groups": [
{
"label": "Planning focus",
"options": [
{
"title": "Public realm first",
"detail": "Prioritise shaded pedestrian links, squares and step-free crossings before parcel development."
},
{
"title": "Transit-led phase",
"detail": "Begin with interchange capacity, cycle access and links to the existing street network."
},
{
"title": "Neighbourhood services",
"detail": "Sequence housing alongside daily retail, schools and community rooms."
}
]
}
],
"notes": [
"The saved brief includes the selected district, its model quantities, any selected plot and your planning priority. This is a local concept review, not a sent enquiry. Land ownership, approvals and cost feasibility require a separate project study."
]
}
- Explain before input that this is a fictional brand sample: choices can be reviewed and saved, with no external submission, booking, payment or registration. Use each brand's language. Do not launch a mail client or present an installer for a fictional product.
- Give every option group a legend, inputs explicit labels and errors linked descriptions. Validate options against the allowed values, requested dates as actual dates from today onward, and free text as 10–2,000 trimmed characters. Blank spaces alone must fail. Tracking accepts the sample reference TG-2048 only.
- Focus the first invalid field and preserve every entered value. On success, show the selected option WITH its full detail, requested date or brief, relevant facts and notes. An edit action returns to the preserved form. Do not claim a real reservation, purchase or account has succeeded.
- Save the complete review as UTF-8 text. A browser download request is not proof of a file being written. On download failure, retain the full text in a labelled, selectable textarea and offer retry. Do not show a false success state.
- Constrain modal content to the viewport with internal scrolling. Support keyboard and touch, trap focus while open, close on Escape and restore focus to the exact initiating control. Keep these operations available with motion disabled.
- If a separate project-contact CTA is present, let it collect a project brief and review it locally; a product selection CTA must retain the product choice. Verify both flows independently.