aframe ट्यूटोरियल
दूर से शुरुआत हो रही है
खोज…
टिप्पणियों
इस खंड में यह बताया गया है कि क्या है, और क्यों एक डेवलपर इसका उपयोग करना चाहता है।
इसमें किसी भी बड़े विषयों का उल्लेख करना चाहिए, और संबंधित विषयों के लिए लिंक करना चाहिए। चूंकि नए सिरे से प्रलेखन नया है, इसलिए आपको उन संबंधित विषयों के प्रारंभिक संस्करण बनाने की आवश्यकता हो सकती है।
संस्करण
ए-फ्रेम 0.x
| संस्करण | रिलीज़ की तारीख |
|---|---|
| 0.6 | 2017/05/25 |
| 0.5 | 2017/02/10 |
| 0.4 | 2016/12/17 |
| 0.3 | 2016/08/18 |
विरासत संस्करण
| संस्करण | रिलीज़ की तारीख |
|---|---|
| 0.2 | 2016/03/26 |
| 0.1 | 2015/12/17 |
शुरू करना
कुछ भी स्थापित किए बिना ए-फ़्रेम को एक सादे HTML फ़ाइल से विकसित किया जा सकता है! ग्लिच पर स्टार्टर उदाहरण को हटाने के लिए ए-फ्रेम को आज़माने का एक शानदार तरीका, एक ऑनलाइन कोड संपादक जो तुरंत होस्ट करता है और मुफ्त में वितरित करता है। या .html फ़ाइल बनाएँ और head में A- फ्रेम शामिल करें:
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
जेएस बिल्ड शामिल करें
HTML फ़ाइल में A- फ्रेम को शामिल करने के लिए, हम CDN बिल्ड की ओर इशारा करते हुए एक script टैग छोड़ते हैं:
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
Npm से स्थापित करें
हम npm के माध्यम से A- फ्रेम भी स्थापित कर सकते हैं:
$ npm install aframe
तब हम अपने एप्लिकेशन में ए-फ्रेम को बंडल कर सकते हैं। उदाहरण के लिए, Browserify या Webpack के साथ:
require('aframe');
यदि आप npm का उपयोग करते हैं, तो आप कोण, A- फ़्रेम के लिए कमांड लाइन इंटरफ़ेस का उपयोग कर सकते हैं। कोण एकल कमांड के साथ एक दृश्य टेम्पलेट को इनिशियलाइज़ कर सकता है:
npm install -g angle && angle initscene
विशेषताएं
वीआर मेड सिंपल
बस एक script टैग और a-scene । ए-फ्रेम 3 डी बॉयलरप्लेट, वीआर सेटअप, और डिफ़ॉल्ट नियंत्रण संभाल लेगा। कुछ भी नहीं स्थापित करने के लिए, कोई कदम नहीं।
घोषणात्मक HTML
HTML पढ़ना, समझना और कॉपी-पेस्ट करना आसान है। एचटीएमएल के शीर्ष पर आधारित होने के कारण, ए-फ्रेम सभी के लिए सुलभ है: वेब डेवलपर्स, वीआर उत्साही, कलाकार, डिजाइनर, शिक्षक, निर्माता, बच्चे।
क्रॉस-प्लेटफॉर्म वीआर
सभी संबंधित नियंत्रकों के लिए समर्थन के साथ Vive, Rift, Daydream, GearVR और कार्डबोर्ड के लिए VR एप्लिकेशन बनाएं। हेडसेट या नियंत्रक नहीं है? कोई दिक्कत नहीं है! ए-फ्रेम अभी भी मानक डेस्कटॉप और स्मार्टफोन पर काम करता है।
इकाई-घटक वास्तुकला
ए-फ्रेम एक शक्तिशाली थ्री.जेएस फ्रेमवर्क है, जो एक घोषणात्मक, रचना योग्य, पुन: प्रयोज्य इकाई-घटक संरचना प्रदान करता है। जेएस। एचटीएमएल केवल हिमशैल का सिरा है; डेवलपर्स के पास जावास्क्रिप्ट, DOM एपीआई, तीन.js, WebVR, और WebGL की असीमित पहुंच है।
प्रदर्शन
ए-फ्रेम वेबवीआर के लिए जमीन से अनुकूलित है। जबकि A- फ़्रेम DOM का उपयोग करता है, इसके तत्व ब्राउज़र लेआउट इंजन को नहीं छूते हैं। 3 डी ऑब्जेक्ट अपडेट सभी मेमोरी में एक ही अनुरोध के तहत छोटे ओवरहेड के साथ किया जाता है। संदर्भ के लिए, ए-पेंटर देखें, ए-फ्रेम में निर्मित झुकाव ब्रश क्लोन जो मूल (90+ एफपीएस) की तरह चलता है।
उपकरण अज्ञेय
चूंकि वेब को HTML की धारणा पर बनाया गया था, ए-फ्रेम अधिकांश पुस्तकालयों, फ्रेमवर्क, और रिएक्ट, प्रीक्ट, वीयू.जेएस, कोणीय, डी 3.जेएस, एम्बर.जेएस, jQuery सहित उपकरण के साथ संगत है।
विजुअल इंस्पेक्टर
ए-फ्रेम एक आसान निर्मित दृश्य 3D इंस्पेक्टर प्रदान करता है। किसी भी ए-फ़्रेम दृश्य को खोलें, ctrl + alt + i को हिट करें, और हुड के पीछे झांकने के लिए चारों ओर उड़ें!
रजिस्ट्री
डेवलपर्स द्वारा प्रकाशित शक्तिशाली घटक लें और उन्हें सीधे HTML से प्लग करें। यूनिटी एसेट स्टोर के समान, ए-फ़्रेम रजिस्ट्री आसान खोज के लिए इन घटकों को इकट्ठा और क्यूरेट करती है।
अवयव
ज्यामितीय, सामग्री, रोशनी, एनिमेशन, मॉडल, किरणकारक, छाया, स्थिति ऑडियो, पाठ और Vive / Touch / Daydream / GearVR / कार्डबोर्ड नियंत्रण जैसे ए-फ्रेम के मुख्य घटकों के साथ चल रहे मैदान को हिट करें। कण प्रणाली, भौतिकी, बहुउद्देशीय, महासागरों, पहाड़ों, भाषण मान्यता, गति पर कब्जा, टेलीपोर्टेशन, सुपर हैंड्स, और संवर्धित वास्तविकता जैसे सामुदायिक घटकों के साथ और भी आगे बढ़ें।
एआर के लिए शुरू हो रही है
वेब पर AR एप्लिकेशन बनाने के लिए, आपको AR.js नाम से एक नया पुस्तकालय जोड़ना होगा । सबसे पहले आप AR.js. द्वारा पीछा किया गया ए-फ्रेम लोड करते हैं
Newt आपको ए-फ्रेम a-scene -टैग का उपयोग करके दृश्य सेट करना होगा जिसमें artoolkit -टैटर जोड़ा गया है। sourceType आपका वेबकैम होना चाहिए। इसके इस्तेमाल से आपके स्मार्टफोन का फॉन्ट-कैमरा भी सपोर्ट करता है।
इन a-marker-camera -टैग रिकॉर्ड किए गए स्क्रीन के अंदर एक छवि को चिह्नित करता है जो एक छवि का प्रतिनिधित्व करता है। इस मामले में यह marker.png । marker.png । जब कैमरा इस मार्कर का पता लगाता है तो बॉक्स को मार्कर पर प्रदर्शित किया जाएगा।
नीचे आपको उदाहरण कोड मिल सकता है:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>
<a-scene artoolkit='sourceType: webcam;'>
<a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='marker.png'></a-marker-camera>
</a-scene>
</body>