एक उन्नत वास्तविकता मार्कर कोड कैसे करें

Feb 2, 2026

कैसे करना है

2 का पृष्ठ 1:

पृष्ठ 1

[2 9] पृष्ठ 1

[2 9] पृष्ठ 2

बढ़ी हुई वास्तविकता थोड़ी देर के लिए आसपास रही है, लेकिन वेबआरटीसी (रीयल-टाइम संचार) के समर्थन के साथ, एंड्रॉइड और डेस्कटॉप डिवाइस पर फोन के कैमरे तक पहुंचने के लिए यह संभव है।

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

[4 9]

[2 9] ध्यान दें:

मोबाइल क्रोम ब्राउज़र पर यह काम करने के लिए, सामग्री को एक सुरक्षित सॉकेट परत (यानी मानक HTTP के बजाय https पर) द्वारा परोसा जाना चाहिए। डेस्कटॉप वर्तमान में नियमित HTTP के साथ काम करता है।

इस ट्यूटोरियल के लिए आवश्यक फ़ाइलों को डाउनलोड करने के लिए, पर जाएं फाइल्सिलो [5 9] , ट्यूटोरियल के बगल में मुफ्त सामग्री और मुफ्त सामग्री का चयन करें।

इस ट्यूटोरियल में मैं आपको दिखाने के लिए जा रहा हूं कि एक फोन कैमरे के सामने एक बढ़ी हुई वास्तविकता मार्कर कैसे रखें। यह ब्राउज़र द्वारा उठाया जाएगा और Ar.js , और सामग्री को 3 डी में शीर्ष पर मैप किया जाएगा, जो एआर मार्कर से चिपके हुए हैं।

इस तकनीक के लिए बहुत सारे संभावित उपयोग हैं। उदाहरण के लिए, आप एक साधारण 3 डी बनाना चाहते हैं रचनात्मक फिर से शुरू , और फिर एआर मार्कर को आपके व्यापार कार्ड पर मुद्रित किया जा सकता है। चूंकि आप मार्कर के चारों ओर घूम सकते हैं, यह उन सामग्री के लिए बहुत अच्छा है जिसे आप विभिन्न कोणों से देखना चाहते हैं - एक निश्चित स्वीडिश फर्नीचर निर्माता के बारे में सोचें जो आपको एनिमेटेड कदम प्रदान करता है जिसे किसी भी कोण से देखा जा सकता है! ऐसी कई संभावनाएं हैं जिनके लिए यह उपयोगी हो सकता है। [2 9]

01. पुस्तकालयों को जोड़ें

Start by linking up your project libraries — अपनी परियोजना पुस्तकालयों को जोड़कर शुरू करें

एक बार [9 6] ट्यूटोरियल फ़ाइलों को डाउनलोड किया

प्रोजेक्ट फ़ोल्डर पर जाएं, अपने कोड संपादक में स्टार्ट फ़ोल्डर खोलें और फिर खोलें [2 9] index.html संपादन के लिए फ़ाइल। इस स्तर पर पुस्तकालयों को जुड़े रहने की आवश्यकता है - और इस परियोजना के लिए कुछ ही हैं! पुस्तकालय तीन खंडों में हैं: तीन.जेएस, जेएसर्टूलकिट, और artoolkit और मार्कर के लिए तीन.जेएस एक्सटेंशन।

 & lt; स्क्रिप्ट src = 'js / three.js' & gt; & lt; / स्क्रिप्ट & gt;
& lt; स्क्रिप्ट src = "js / colladaloader.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; स्क्रिप्ट src = "विक्रेता / jsartoolkit5 / बिल्ड / artoolkit.min.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; स्क्रिप्ट SRC = "विक्रेता / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; स्क्रिप्ट src = "threex-artoolkitsource.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; स्क्रिप्ट src = "threex-artoolkitcontext.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; स्क्रिप्ट src = "threex-armarkercontrols.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; स्क्रिप्ट और gt; threex.artoolkitcontext.baseurl = '/' & lt; / स्क्रिप्ट & gt;

02. सीएसएस स्टाइल का ख्याल रखना

में [2 9] सिर

पृष्ठ का खंड, कुछ जोड़ें [2 9] लिपि टैग और स्टाइल नियमों में गिरावट के लिए [2 9] तन और यह [2 9] कैनवास तत्व। यह सुनिश्चित करता है कि वे ब्राउज़र द्वारा जोड़े गए डिफ़ॉल्ट मार्जिन के बिना पृष्ठ पर सही तरीके से रखे गए हैं।

 शरीर {
  मार्जिन: 0 पीएक्स;
  बहुत ज्यादा गोपनीय;
}
कैनवास {
  स्थिति: पूर्ण;
  शीर्ष: 0;
  बाएं: 0;
}

03. वैश्विक चर जोड़ें

में [2 9] तन

पृष्ठ का खंड, कुछ जोड़ें [2 9] लिपि टैग जहां इस ट्यूटोरियल के लिए शेष जावास्क्रिप्ट कोड जाएगा। कई चर आवश्यक हैं: पहली पंक्ति तीन.जेएस के लिए है, एआरजेएस के लिए दूसरा, मॉडल के लिए तीसरा और फिर मॉडल लोड करने के लिए एक चर।

 var रेंडरर, दृश्य, कैमरा;
var artoolkitcontext, onrenderfcts, artoolkitsource, मार्करूट, artoolkitmarker, lasttimemsec;
var मॉडल, Tube1, Tube2, मध्य, विवरण, नाड़ी;
var लोडर = नया तीन.कॉलडालोडर ();

