Belajar untuk merancang dan menghidupkan 3D dengan ZDOG

zdog: enjin javascript 3D ringan

ZDOG adalah enjin JavaScript 3D yang ringan berdasarkan

dan SVG, yang membolehkan pemaju untuk merekabentuk, memaparkan dan animasi model 3D mudah di laman web. API deklaratif yang ringkas dan mudah digunakan menjadikannya popular. <canvas></canvas>

pekerjaan dengan cepat bermula dengan zdog

anda boleh mula menggunakan zdog oleh:

Muat turun fail perpustakaan ke persekitaran tempatan:
• https://www.php.cn/link/907ee68e550f498a93ec82d228135c00 /1a1a998465d96b216610e8bf342343bb (versi yang tidak dikompresi) Dapatkan fail perpustakaan dari CDN:
https://www.php.cn/link/907EE68E550F498A93EC82D228135C00
• Pasang Menggunakan NPM:
• npm install zdog

fungsi teras zdog:

teras ZDOG terletak pada kaedah "pseudo 3D" nya. Ia mentakrifkan geometri dalam ruang 3D tetapi menjadikannya menjadi bentuk yang rata, yang membolehkannya mencapai kedua -dua kesan 3D dan mengekalkan ciri -ciri ringan.

Buat grafik statik:

Berikut adalah contoh membuat bulatan SVG statik:

html:

CSS:

<svg id="circle" width="100" height="100"></svg>

JavaScript:

#circle {
  background-color: #081d3f;
  width: 100vw;
  height: 100vh;
}

let circle = new Zdog.Illustration({ element: '#circle' });
new Zdog.Ellipse({
  addTo: circle,
  diameter: 20,
  stroke: 20,
  color: '#ccc'
});
circle.updateRenderGraph();

Animasi dan seret:

Melaksanakan animasi menggunakan :

requestAnimationFrame() tambah fungsi seret dan drop:

function animate() {
  circle.rotate.y += 0.03;
  circle.updateRenderGraph();
  requestAnimationFrame(animate);
}
animate();

Lebih banyak sumber dan contoh:

let circle = new Zdog.Illustration({
  element: '#circle',
  dragRotate: true,
  onDragStart() { isSpinning = false; },
  onDragEnd() { isSpinning = true; }
});
let isSpinning = true;

function animate() {
  if (isSpinning) { circle.rotate.y += 0.03; }
  circle.updateRenderGraph();
  requestAnimationFrame(animate);
}
animate();

laman web rasmi ZDOG:

pautan laman web rasmi

• Contoh zdog pada codepen: pautan codepen
FAQs:

(ini boleh disusun semula menjadi jawapan yang diselaraskan berdasarkan bahagian FAQ asal dan digunakan dalam bahasa yang lebih ringkas)

• Apa itu ZDOG? Apa yang boleh dilakukan? ZDOG adalah enjin JavaScript 3D untuk web, digunakan untuk membuat dan memanipulasi objek 3D. Boleh digunakan untuk membuat grafik, animasi, dan permainan 3D interaktif.
• Bagaimana untuk memulakan dengan ZDOG? Mengandungi skrip ZDOG, mencipta contoh ilustrasi, menambah bentuk dan membuat.
• Bentuk apa yang disokong? menyokong bulatan, oval, segi empat tepat, poligon, dan lain -lain, dan juga boleh menyesuaikan bentuk.
• Bagaimana untuk membuat animasi? Gunakan requestAnimationFrame() dan kemas kini sifat bentuk.
• Bolehkah ia digunakan dalam kombinasi dengan perpustakaan lain? Ya, sebagai contoh, Greensock.
• Bagaimana menangani interaksi pengguna? Gunakan pengendali acara JavaScript standard.
• Bolehkah ia digunakan untuk pembangunan permainan? Ya, tetapi anda perlu mengendalikan logik permainan dan enjin fizik sendiri.
• Keserasian penyemak imbas? menyokong penyemak imbas moden.
• Penggunaan Komersial? Lesen MIT, tersedia untuk projek komersial.
• Lebih banyak sumber? Rujuk laman web rasmi ZDOG dan Codepen, dll.

Saya harap maklumat di atas akan membantu anda!

Atas ialah kandungan terperinci Belajar untuk merancang dan menghidupkan 3D dengan ZDOG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!