🌨️ 👇🏿 👩🏼‍🚒 Qt Quick3D का परिचय ❌ 🙍 🛠️

यह पोस्ट "स्मार्ट फोन फॉर स्मार्ट पोस्ट" प्रतियोगिता में भाग लेती है
बहुत समय पहले नहीं, क्यूटी क्विक फ्रेमवर्क ने क्यूटी क्विक 3 डी एड-ऑन का अधिग्रहण किया, जो आपको 3 डी ऑब्जेक्ट्स (3 डी मैक्स और ब्लेंडर से आयात समर्थित है) के साथ पूरी तरह से काम करने की अनुमति देता है, उन पर विभिन्न परिवर्तनों, एनिमेशन लागू करते हैं, प्रभाव लागू करते हैं, और आमतौर पर ओपनजीएल की क्षमताओं का पूरा फायदा उठाते हैं। यह सब सिम्बियन, MeeGo, Windows \ Linux \ MacOs (अच्छी तरह से, और आम तौर पर जहाँ भी Qt है) के तहत काम करता है। इस विषय में, हम "दांत पर" तकनीक का प्रयास करेंगे। मैं कुछ जटिल और गंभीर लिखना नहीं चाहता, इसलिए हम एक फ्रीज़र बना देंगे, जिसमें से एक UFO क्लिक करके बाहर निकल जाएगा।
तुरंत परिणाम:

हमें क्या चाहिए?

क्यूटी क्रिएटर , क्यूटी लाइब्रेरी , क्यूटी क्विक 3 डी और ब्लेंडर को डाउनलोड और इंस्टॉल करें। हमें 3 डी मॉडल की भी आवश्यकता है जो हम उपयोग करेंगे। मैंने यह फ्रिज लिया और यह उड़न तश्तरी (सब कुछ मुफ्त है)। खैर, हब्र लोगो ने बेशर्मी से चोरी की।

चलो चलते हैं

तो, क्यूटी क्रिएटर लॉन्च करें और एक नया प्रोजेक्ट बनाएं: फाइल-> नई फाइल या प्रोजेक्ट-> क्यूटी क्विक प्रोजेक्ट-> यूजर इंटरफेस ऑन क्यूटी क्विक ।

हम प्रोजेक्ट का नाम दर्ज करते हैं, फ़ोल्डर का स्थान, हम डिफ़ॉल्ट रूप से अन्य सभी विकल्प छोड़ देते हैं।

नई बनाई गई परियोजना कुछ इस तरह दिखती है:

हम उसे अकेला छोड़ दें।

मॉडल की तैयारी

हम ब्लेंडर खोलते हैं और इसमें मॉडल तैयार करते हैं जो हम उपयोग करेंगे। मैं ब्लेंडर में काम का विस्तार से वर्णन नहीं करूंगा (आखिरकार, यह उससे सबक नहीं है, और मैं ब्लेंडर में विशेष नहीं हूं)। यहाँ हम क्या करेंगे का एक संक्षिप्त सारांश है:

आइए रेफ्रिजरेटर और यूएफओ के मॉडल खोलें।
यूएफओ को रेफ्रिजरेटर में रखें।
हम रेफ्रिजरेटर पर हैबर लोगो पर हुक करते हैं।
हम ब्लेंडर से अलग से एक यूएफओ (जो अब रेफ्रिजरेटर में है), एक रेफ्रिजरेटर दरवाजा (हमें अलग से इसकी आवश्यकता है ताकि इसे खोला जा सके) और इसके शरीर को बिना दरवाजे के निर्यात करें। और हमारे पास आउटपुट में 4 फाइलें होनी चाहिए: ufo.3ds , door.3ds , refr.3ds + बनावट फ़ाइल । इन सभी फ़ाइलों को प्रोजेक्ट फ़ोल्डर में कॉपी करें।

नमस्ते दुनिया

हम अपने प्रोजेक्ट के लिए क्यूटी क्रिएटर के पास लौट आए। जब इसे बनाया गया था, तो इस तरह की "हैलो दुनिया" को HabraHolod.qml फ़ाइल में लिखा गया था, लेकिन इसका Qt Quick3D से कोई लेना-देना नहीं है, और इसलिए हम इसे हटा देंगे। चलो खरोंच से हमारे qml कोड लिखना शुरू करते हैं। पहले पुनरावृति में, यह इस प्रकार होगा:

import Qt3D 1.0 Viewport { Mesh { id: refrigirator; source: "refr.3ds" } Mesh { id: ufo; source: "ufo.3ds" } Mesh { id: bottom_door; source: "door.3ds" } Item3D { mesh: refrigirator } Item3D { mesh: ufo;} Item3D { mesh: bottom_door; } }

