एसवीजी 3 डी: बनाएँ, घुमाएँ और चेतन

टेलीग्राम प्रतियोगिता के भाग के रूप में एक हफ्ते से थोड़ा पहले, मुझे svg, गणितीय सूत्र, अनुकूलन और एनीमेशन के "जादुई दुनिया" में उतरना पड़ा। प्रतियोगिता का कार्य जेएस पर एक काफी सरल चार्ट बनाना था, लेकिन कार्य की कुछ बारीकियों और प्रदर्शन पर जोर ने इसे दिलचस्प बना दिया। जीत के दावे के साथ कुछ बनाने की इच्छा को देखते हुए, फ्रंट-एंड डेवलपमेंट की दुनिया से ठेठ (और ऐसा नहीं) परियोजनाओं के लिए सामान्य दहलीज के निशान से थोड़ा गहरा गोता लगाने के लिए आवश्यक था।

यह काम पूरा होने के साथ काम नहीं करता था, लेकिन यह समय बर्बाद नहीं हुआ। मुख्य खोज एसवीजी में 3 डी ग्राफिक्स के साथ पूरी तरह से काम करने की क्षमता थी! मॉडल बनाना, एक चयनित अक्ष पर घूमना, स्क्रिप्ट एनीमेशन, और बहुत कुछ - यह सब यहां और अभी उपलब्ध है।

सबसे महत्वपूर्ण बात

3 जी के रूप में एक एसवीजी तत्व की शुरुआत:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true"> 

किसी दिए गए अक्ष पर रोटेशन:

 polyLine.rotateX(45); polyLine.rotateY(90); 

दृश्यों को जोड़ना और एनीमेशन शुरू करना:

 polyLine.addAnimScene('rotateX', 45); polyLine.addAnimScene('rotateZ', 60); ... polyLine.runAnimScene(delay); 

डेमो

https://shtange.imtqy.com/svg-3d/ ( स्रोत )