F-01 Kos map · live 3D P0 Three.js prototype
The same kos as the flat Kos map, drawn in real 3D with Three.js, as it will run on Android. Drag to turn the view, pinch or scroll to zoom, tap a tile to see it, switch floors with the tabs, and tap "Tagih sewa". All names and numbers are example data. Simple block models only; final art comes later.
Live · drag, zoom, tap a tile
Rp 3.450.000🪙 45★ 3,8Lv 4
Kota Kecil · Kos MelatiBulan 3 · Hari 12
What to try
- Turn and zoom: drag to rotate (limited to the front and side views), pinch or scroll to zoom.
- Tap a tile: it gets an orange frame and a card. Room 102 is late, 103 is empty with 3 applicants, 104 needs repair, 105 is being built.
- Floors: "Lt 1" fades floor 2 out (cutaway). "Lt 2" shows floor 2 and the two green tiles where you can build. "Lt 3" is locked.
- Tagih sewa: coins rise from the 4 rooms that paid, and the money in the header counts up. Sari (102) is late, so no coin.
Live render stats
–
Acceptance criteria (3D additions)
F-01.AC7 Given the kos map is open, when the player drags, then the view turns only between the front and side views, and the zoom stays within its limits.
F-01.AC8 Given the player taps a tile on the shown floor, then that tile is highlighted and its card opens. A drag must never count as a tap.
F-01.AC9 Given floor 1 is shown, then floors above are drawn faded and can't be tapped.
F-01.AC10 Given nothing moves on screen, then no new frames are drawn.
For engineers
- Three.js r187, loaded locally (no CDN):
assets/vendor/three/. Scene code:assets/kos3d.js. - Tilted top-down camera (orthographic, no perspective), simple shaded materials, one shadow light at a 1024 px shadow map, pixel ratio capped at 2.
- Budget to hold on an entry-level phone: ≤150 draw calls, ≤150k triangles (ADR-001, Estimated). Stats above are Measured on this page.
- Not production code: no instancing yet, labels are canvas sprites. Speed test S1 runs on a real phone with a full 4×3×3 kos.