Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

amp-3d-gltf

Description

Displays GL Transmission Format (glTF) 3D models.

Required Scripts

<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>

Contoh

Menampilkan model 3D GL Transmission Format (glTF).

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 glTF.

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?

Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.

Kunjungi Stack Overflow
Menemukan bug atau ada fitur yang kurang?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Kunjungi GitHub