Sedikit lebih dari seminggu yang lalu, sebagai bagian dari kontes Telegram, saya harus terjun ke "dunia ajaib" svg, formula matematika, optimisasi dan animasi. Tugas kompetisi adalah membuat bagan yang cukup sederhana di JS, tetapi beberapa nuansa tugas dan penekanan pada kinerja membuatnya menarik. Mengingat keinginan untuk menciptakan sesuatu dengan klaim kemenangan, maka perlu untuk menyelam sedikit lebih dalam dari tanda ambang biasa untuk proyek-proyek khas (dan tidak demikian) dari dunia pengembangan front-end.
Itu tidak berhasil dengan selesainya pekerjaan, tetapi kali ini tidak sia-sia. Penemuan utama adalah kemampuan untuk sepenuhnya bekerja dengan grafik 3D di SVG! Membuat model, memutar pada sumbu yang dipilih, animasi skrip, dan banyak lagi - semua ini tersedia di sini dan sekarang.
Yang paling penting
Menginisialisasi elemen SVG sebagai 3D:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true">
Rotasi pada sumbu yang diberikan:
polyLine.rotateX(45); polyLine.rotateY(90);
Menambahkan adegan dan memulai animasi:
polyLine.addAnimScene('rotateX', 45); polyLine.addAnimScene('rotateZ', 60); ... polyLine.runAnimScene(delay);
Demo
https://shtange.imtqy.com/svg-3d/ ( Sumber )