AMP

amp-3d-gltf

Menampilkan model 3D GL Transmission Format (gITF).

Skrip yang Diperlukan <script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
Tata Letak yang Didukung fill, fixed, fixed-height, flex-item, responsive
Contoh Lihat contoh amp-3d-gltf di AMP By Example.

Penggunaan

Komponen amp-3d-gltf menampilkan model 3D dalam format gITF.

Catatan: Browser berkemampuan WebGL diperlukan untuk menampilkan model ini.

Contoh

<amp-3d-gltf
    layout="responsive"
    width="320"
    height="240"
    alpha="true"
    antialiasing="true"
    src="path/to/model.glb"></amp-3d-gltf>

Batasan

Saat ini, hanya berfungsi dengan glTF 2.0. Fitur yang tidak didukung:

  • kamera tersemat
  • animasi

CORS

amp-3d-gltf membuat permintaan fetch dari https://<random>.ampproject.net asal sehingga access-control-allow-origin: *.ampproject.net harus ditetapkan pada header respons endpoint yang ditetapkan sebagai src. Karakter pengganti diperlukan karena asal memiliki komponen sub-domain acak.

Atribut

src [wajib] Atribut wajib yang menentukan URL ke file gltf.
alpha [opsional] Atribut Boolean yang menentukan apakah ruang kosong pada kanvas terlihat transparan atau tidak. Secara default, ruang kosong diisi warna hitam. Nilai defaultnya adalah false.
antialiasing [opsional] Atribut Boolean yang menentukan apakah antialiasing diaktifkan atau tidak. Nilai defaultnya adalah false.
clearColor [opsional] String yang harus berisi warna CSS yang valid, yang akan digunakan untuk mengisi ruang kosong pada kanvas.
maxPixelRatio [opsional] Nilai numerik yang menentukan batas atas untuk opsi render pixelRatio. Nilai defaultnya adalah window.devicePixelRatio.
autoRotate [opsional] Atribut Boolean yang menentukan apakah kamera akan otomatis diputar di sekitar pusat model atau tidak. Nilai defaultnya adalah false.
enableZoom [opsional] Atribut Boolean yang menentukan apakah zoom akan diaktifkan atau tidak. Nilai default adalah true.

Tindakan

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax) menyetel rotasi model. Urutan rotasi adalah ZYX
  • x/y/z - angka 0..1, didefaultkan ke nilai rotasi model sebelumnya.
  • min/max - sudut dalam radian, didefaultkan ke 0/pi * 2, menentukan rentang target
misalnya setModelRotation(x=0.5, xMin=0, xMax=3.14) akan mengubah komponen x rotasi menjadi 1.57.

Validasi

Lihat aturan amp-3d-gltf dalam spesifikasi validator AMP.

Perlu bantuan lainnya?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub