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 Didukungfill, fixed, fixed-height, flex-item, responsive
ContohLihat 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