Web · Live
Workspace Designer
Perancang rumah 3D di browser untuk memilih tipe rumah, mengisi tiap ruangan dengan perabot sewaan, dan melihat biaya bulanannya.
Nilai jual
Yang membuatnya menonjol.
Pelanggan melihat rumahnya dalam 3D
Rumah bisa diputar, diperbesar, dan dimasuki per lantai, sehingga pelanggan tahu seperti apa hasilnya sebelum menghubungi.
Harga transparan sejak awal
Total bulanan berubah di setiap pilihan dan dirinci per ruangan. Tidak ada hitung manual dan tidak ada kejutan di akhir.
Pelanggan menata sendiri
Perabot bisa diganti, digeser, dan diputar langsung di tampilan 3D, dan rancangannya tersimpan di browser saat halaman dibuka lagi.
Bisa dicoba langsung
Aplikasinya sudah live dan dapat dipakai di halaman demo tanpa mendaftar.
Masalahnya
Daftar harga sewa perabot memaksa pelanggan berhitung dan membayangkan hasilnya sendiri. Mereka tidak bisa melihat bagaimana perabot itu tampak di dalam rumah, dan setiap perubahan berarti menghitung ulang total bulanan secara manual.
Untuk siapa
Penghuni yang ingin mengisi rumah sewaan tanpa membeli perabot, dan bisnis penyewaan yang ingin pelanggan menyusun pesanan sendiri sebelum menghubungi.
Fitur utama
Enam tipe rumah
Dari Tipe 30 satu lantai sampai Tipe 90 dua lantai, lengkap dengan carport atau garasi, taman, dan pagar.
Tampak luar dan per lantai
Klik rumah untuk masuk. Di tampilan lantai, dinding yang menghadap kamera otomatis hilang sehingga isi ruangan terlihat, dan tiap ruangan diberi label.
Ganti, geser, dan putar perabot
Klik sebuah perabot atau penanda kosong untuk memilih produk, lalu seret di tampilan 3D untuk memindahkannya. Perabot tetap berada di dalam ruangannya.
Cat dan wallpaper
Warna cat luar dan dalam dapat diganti, dan tiap ruangan bisa diberi wallpaper bermotif.
Total bulanan per ruangan
Harga dihitung ulang di setiap perubahan dan ditampilkan per ruangan beserta total per bulan.
Rancangan tersimpan
Pilihan tipe rumah, perabot, posisi, dan cat disimpan di browser, sehingga tetap ada saat halaman dimuat ulang.
Pendekatan yang sama bisa diadaptasi untuk
- Konfigurator 3D untuk properti, interior, atau furnitur
- Kalkulator harga interaktif untuk paket sewa atau jasa
- Katalog produk dengan pratinjau visual sebelum memesan
Arsitektur
Workspace Designer adalah aplikasi front end di atas Next.js App Router. Tidak ada lapisan data sisi server di repository: tipe rumah, templat ruangan, dan katalog produk berupa data bertipe, dan perancangnya adalah pohon komponen klien.
Tiga komponen mengerjakan semuanya:
- WorkspaceConfigurator memegang state rancangan, menghitung harga, dan menyimpan rancangan ke browser.
- ProductSelector merender pilihan produk untuk slot yang sedang dipilih.
- WorkspacePreview menggambar rumah, ruangan, dan perabot dalam 3D dengan React Three Fiber.
State berada di satu tempat dan mengalir ke bawah, sehingga tampilan 3D, daftar perabot, dan ringkasan harga tidak mungkin saling berbeda.
Detail implementasi
Slot, bukan koordinat bebas. Setiap jenis ruangan punya templat slot, misalnya sofa, meja kopi, dan TV untuk ruang tamu. Posisi slot ditulis relatif terhadap ukuran ruangan, sehingga templat yang sama pas di ruangan berukuran apa pun. Slot juga bisa bergantung pada slot lain: monitor hanya muncul bila mejanya ada.
Model dan tekstur ditulis dalam kode. Perabot disusun dari bentuk dasar Three.js sebagai komponen React, dan tekstur kayu, ubin, rumput, serta genteng digambar ke canvas saat runtime. Tidak ada berkas model 3D yang perlu diunduh.
3D dimuat belakangan. Tampilan Three.js dimuat secara dinamis di sisi klien, terpisah dari bundle awal halaman.
Geser dengan batas. Saat perabot diseret, posisi sementara disimpan lokal dan baru dikirim ke state utama ketika dilepas, dengan titik asal perabot dijaga tetap di dalam ruangannya.
Yang belum dikerjakan
Katalognya statis dan tombol “Secure This Setup” membuka tampilan konfirmasi tanpa mengirim pesanan. Menghubungkannya ke inventaris dan backend pemesanan adalah tahap proyek berikutnya.
Yang bisa diverifikasi
- Ter-deploy dan dapat diakses publik di Vercel.
- Aplikasi lengkap dapat disematkan dan dipakai langsung di halaman demo.
Tangkapan layar