कोड के माध्यम से चलते हैं। पहली पंक्ति में, हम Qt3D पैकेज को आयात करते हैं, जो कि अगर आपने सब कुछ सही तरीके से स्थापित किया है, तो अवश्य पाया जाना चाहिए और 3D ऑब्जेक्ट्स को प्रदर्शित करने का काम करना चाहिए। यदि आप, मेरी तरह, इंस्टॉलेशन स्टेज पर कुछ गड़बड़ करते हैं (मेरे पास क्यूटी लाइब्रेरी का एक अलग संस्करण स्थापित है), तो यहाँ एक बहुत ही समझदार लेख है जिसमें बताया गया है कि काम करने के लिए क्या और कहाँ से अपना हाथ डालना है और एक दूसरे को समझाएं कि कैसे संकलित किया जाए। Qt Quick3D मैन्युअल रूप से।

अगला, हम व्यूपोर्ट तत्व बनाते हैं - यह एक कंटेनर है जिसमें आप 3 डी ऑब्जेक्ट जोड़ सकते हैं और उनके प्रदर्शन (प्रकाश, कैमरा स्थिति, आदि) के लिए कुछ पैरामीटर सेट कर सकते हैं। अगला, हम अपनी 3ds फ़ाइलों में से 3 आयात करते हैं (प्रत्येक एक अलग कैश में) और 3 आइटम 3 डी तत्व बनाते हैं ( आईडी संपत्ति द्वारा मेष के साथ उनके सहयोग पर ध्यान दें)।

यदि आप Ctrl + R (प्रारंभ) दबाते हैं, तो आप परिणाम भी देख सकते हैं:

कुछ अजीब है, है ना? :) वास्तव में, सब कुछ सही ढंग से काम करता है। बात यह है कि अभी तक न तो हमारे आवेदन की खिड़की, न ही 3 डी दृश्य के मापदंडों को कॉन्फ़िगर किया गया है और इसलिए हम अपनी वस्तुओं को एक अकल्पनीय स्थिति से एक छोटी खिड़की में देखते हैं। यदि आप मैन्युअल रूप से विंडो को बड़ा बनाते हैं और स्क्रॉलिंग का उपयोग करते हैं, तो आप हमारे दृश्य को कुछ इस तरह देखेंगे:

शुरुआत खराब नहीं है - कोड की 10 पंक्तियों में हमारे पास पहले से ही एक एप्लिकेशन है जो किसी तरह 3 डी ऑब्जेक्ट्स के एक समूह को प्रदर्शित करता है (ठीक है, यदि आप इसे C ++ \ Java \ .NET \ .NET \ Your_Language?) में लिखते हैं, तो इसमें कितनी लाइनें होंगी।

आगे बढ़ते हैं

तो, हमारी वस्तुएं, निश्चित रूप से प्रदर्शित होती हैं, लेकिन किसी भी तरह ऐसा नहीं है, वहां नहीं है और अभी तक नहीं चल रही है। हम धीरे-धीरे इस व्यवसाय में सुधार करेंगे। सबसे पहले, Rectangle रूट तत्व को कोड में जोड़ें (इसके लिए हमें QtQuick 1.0 मॉड्यूल आयात करना होगा), जो हमें विंडो का आकार सेट करने की अनुमति देगा:

 import QtQuick 1.0 import Qt3D 1.0 Rectangle { color: "black" width: 400 height: 600 Viewport { anchors.fill: parent Mesh { id: refrigirator; source: "refr.3ds" } Mesh { id: ufo; source: "ufo.3ds" } Mesh { id: bottom_door; source: "door.3ds" } Item3D { mesh: refrigirator } Item3D { mesh: ufo;} Item3D { mesh: bottom_door; } } }

आयत के लिए, हम प्रारंभिक आकार और रंग निर्धारित करते हैं, और व्यूपोर्ट के लिए, हमने कहा कि इसे माता-पिता के पूरे आकार तक फैलाया जाना चाहिए। परिणाम:

खिड़की सही आकार है, लेकिन हम अभी भी नीचे से वस्तु को देख रहे हैं। कैमरे की स्थिति को ठीक करें। ऐसा करने के लिए, हमारे व्यूपोर्ट की कैमरा प्रॉपर्टी का उपयोग करें:

 camera: Camera { id: viewCamera eye: Qt.vector3d(15,10,40) center: Qt.vector3d(-2,10,0) }

इस स्तर पर पूर्ण कोड

आंख की संपत्ति यह निर्धारित करती है कि कैमरा कहां है, और केंद्र उस बिंदु को निर्धारित करता है जिसे वह देख रहा है। वर्तमान परिणाम:

लेकिन पहले से ही बुरा नहीं है! अगर हम सिर्फ Qt Quick3D में एक 3 डी ऑब्जेक्ट को देखना चाहते हैं, तो हम इसे पूरा कर सकते हैं। लेकिन नहीं! हमारा लक्ष्य आंदोलन है।

हैंडलर पर क्लिक करें

तो, हमारे पास रेफ्रिजरेटर का एक प्रदर्शन मॉडल है, जो वास्तव में एक दृश्य में 3 मॉडल है। हम क्लिक करके दरवाजा खुला बनाने की कोशिश करेंगे और एक यूएफओ बाहर उड़ जाएगा। सबसे पहले, एक क्लिक हैंडलर। यह सरल है, Viewport में एक माउसएयर तत्व जोड़ें, जो माता-पिता के पूरे आकार तक फैला हुआ है। क्लिक करके, हम अभी के लिए आउटपुट लिखेंगे (केवल यह जांचने के लिए कि क्या काम करता है):

 MouseArea { anchors.fill: parent onClicked: { Qt.quit(); } }

