How to build an AR app

Sep 14, 2025

कैसे करना है

पेज 1 में से 3:

एक एआर ऐप बनाएं: चरण 01-10

[2 9] एक एआर ऐप बनाएं: चरण 01-10

[2 9] एक एआर ऐप बनाएं: चरण 11-20

[2 9] एक कस्टम एआर मार्कर कैसे बनाएं

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

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

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

महसूस करें कि आपका कौशल स्तर काफी नहीं है? ए [2 9] वेबसाइट निर्माता

बिना किसी झगड़े के आपके लिए एक साइट बनायेगा। या यदि आप एक जटिल साइट के साथ डाइविंग कर रहे हैं, तो प्राप्त करें [2 9] वेब होस्टिंग सही।

एकाधिक मार्करों का उपयोग करके, उस मार्कर के आधार पर किसी प्रक्रिया या किसी भी अद्वितीय सामग्री के विभिन्न चरणों को दिखाना संभव है। इस उदाहरण में, हमारा ऐप पानी चक्र का पता लगाएगा। एक कस्टम एआर मार्कर बनाने के तरीके सीखने के लिए पृष्ठ 3 पर जाएं।

[6 9] 01. शुरू करें

खोलें [2 9] शुरू

अपने विचार में और अंदर फ़ोल्डर [2 9] index.html पृष्ठ स्क्रिप्ट टैग खोजें। ट्यूटोरियल में सभी कोड इन के अंदर जाएंगे। ऐप का परीक्षण करने के लिए आपको एक सर्वर की आवश्यकता होगी और यदि आप किसी फ़ोन पर परीक्षण करना चाहते हैं तो आपको फ़ाइलों को HTTPS सर्वर पर होस्ट करने की आवश्यकता होगी। स्क्रिप्ट टैग में प्रारंभिक चर जोड़ें:

 वीएआर मॉडल 1, मॉडल 2, मॉडल 3, गिनती = 0,
  कण, particlecount, कण प्रणाली;
  var लोडर = नया तीन.कॉलडालोडर ();

[6 9] 02. मॉडल लोड करें

[8 9]

छवि को बढ़ाने के लिए शीर्ष दाईं ओर आइकन का उपयोग करें

एआर दृश्य काम करने के लिए, एक मॉडल लोड किया जाएगा। आप देखेंगे कि एक बार लोड किया गया यह चर में संग्रहीत किया जाता है [2 9] मॉडल 1

