Lumekara
IDEN
Semua proyek
Frontend

Visual 3D Interaktif untuk Belajar

Adegan 3D seperti jaring kubus, benda putar, dan peta pulau yang dimuat hanya bila perangkat mampu, dengan gambar cadangan untuk perangkat lain.

Status
Sudah berjalan
Lapisan
Frontend
Dipakai oleh
Siswa yang belajar bangun ruang dan konsep ruang di HP atau laptop, termasuk HP dengan spesifikasi rendah.
Konsultasikan proyek ini
Galeri animasi 3D Numekara dengan maskot bunga teratai Sekar
Tangkapan layar

Masalahnya

Konsep ruang seperti volume dan permukaan sulit dipahami dari gambar datar, tetapi grafis 3D yang berat bisa membuat ponsel murah lambat.

Solusinya

Adegan 3D dibuat dengan React Three Fiber dan baru dimuat saat dibutuhkan, hanya di perangkat yang mendukung WebGL. Perangkat lain tetap mendapat ilustrasi SVG.

Cara kerjanya

Apa yang terjadi, langkah demi langkah, dari sudut pandang pengguna.

  1. 01

    Gambar cadangan tampil dulu

    Saat halaman dibuka, ilustrasi SVG yang ringan langsung tampil, jadi tidak ada ruang kosong.

  2. 02

    3D menunggu bagiannya terlihat

    Kode 3D baru diunduh saat bagian itu masuk layar, bukan saat halaman pertama kali dibuka.

  3. 03

    Kemampuan perangkat diperiksa

    Adegan 3D hanya dimuat bila perangkat mendukung WebGL dan tidak sedang dalam mode hemat data.

  4. 04

    Siswa memutar dan menjelajah

    Siswa bisa melihat jaring kubus terlipat, benda putar, atau peta pulau mode Petualang dari berbagai sudut.

  5. 05

    Aman bila ada masalah

    Bila adegan 3D bermasalah, tampilan kembali ke gambar SVG. Kanvas 3D dilepas saat digulir keluar layar agar HP tetap ringan.

Desain sistemnya

Siapa yang memakai, apa yang mereka lihat, apa yang bekerja di belakang layar, dan di mana data disimpan. Baca dari kiri ke kanan.

  1. 1Pengguna

    • SiswaMembuka pelajaran atau galeri 3D di HP maupun laptop.

  2. 2Yang dilihat

    • Ilustrasi SVGGambar ringan yang selalu tampil lebih dulu.
    • Adegan 3DJaring kubus, benda putar, peta pulau, dan maskot.

  3. 3Yang bekerja di perangkat

    • Pemeriksa perangkatMengecek dukungan WebGL dan mode hemat data.
    • Pemuat bertahapMengunduh kode 3D hanya saat bagiannya terlihat.

  4. 4Teknologi grafis

    • Three.js dan R3FReact Three Fiber menggambar adegan; maskotnya dibuat dari kode, bukan berkas model.

Fitur utama

  • Jaring kubus dan benda putar
  • Peta pulau mode petualang
  • Dimuat hanya saat dibutuhkan
  • Cadangan SVG otomatis
  • Maskot 3D buatan kode

Dibangun dengan

  • Three.js
  • React Three Fiber
  • drei
  • Next.js

Yang didapat bisnis

  • Konsep ruang lebih mudah dipahami daripada lewat gambar datar.
  • HP murah tetap lancar karena 3D hanya dimuat di perangkat yang mampu.
  • Tidak ada bagian kosong atau rusak, karena selalu ada gambar cadangan.
  • Halaman tetap cepat dibuka karena kode 3D diunduh belakangan.

Istilah di halaman ini

WebGL
Kemampuan browser untuk menggambar grafis 3D memakai chip grafis perangkat.
Lazy loading
Memuat bagian halaman hanya ketika dibutuhkan, agar halaman awal lebih cepat.
Fallback
Tampilan cadangan yang dipakai bila versi utama tidak bisa berjalan.

Bisa dipakai untuk bisnis Anda?

Bisa dipakai untuk menampilkan produk, denah properti, atau simulasi secara 3D di website Anda tanpa membuat ponsel pengunjung lambat.

Konsultasikan proyek ini