इस स्तर पर पूर्ण कोड

भागो, क्लिक करें - कार्यक्रम समाप्त होता है। यह काम करता है।

रूपांतरण और एनिमेशन

शुरुआत दरवाजे से करते हैं। इसे खोलने और बंद करने के लिए, हमें निम्नलिखित काम करने होंगे:

१ । एक रोटेशन 3 डी तत्व बनाएं जो बताता है कि (जिसके चारों ओर कुल्हाड़ियों) एक निश्चित वस्तु घूमती है।

 Rotation3D { id: doorOpen angle: 0 axis: Qt.vector3d(0, 1, 0) origin: Qt.vector3d(-3, 0, 0) }

२ । रोटेशन के अलग-अलग दिशाओं के साथ घूर्णन 3 डी (एक को दरवाजा खोलने के लिए, दूसरे को बंद करने के लिए) के लिए दो कॉल में होगा, जिसमें सेक्विएशन एनिमीशन तत्व बनाएं।

 SequentialAnimation { id: doorOpenAndClose; NumberAnimation { target: doorOpen; property: "angle"; from: 0; to : -80.0; duration: 800; easing.type: Easing.OutBounce} NumberAnimation { target: doorOpen; property: "angle"; from: -80; to : 0.0; duration: 1200; easing.type: Easing.OutCubic} }

३ । हमारे दरवाजे के लिए Item3D के लिए Rotation3D तत्व को बांधें।

  Item3D { mesh: bottom_door; transform: [doorOpen] }

४ । एनीमेशन शुरू करने वाले क्लिक हैंडलर से एक मध्यवर्ती फ़ंक्शन को कॉल करें।

 MouseArea { anchors.fill: parent onClicked: { fullScene.openDoor(); } } ... Item3D { id: fullScene function openDoor() { doorOpenAndClose.loops = 1; doorOpenAndClose.start(); } ... }

इस स्तर पर पूर्ण कोड

भागो, क्लिक करो। बिंगो!

दरवाजा हमारे यूएफओ के अंदर खुलता है और दिखाता है (जबकि यह पूरी तरह से शांति से लटका हुआ है)। एक के बाद एक यूएफओ प्रस्थान को एनिमेट करने का कार्य एक दरवाजा खोलने के समान है। इसलिए, अनावश्यक टिप्पणियों के बिना, अंतिम कोड:

 import QtQuick 1.0 import Qt3D 1.0 Rectangle { color: "black" width: 400 height: 600 Viewport { anchors.fill: parent MouseArea { anchors.fill: parent onClicked: { fullScene.openDoor(); } } camera: Camera { id: viewCamera eye: Qt.vector3d(15,10,40) center: Qt.vector3d(-2,10,0) } Item3D { id: fullScene function openDoor(){ doorOpenAndClose.loops = 1; doorOpenAndClose.start(); ufoFlyOutAndTeleportBack.loops = 1; ufoFlyOutAndTeleportBack.start(); } Mesh { id: refrigirator; source: "refr.3ds" } Mesh { id: ufo; source: "ufo.3ds" } Mesh { id: bottom_door; source: "door.3ds" } Item3D { mesh: refrigirator } Item3D { mesh: ufo; transform: [ufoFlyOut]} Item3D { mesh: bottom_door; transform: [doorOpen] } // ------------------ Transform + Animations ------------------ Rotation3D { id: doorOpen angle: 0 axis: Qt.vector3d(0, 1, 0) origin: Qt.vector3d(-3, 0, 0) } Rotation3D { id: ufoFlyOut angle: 0 axis: Qt.vector3d(0, 3, -1) origin: Qt.vector3d(10, 0, 0) } SequentialAnimation { id: doorOpenAndClose; NumberAnimation { target: doorOpen; property: "angle"; from: 0; to : -80.0; duration: 800; easing.type: Easing.OutBounce} NumberAnimation { target: doorOpen; property: "angle"; from: -80; to : 0.0; duration: 1200; easing.type: Easing.OutCubic} } SequentialAnimation { id: ufoFlyOutAndTeleportBack; NumberAnimation { target: ufoFlyOut; property: "angle"; from: 0; to : 100.0; duration: 1700; easing.type: Easing.OutCurve} NumberAnimation { target: ufoFlyOut; property: "angle"; from: 100; to : 0.0; duration: 0; easing.type: Easing.OutCubic} } } } }

और फिर से परिणाम:

सभी परियोजना स्रोतों को यहां लिया जा सकता है ।

विषय पर उपयोगी सामग्री

पेश है क्विक क्विक 3 डी और डाउनलोड कई प्लेटफॉर्म के लिए लिंक
मॉडल कार बनाने पर कूल ट्यूटोरियल
Qt Quick3D श्वेत पत्र

Qt Quick3D का परिचय