। यह तब तीन चरणों के लिए दो बार स्केल और क्लोन किया जाता है। तीन अलग-अलग मॉडल लोड करने के बजाय, एक मॉडल में सभी समायोजन कोड में इसे जल्दी लोड करने के लिए कोड में किया जाएगा।

 लोडर। Load ('Landscape1.Dee', फ़ंक्शन (कोलाडा) {
  मॉडल 1 = collada.scene;
  model1.scale.x = model1.scale.y = model1.scale.z = 0.015;
  model2 = model1.clone ();
  मॉडल 3 = model1.clone ();

[6 9] 03. ट्विनिंग सेट करें

पहले मॉडल पर, बादल दृश्य में पाया जा रहा है और यह एक नई स्थिति में फिसल जाएगा ताकि बादल समुद्र से बाहर हो जाए। यह हमेशा के लिए दोहराने के लिए तैयार है और ट्वीन को एनिमेट करने और क्लाउड बनाने के लिए आठ सेकंड में आठ सेकंड लगेंगे।

 var cloud1 = model1.getobjectbyname ("बादल", सत्य);
  क्लाउड 1 = cloud1.children ;
  नया tween.tween (cloud1.position) .to ({
  x: 0,
  वाई: 30,
  जेड: -15
  }, 8000) .repeat (अनंतता) .easing (tween.easing.quadratic.out) .start ();

[6 9] 04. इसे स्केल करें

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

 clouph1.scale.x = cloup1.scale.y = clound1.scale.z = 0.0;
  नया TWEN.TWEEN (CLOUD1.SCALE) .to ({
  x: 1,
  y: 1,
  जेड: 1
  }, 8000) .repeat (अनंतता) .easing (tween.easing.quadratic.out) .start ();

[6 9] 05. दूसरा बादल सेट करें

the water cycle scene — एक दूसरा बादल पहाड़ के ऊपर बैठेगा

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

 var cloud2 = model2.getObjectByName ("बादल", सत्य);
  क्लाउड 2 = क्लाउड 2. चिल्ड्रेन ;
  cloud2.position.set (0, 30, -15);
  नया tween.tween (cloud2.position) .to ({
  x: 0,
  वाई: 50,
  जेड: -145
  }, 12000) .repeat (अनंतता) .easing (tween.easing.quadratic.out) .start ();

[6 9] 06. इसे बारिश करें

इस भ्रम के काम को बनाने की कुंजी क्लाउड को बारिश की अनुमति दे रही है। पानी के चक्र में बादल की बारिश होती है क्योंकि यह जमीन पर अधिक हो जाती है। प्रभाव प्राप्त करने के लिए, एक कण प्रणाली का उपयोग किया जाएगा। बारिश की बूंद छवि का उपयोग करके यहां कणों और कण सामग्री की मात्रा बनाई गई है।

 var textureloader = नया तीन.textureloader ();
particlecount = 1500;
कण = नई तीन.जोमेट्री ();
var pmaterial = नया तीन.पॉइंटमटेरियल ({
  रंग: 0x3a4e5d,
  आकार: 0.05,
  मानचित्र: textureloader.load ("img / rain.png"),
  phatest: 0.3,
  अस्पष्टता: 0.9,
  पारदर्शी: सच});

[6 9] 07. रेनड्रॉप्स बनाएं

लूप के लिए ए का उपयोग करके, 1500 रेनड्रॉप्स को एक यादृच्छिक एक्स, वाई, जेड स्थिति के साथ बनाया जा सकता है जो बादल और जमीन के बीच होगा। बारिश को और अधिक प्राकृतिक दिखने के लिए प्रत्येक रेनड्रॉप को अपनी यादृच्छिक वेग दिया जाता है। कण को ज्यामिति के सही कशेरुक में धकेल दिया जाता है।

 के लिए (var i = 0; i & lt; particlecount; i ++) {
  var px = math.random () * 60 - 30,
  py = math.random () * -10,
  pz = math.random () * 20 - 10;
  var कण = नया तीन.vector3 (पीएक्स, पीई, पीजेड);
  particle.velocity = नया तीन.vector3 (0, - (math.random () * 0.9), 0);
  particles.vertices.push (कण); }

[6 9] 08. कण प्रणाली पर काम करते हैं

अब कण प्रणाली ज्यामिति और सामग्री से बना है। कणों को क्रमबद्ध करने के लिए सेट किया जाता है ताकि जेड-ऑर्डर सही हो और फिर बारिश के कणों को दूसरे बादल का बच्चा बनाया जाए। कहीं भी बादल ट्वीन हो गया है, बारिश भी इस प्रकार है, इसलिए बादल के बाद बारिश को एनिमेट करने की कोई आवश्यकता नहीं है!

 कणसिस्टम = नया तीन। प्वाइंट्स (कण, पीएमटेरियल);
particlesystem.sortparticles = सत्य;
Cloud2.add (कणिका प्रणाली);

[6 9] 09. अंतिम मॉडल पदों को सेट करें

अंतिम मॉडल में, क्लाउड को दूसरे क्लाउड एनीमेशन चक्र के अंतिम स्थान पर स्थानांतरित किया जाता है। यह नया बादल सिर्फ आकाश में बैठने और एनिमेट नहीं करने जा रहा है। इसके बजाए नदी एनिमेट करने जा रही है, इसलिए नदी मॉडल को एक चर में संग्रहीत किया जाता है, इसे ट्विन जोड़ने के लिए तैयार है।

 var cloud3 = model3.getobjectbyname ("बादल", सत्य);
  क्लाउड 3 = क्लाउड 3. चिल्ड्रेन ;
  cloud3.position.set (0, 50, -145);
  var नदी = model3.getObjectbyName ("नदी", सत्य);
  नदी = नदी। चिल्ड्रेन ;

[6 9] 10. नदी को भरें

the water cycle model — नदी में पानी के स्तर में वृद्धि की जरूरत है

पानी के चक्र के तीसरे चरण में पानी पहाड़ियों से दूर चला जाता है, नदियों और झीलों को भरता है क्योंकि यह समुद्र में लौटता है। यह सबसे सूक्ष्म आंदोलन है क्योंकि यह नदी की ऊंचाई को आगे बढ़ाएगा ताकि यह भरने के लिए प्रतीत हो सके। सब कुछ अब प्रीलोडेड है, इसलिए [2 9] इस में

समारोह कहा जाता है।

 नई tween.tween (नदी .position) .to ({
  y: 3
  }, 8000) .repeat (अनंतता) .easing (tween.easing.quadratic.out) .start ();
  इस में();
});

बचाने के लिए डिजाइन फाइलें मिलीं? हमारे गाइड को देखें [2 9] घन संग्रहण

।

[2 9] अगला पृष्ठ: एआर कार्यक्षमता और मार्कर जोड़ें

1
[2 9] 2

[2 9] 3

वर्तमान पृष्ठ: एक एआर ऐप बनाएं: चरण 01-10

अगला पृष्ठ एक एआर ऐप बनाएं: चरण 11-20

How to build an AR app

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to test React sites and apps

How to speed up and optimise WordPress sites

आपको जावास्क्रिप्ट कोड विभाजन के बारे में जानने की जरूरत है

Turn 2D illustrations into 3D art

How to emphasise the focal point of an image

How to create amazing effects with CSS Shapes

तेल चित्रकला के साथ कैसे शुरू किया जाए

गीले-इन-गीले पेंटिंग तकनीक के साथ पकड़ें

श्रेणियाँ