Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Halaman ini diterjemahkan oleh Cloud Translation API.

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

Saat ini, sudah umum bagi pengguna untuk membawa perangkat yang dilengkapi augmented reality (AR) dan virtual reality (VR). Semakin banyak konten yang kami bagikan satu sama lain di perangkat ini dalam bentuk 3D. Dalam codelab ini, Anda akan mempelajari cara menggunakan komponen web bernama <model-viewer> untuk menambahkan konten 3D ke situs atau Progressive Web App (PWA) semudah menambahkan gambar menggunakan 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 menyajikan model 3D dalam tata letak web standar
Cara menyesuaikan <model-viewer> untuk menambahkan bakat ke presentasi

Yang Anda butuhkan

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

Codelab ini berfokus pada model <model-viewer> dan 3D. Konsep dan blok kode yang tidak-relevan akan dipoles dan disediakan sehingga Anda cukup salin dan tempel.

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 bawaan Anda

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

Opsi 2 - Server lokal

Server lokal akan memungkinkan Anda menggunakan editor kode pilihan Anda.

Menginstal server

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

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

npm install -g serve

Download Kode

Template awal, bersama dengan semua aset contoh yang tersedia untuk didownload. Klik link berikut, dan ekstrak konten ke direktori tempat Anda ingin memuat 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, http://localhost:5000, tetapi mungkin berbeda di komputer 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.

Menambahkan <model-viewer> library

Kita harus menyertakan sekumpulan file JavaScript agar dapat 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 perpustakaan, tanpa mengubah konten - jika Anda menyegarkan laman, Anda akan melihat konten yang sama. Jika Anda membuka konsol DevTools, Anda mungkin melihat beberapa peringatan tentang API WebXR yang tidak ditemukan, namun hal ini normalnya terjadi hingga API dirilis sepenuhnya.

Memaksimalkan Kompatibilitas

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

Kami merekomendasikan set lengkap di bawah. Hal ini akan membantu Anda mendukung pengalaman yang luar biasa di semua browser modern. Lihat dokumentasi <model-viewer> polyfill untuk informasi selengkapnya.

Tempelkan kode berikut ke dalam <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>-->

Tambahkan <model-viewer>

Sekarang, tambahkan tag <model-viewer> yang sebenarnya ke halaman sehingga kita dapat melihat beberapa 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 untuk disebutkan di sini:

Atribut src menentukan lokasi pemuatan model 3D. Pada contoh ini, kami menggunakan model Astronaut dari Poly yang tersedia berdasarkan lisensi CC-BY.
Atribut alt berisi deskripsi teks alternatif model untuk aksesibilitas.

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

Muat ulang akan menampilkan astronot:

Bagus! Anda memiliki model 3D di web!

Dalam langkah berikut, kita akan bereksperimen dengan lebih banyak interaktivitas dan gerakan, mengubah tampilan elemen, dan memasukkan jari kaki ke dalam AR.

Mari tambahkan sedikit interaktivitas ke model. Kita akan meminta model berputar secara default, untuk memberi pengguna petunjuk bahwa model tersebut interaktif (dan juga untuk menampilkannya), lalu kita akan mengaktifkan kontrol agar pengguna dapat memindahkan sendiri model 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 (dengan mengklik dan menggerakkan mouse, atau jika Anda menggunakan perangkat yang mendukung sentuhan dengan menarik jari), model tersebut akan berputar.

Secara keseluruhan, fitur-fitur ini memberi pengguna petunjuk bahwa ini lebih dari sekadar gambar statis dan rasa interaktivitas sehingga mereka merasa terlibat (dan mereka dapat melihat bagian belakang model Anda!)

Setelah melakukan beberapa gerakan, mari kita lihat cara menyesuaikan penampilan untuk membuat model ini benar-benar menarik.

Memperbarui model

Beberapa di antaranya (khususnya perubahan pencahayaan) akan lebih cocok dengan model tertentu. Pertama, mari perbarui atribut src agar mengarah ke model baru: third_party/DamagedHelmet/DamagedHelmet.gltf (dirilis dengan lisensi Creative Commons Attribution-NonCommercial di Sketchfab). Sumber seluruh elemen sekarang akan membaca:

<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 menampilkan beberapa perubahan yang akan kita buat.

Mengubah warna latar belakang

Pertama, mari kita ubah warna latar belakang untuk membuat model muncul di halaman. Tambahkan atribut berikut ke tag <model-viewer>

background-color="#70BCD1"

Menyetel peta lingkungan

Peta lingkungan digunakan untuk memberikan scene penutup yang direfleksikan dari model dan untuk menentukan konfigurasi pencahayaan. Pencahayaan default sangat bagus (dan kompatibel dengan pencahayaan Scene Viewer ARCore), tetapi terkadang Anda mungkin memiliki lingkungan kustom atau mungkin memerlukan pencahayaan khusus untuk hasil yang ingin Anda capai. Mari kita tentukan atribut lingkungan-gambar (studio_small_07_1k.hdr berasal dari hdrihaven.com).

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

Menambahkan bayangan

Membuat objek mentransmisikan bayangan akan memberikan kedalaman ekstra pada adegan. Atribut berikut, saat ditambahkan ke elemen <model-viewer> kita, akan mentransmisikan bayangan:

shadow-intensity="1"

Mengubah intensitas pencahayaan

Modelnya agak gelap; mari kita atur lampunya sedikit agar kami dapat melihat detail selengkapnya. Pencahayaan panggung default dan pencahayaan dari peta lingkungan yang kami tambahkan dapat disesuaikan secara terpisah. Tambahkan hal berikut:

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

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

Selanjutnya, kita akan melihat beberapa mode tampilan alternatif.

Semakin 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

Pada perangkat yang didukung, <model-viewer> dapat memicu ARCore's Scene Viewer. Tambahkan atribut ar ke elemen <model-viewer> - 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 lainnya - Tampilan Cepat iOS, Magic Leap, WebXR

Banyak perangkat lain yang memerlukan fungsi lebih banyak.

Di iOS, atribut ios-src memungkinkan versi USDZ tambahan dari model 3D (yang diperlukan di iOS) ditentukan. Jika atribut ini diberikan, ikon Quick Look AR standar akan muncul pada model untuk perangkat iOS yang didukung. Untuk 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 (ini 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 kepada pengguna. Tambahkan cuplikan berikut ke tag <model-viewer>

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

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

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

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

Anda telah menyematkan konten 3D ke web! Bagus!

Apa selanjutnya?

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

Setelah model Anda diidentifikasi, beberapa langkah selanjutnya dapat Anda pertimbangkan:

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

Proses pengembangan kami terbuka di GitHub. Kami menantikan masukan dari Anda!