04. मॉडल लोड करें

दृश्य सेट अप करने से पहले मॉडल लोड हो जाएगा ताकि मार्कर का पता चलता है जब इसे प्रदर्शित किया जा सके। यह एआर मार्कर पर बिल्कुल फिट करने के लिए 10 से नीचे स्केल किया गया है। मॉडल चौड़ाई और ऊंचाई के लिए 10 सेमी है, इसलिए मार्कर 1 सेमी है जो तीन.जेएस में 1 वृद्धि का अनुवाद करता है।

LOADER.LOOD ('मॉडल / SCENE.DEE', फ़ंक्शन (कोलाडा) {
  मॉडल = collada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0.1;
  विवरण = model.getObjectByName ("विवरण", सत्य);

05. कुछ प्रदर्शन मुद्दों को ठीक करें

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

 Tube1 = model.getObjectbyName ("Tube1", सत्य);
var a = tube1.children । सामग्री;
a.transparent = सत्य;
A.Side = तीन ["बैकसाइड"];
A.Blending = तीन ["additiveblending"];
a.opacity = 0.9;

06. फिक्स को दोहराएं

If the transparency and additive blending is not enabled, the model looks like this when loaded and displayed on top of the AR marker – not very exciting and barely visible! — यदि पारदर्शिता और additive मिश्रण सक्षम नहीं है, तो मॉडल इस तरह दिखता है कि एआर मार्कर के शीर्ष पर लोड और प्रदर्शित होने पर - बहुत रोमांचक और मुश्किल से दिखाई नहीं दे रहा है!

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

 Tube2 = model.getObjectByName ("Tube2", सत्य);
सी = Tube2.Children । सामग्री;
c.transparent = सत्य;
सी .साइड = तीन ["बैकसाइड"];
C.Blending = तीन ["additiveblending"];
c.opacity = 0.9;

07. अंतिम फिक्स

अंतिम मॉडल डिजाइन के बीच में एक कताई सर्कल है। यह पहले के समान नियमों का पालन करता है लेकिन ऑब्जेक्ट की पीठ को प्रस्तुत नहीं करता है, बस सामने। इन सामग्रियों में से प्रत्येक की अस्पष्टता इसे थोड़ा नरम बनाने के लिए 90% पर सेट की गई है। एक बार मॉडल लोड होने के बाद init फ़ंक्शन कहा जाता है।

 मध्य = model.getOBJectbyName ("मध्य", सत्य);
  b = mid.children । सामग्री;
  बी। Transparent = सत्य;
  B.Blending = तीन ["additiveblending"];
 B.opacity = 0.9;
  इस में();
});

08. दृश्य को प्रारंभ करें

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

 समारोह init () {
  प्रस्तुतकर्ता = नया तीन.वेब्रेंडरर ({
  अल्फा: सच
  });
  renderer.setclearcolor (नया तीन. रंग ('लाइटग्रे'), 0);
  renderer.setsize (window.innerwidth, window.innerheight);
  document.body.appendchild (renderer.domelement);

09. दृश्य प्रदर्शन बनाएँ

रेंडरर ब्राउज़र विंडो के समान आकार के रूप में बनाया जाता है और पृष्ठ के दस्तावेज़ ऑब्जेक्ट मॉडल में जोड़ा जाता है। अब एक खाली सरणी बनाई जाती है जो वस्तुओं को स्टोर करेगी जिन्हें प्रस्तुत किया जाना चाहिए। एक नया दृश्य बनाया गया है ताकि सामग्री इस के अंदर प्रदर्शित की जा सके।

 onrenderfcts = [];
दृश्य = नया तीन.सीन ();

10. प्रकाश

दृश्य में सामग्री देखने में सक्षम होने के लिए, असली दुनिया की तरह, रोशनी की आवश्यकता होती है। एक परिवेश ग्रे लाइट है जबकि दिशात्मक प्रकाश दृश्य में प्रदर्शन पर 3 डी सामग्री को मामूली टिंट देने के लिए एक म्यूट ब्लू रंग है।

[1 9 1] [1 9 2] [1 9 3]

कुछ अलग-अलग टिनट देने के लिए प्रकाश रंगों के साथ प्रयोग

 वीएआर परिवेश = नया तीन.ambientlight (0x666666);
scene.add (परिवेश);
वीएआर दिशात्मकता = नया तीन. डायरेक्शनललाइट (0x4E5BA0);
दिशात्मक uplight.position.set (-1, 1, 1) .normalize ();
scene.add (दिशात्मकता);

[2 9] अगला: अपना एआर मार्कर खत्म करें

1
[2 9] 2

वर्तमान पृष्ठ: पृष्ठ 1

अगला पृष्ठ पृष्ठ 2

एक उन्नत वास्तविकता मार्कर कोड कैसे करें

01. पुस्तकालयों को जोड़ें

02. सीएसएस स्टाइल का ख्याल रखना

03. वैश्विक चर जोड़ें

04. मॉडल लोड करें

05. कुछ प्रदर्शन मुद्दों को ठीक करें

06. फिक्स को दोहराएं

07. अंतिम फिक्स

08. दृश्य को प्रारंभ करें

09. दृश्य प्रदर्शन बनाएँ

10. प्रकाश

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

How to create interiors with Blender’s EEVEE

Make your app work offline with Service Workers

Master large-scale environments in 3ds Max

Draw a figure in under five minutes

Generate endless colour palettes with Khroma

Create a low poly wallpaper in C4D

How to sculpt and pose a cartoon head in ZBrush

Create simple illustrations for the web

श्रेणियाँ