Halaman ini diterjemahkan oleh Cloud Translation API.

Menambahkan model 3D ke web dengan <model-viewer>

Saat ini, orang-orang sering membawa perangkat yang mampu menjalankan augmented reality (AR) dan virtual reality (VR) di saku mereka. Semakin lama, konten yang kita bagikan satu sama lain di perangkat ini menjadi 3D. Dalam lab kode ini, Anda akan mempelajari cara menggunakan komponen web yang disebut <model-viewer> untuk menambahkan konten 3D ke situs atau Progressive Web App (PWA) dengan mudah seperti menambahkan gambar dengan HTML.

Yang akan Anda buat

Situs yang berisi model 3D interaktif dengan kemampuan untuk menampilkan hologram AR

Yang akan Anda pelajari

Cara menginstal komponen web <model-viewer> di situs Anda
Cara menggunakan <model-viewer> untuk menampilkan model 3D dalam tata letak web standar
Cara menyesuaikan <model-viewer> untuk menambahkan sentuhan unik pada presentasi

Yang Anda butuhkan

Browser web. Sebaiknya gunakan Chrome, tetapi browser modern lainnya (Firefox, Safari, Edge) juga dapat digunakan.
Node.js dan editor teks, atau akses ke Glitch.
Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools.

Codelab ini berfokus pada <model-viewer> dan model 3D. Konsep dan blok kode yang tidak relevan akan dibahas sekilas dan disediakan, jadi Anda cukup menyalin dan menempelkannya.

Opsi 1 - Glitch

Anda dapat menggunakan alat pengeditan kode online seperti Glitch untuk menghosting project dan melihat perubahan.

Untuk mulai menggunakan Glitch, klik tombol berikut:

Buka lingkungan Glitch yang telah dimuat sebelumnya

Mulai sekarang, Anda dapat menggunakan editor kode di Glitch untuk mengubah file, dan setelah siap, mulai menayangkan aplikasi menggunakan tombol "Show Live". Coba sekarang dan Anda akan melihat halaman berikut:

Opsi 2 - Server lokal

Server lokal akan memungkinkan Anda menggunakan editor kode pilihan Anda.

Menginstal server

Kita memerlukan cara untuk menayangkan halaman web lokal. Cara sederhana adalah melalui Node.js dan serve, server konten statis sederhana.

Buka situs Node.js untuk mendapatkan petunjuk tentang cara menginstalnya di sistem operasi Anda. Setelah Node.js diinstal, jalankan perintah ini untuk menginstal serve:

npm install -g serve

Download Kode

Template awal, beserta semua aset contoh, tersedia untuk didownload. Klik link berikut, dan ekstrak konten ke direktori yang ingin Anda gunakan untuk menyimpan project:

Download kode sumber

Atau, gunakan git untuk meng-clone repositori:

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

Menjalankan server

Dari direktori template yang diekstrak di atas (atau di dalam direktori yang di-clone, jika Anda menggunakan git), jalankan perintah serve untuk memulai server web:

