3D

Di Mana Tenda Ini Aman

Sebuah aplikasi gelap menampilkan denah lahan kemah berskala dan maket 3D yang bergerak bersamaan, mencoba posisi tenda di dekat pohon, api unggun, sungai, dan jalan setapak. Setelah tiga percobaan gagal, aplikasi memindai 2.760 posisi, menandai yang aman di denah, lalu mengunci posisi terbaik.

3D · Three.js, WebGL, SVG, Canvas 2D, CSS · 20 detik · 1280×720

Prompt

Buat aplikasi web satu halaman (1280x720, tema gelap navy) bernama "Di mana tenda ini aman?" untuk lahan kemah 12,00 x 9,00 m berisi satu pohon besar (tajuk radius 1,70 m), api unggun, sungai berkelok di sisi selatan, dan jalan setapak dari gerbang ke api unggun. Tendanya berukuran 2,10 x 2,40 m. Kiri: denah berskala tampak atas (SVG, grid 50 cm, garis ukuran, skala batang, legenda) dengan zona larangan bergaris putus. Kanan: maket 3D Three.js low-poly dari lahan yang sama (rumput, tanah terpotong di sisi, air sungai berkilau, batu, pohon, api unggun yang menyala dengan cahaya oranye, tenda segitiga oranye). Keduanya bergerak bersama. Di bawah, lima kartu status: Tajuk pohon, Api unggun (minimal 3,00 m), Tepi sungai (minimal 1,50 m), Jalan setapak, dan Posisi diuji. Setiap posisi diukur: garis jarak hijau atau merah muncul di denah dan di 3D, kartu berubah hijau atau merah dengan alasan yang jelas. Demo otomatis 20 detik tanpa klik: percobaan 1 di bawah tajuk pohon, percobaan 2 terlalu dekat api dan menutup jalan, percobaan 3 terlalu dekat sungai, lalu percobaan 4 memindai 2.760 posisi dengan cepat sementara titik hijau dan merah memenuhi denah (canvas) dan penghitung naik. Terakhir tenda meluncur ke posisi terbaik, semua kartu hijau, kamera mendekat pelan, dan muncul ringkasan jumlah posisi aman. Angka memakai format Indonesia (koma desimal, titik ribuan).

Video 3D lainnya

  1. Kincir Air Sawah dalam Satu Model3D20 dtkKincir Air Sawah dalam Satu ModelSebuah web app rekayasa menampilkan kincir air kayu berdiameter 6 m dalam viewer 3D: sungai lebar yang memutar sudu, talang bambu yang menumpahkan air ke petak teratas sawah bertingkat, rangka struktur bergaris tepi, rontgen aliran air, dan urai komponen. Kursor otomatis lalu membuka lembar gambar kerja tampak depan dan samping, enam perhitungan desain, dan mengekspor berkas CAD.Three.js · SVG · Partikel
  2. Petak, Peracik Motif Tegel3D20 dtkPetak, Peracik Motif TegelVideo peluncuran 20 detik untuk aplikasi fiktif Petak: kalimat pembuka muncul kata demi kata, satu kata berubah menjadi jendela aplikasi, kursor mengetik kenangan tentang lantai teras lalu menekan tombol, dan layar membuka ke ruang gelap berisi dinding motif tegel yang dipindai, tiga motif terpilih, karusel 3D tegel baru, dan lantai teras yang tersusun ubin demi ubin sebelum logo muncul.SVG · CSS
  3. Racik Es Teh dalam Satu Kartu3D15 dtkRacik Es Teh dalam Satu KartuSatu bentuk UI tanpa potongan berubah dari stepper jumlah gelas menjadi slider tingkat manis, pilihan es batu, jadwal ambil, ringkasan pesanan, loader, dan toast, semuanya digerakkan kursor dengan klik dan geser. Latar berganti warna cerah di tiap tahap sementara gelas es teh ikut berubah manis dan dinginnya.SVG · CSS
  4. Showreel Magnet dalam Lima Babak3D15 dtkShowreel Magnet dalam Lima BabakShowreel gerak 15 detik tentang magnet dalam lima babak: kata MAGNET tersusun dari irisan yang dikelilingi garis medan, dua kutub merah dan biru saling tarik dan tolak di latar krem, serbuk besi membentuk pola medan, magnet tapal kuda 3D menarik bola baja di lantai mengilap, lalu bola krom berubah menjadi ferofluida hitam berduri.Three.js · Shader · Canvas 2D
ArtikelSusun brief