Buka alamat tersebut (pada screenshot di atas, alamatnya adalah http://localhost:5000, tetapi mungkin berbeda di mesin Anda) untuk melihat titik awal yang sangat sederhana:

Kita akan mulai dengan mengedit file index.html, baik melalui editor web Glitch atau - jika Anda menggunakan server lokal - editor kode favorit Anda.

Tambahkan library <model-viewer>

Kita perlu menyertakan sekumpulan file JavaScript untuk menggunakan <model-viewer>.

Bagian berikut menambahkan library <model-viewer> ke halaman Anda. Tempel kode berikut di akhir <body>.

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

Kami baru saja menambahkan library, tanpa mengubah konten - jika Anda memuat ulang halaman, Anda akan melihat konten yang sama. Jika membuka konsol DevTools, Anda mungkin melihat beberapa peringatan tentang WebXR API yang tidak ada, tetapi hal ini wajar sampai API tersebut dirilis sepenuhnya.

Memaksimalkan Kompatibilitas

Secara default, <model-viewer> mendukung banyak browser modern. Namun, jika ingin memperluas jumlah browser yang dapat didukung halaman Anda, Anda dapat menyertakan polyfill tambahan.

Kumpulan lengkap rekomendasi kami ada di bawah. Hal ini akan membantu Anda mendukung pengalaman yang luar biasa di semua browser modern. Lihat dokumentasi polyfill<model-viewer> untuk mengetahui informasi selengkapnya.

Tempelkan kode berikut ke <head>.

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

Menambahkan <model-viewer>

Sekarang, mari kita tambahkan tag <model-viewer> yang sebenarnya ke halaman agar kita dapat melihat beberapa objek 3D. Ganti elemen <p> yang ada dengan kode berikut:

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

Hanya ada dua atribut yang perlu disebutkan di sini:

Atribut src menentukan tempat untuk memuat model 3D. Dalam contoh ini, kami menggunakan model Astronaut dari Poly yang telah tersedia di bawah lisensi CC-BY.
Atribut alt berisi deskripsi teks alternatif model untuk aksesibilitas.

Anda mungkin melihat bahwa kedua atribut ini memiliki kesamaan yang kuat dengan atribut tag img.

Pemuatan ulang akan menampilkan astronaut:

Bagus! Anda memiliki model 3D di web.

Pada langkah-langkah berikut, kita akan bereksperimen dengan lebih banyak interaktivitas dan gerakan, mengubah tampilan elemen, dan mencoba AR.

Mari kita tambahkan sedikit interaktivitas ke model. Kita akan membuat model berputar secara default, untuk memberi pengguna petunjuk bahwa model tersebut interaktif (dan juga untuk menunjukkannya), lalu kita akan mengaktifkan kontrol sehingga pengguna dapat memindahkan model itu sendiri dengan mouse atau melalui sentuhan.

Untuk melakukannya, cukup tambahkan atribut auto-rotate dan camera-controls ke elemen <model-viewer>.

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

Saat Anda memuat ulang halaman, Astronot akan berputar perlahan. Jika Anda mencoba menarik model (baik dengan mengklik dan menggerakkan mouse, atau jika Anda menggunakan perangkat yang kompatibel dengan sentuhan dengan menarik jari), model akan berputar.

Jika digabungkan, fitur ini memberi pengguna petunjuk bahwa ini bukan hanya gambar statis, dan rasa interaktivitas sehingga mereka merasa terlibat (dan mereka dapat melihat bagian belakang model Anda).

Sekarang setelah kita memiliki beberapa gerakan, mari kita lihat cara mengubah tampilan untuk membuat model benar-benar menarik.

Memperbarui model

Beberapa perubahan ini (terutama perubahan pencahayaan) akan ditampilkan dengan baik pada model tertentu. Pertama, perbarui atribut src untuk mengarah ke model baru: third_party/DamagedHelmet/DamagedHelmet.gltf (dirilis dengan lisensi Creative Commons Attribution-NonCommercial di Sketchfab). Sekarang, sumber seluruh elemen akan terbaca:

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

Model ini akan menunjukkan beberapa perubahan yang akan kami lakukan.

Mengubah warna latar belakang

Pertama, mari ubah warna latar belakang agar model terlihat menonjol di halaman. Tambahkan atribut berikut ke tag <model-viewer> Anda:

background-color="#70BCD1"

Menetapkan peta lingkungan

Peta lingkungan digunakan untuk menyediakan adegan tertutup yang dipantulkan dari model dan untuk menentukan konfigurasi pencahayaan. Pencahayaan default sangat baik (dan kompatibel dengan pencahayaan Scene Viewer ARCore), tetapi terkadang Anda mungkin memiliki lingkungan kustom atau memerlukan pencahayaan khusus untuk hasil yang ingin Anda capai. Tentukan atribut gambar lingkungan (studio_small_07_1k.hdr berasal dari hdrihaven.com).

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

Menambahkan bayangan

Membuat objek memancarkan bayangan akan memberikan kedalaman ekstra pada adegan. Atribut berikut, jika ditambahkan ke elemen <model-viewer>, akan menampilkan bayangan:

shadow-intensity="1"

Mengubah intensitas pencahayaan

Modelnya agak gelap; mari kita naikkan sedikit kecerahannya agar kita bisa melihat detailnya lebih jelas. Pencahayaan panggung default dan pencahayaan dari peta environmap yang kita tambahkan dapat disesuaikan secara terpisah. Tambahkan hal berikut:

stage-light-intensity="3" environment-intensity="2"

Setiap perubahan ini cukup kecil, tetapi modelnya terlihat jauh lebih baik sekarang.

Selanjutnya, kita akan melihat beberapa mode tampilan alternatif.

Makin banyak perangkat yang menyediakan augmented reality (AR). Beberapa mode ini sulit dipicu atau memerlukan kode khusus, tetapi <model-viewer> dapat menangani semua kerumitan tersebut untuk Anda.

Scene Viewer ARCore

Di perangkat yang didukung, <model-viewer> dapat memicu Scene Viewer ARCore. Tambahkan atribut ar ke elemen <model-viewer> Anda - dan ya, hanya ini yang perlu Anda lakukan.

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

Sekarang, jika Anda melihatnya di perangkat yang didukung dengan ARCore terbaru, Anda akan melihat ikon tambahan (seperti pada gambar di bawah). Dengan mengkliknya, model Anda akan terbuka di Scene Explorer.

Perangkat lain - Pratinjau Cepat iOS, Magic Leap, WebXR

Banyak perangkat lain memerlukan sedikit lebih banyak upaya.

Di iOS, atribut ios-src memungkinkan versi USDZ tambahan dari model 3D (yang diperlukan di iOS) ditentukan. Jika atribut ini diberikan, ikon AR Quick Look standar akan muncul pada model untuk perangkat iOS yang didukung. Untuk mengetahui informasi selengkapnya tentang USDZ, lihat dokumentasi developer Apple.

Di perangkat Magic Leap, atribut magic-leap akan mengaktifkan dukungan AR. Perhatikan bahwa Anda juga harus menyertakan library prismatic.js (disertakan, tetapi diberi komentar, dalam polyfill opsional) dan model 3D harus berupa file .glb (bukan .gltf).

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

Sudut dan posisi awal kamera dapat dikontrol. Kontrol ini memungkinkan kami menampilkan tampilan default helm yang lebih baik kepada pengguna. Tambahkan cuplikan berikut ke tag <model-viewer> Anda:

camera-orbit="-20deg 75deg 2m"

Tentu saja, model ini dapat digunakan dengan konten Anda yang lain, termasuk di halaman responsif. Membangun halaman web responsif berada di luar cakupan codelab ini, tetapi lihat Dasar-Dasar Desain Web yang Responsif untuk informasi tambahan.

Kami telah menyertakan halaman contoh di repo kami. Lihat responsive.html, dalam layar lebar (seperti desktop):

Halaman yang sama, dalam area pandang sempit (seperti perangkat seluler):

Anda telah menyematkan konten 3D ke web. Bagus!

Apa selanjutnya?

Ada banyak opsi konfigurasi lainnya. Lihat dokumentasi online kami atau kode untuk mengetahui informasi selengkapnya.

Setelah mengidentifikasi model, beberapa langkah selanjutnya yang dapat Anda pertimbangkan:

Beberapa model bisa berukuran cukup besar. Dalam kasus ini, <model-viewer> menyediakan beberapa metode untuk tetap memberikan pengalaman yang sangat baik. Halaman dokumentasi Pemuatan lambat memiliki informasi selengkapnya.
Model animasi bisa sangat menyenangkan. Lihat halaman Animasi kami untuk mengetahui informasi selengkapnya tentang cara mengaktifkan (dan beralih di antara) animasi yang ditentukan dalam model Anda.
Dan ini masih berupa web - model dapat disematkan ke halaman web Anda untuk melengkapi konten Anda.

Proses pengembangan kami terbuka di GitHub. Kami ingin mendengar pendapat Anda.