aframe
एसेट मैनेजमेंट सिस्टम

परिचय

टिप्पणियों

संपत्ति का उदाहरण उपयोग

हम संपत्ति को <a-assets> भीतर रखते हैं, और हम <a-assets> <a-scene> भीतर <a-scene> <a-assets> <a-scene> । आस्तियों में शामिल हैं:

• <a-asset-item> - विविध संपत्ति जैसे 3 डी मॉडल और सामग्री
• <audio> - ध्वनि फ़ाइलें
• <img> - छवि बनावट
• <video> - वीडियो बनावट

दृश्य तब तक प्रस्तुत नहीं होगा या तब तक आरंभ नहीं करेगा जब तक कि ब्राउज़र सभी संपत्ति या परिसंपत्ति प्रणाली को प्राप्त नहीं कर लेता (या त्रुटियां समाप्त हो जाती हैं)।

हम अपनी संपत्ति को <a-assets> संपत्ति में परिभाषित कर सकते हैं और चयनकर्ताओं का उपयोग करके हमारी संस्थाओं से उन परिसंपत्तियों को इंगित कर सकते हैं:

<a-scene>
  <!-- Asset management system. -->
  <a-assets>
    <a-asset-item id="horse-obj" src="horse.obj"></a-asset-item>
    <a-asset-item id="horse-mtl" src="horse.mtl"></a-asset-item>
    <a-mixin id="giant" scale="5 5 5"></a-mixin>
    <audio id="neigh" src="neigh.mp3"></audio>
    <img id="advertisement" src="ad.png">
    <video id="kentucky-derby" src="derby.mp4"></video>
  </a-assets>

  <!-- Scene. -->
  <a-plane src="advertisement"></a-plane>
  <a-sound src="#neigh"></a-sound>
  <a-entity geometry="primitive: plane" material="src: #kentucky-derby"></a-entity>
  <a-entity mixin="giant" obj-model="obj: #horse-obj; mtl: #horse-mtl"></a-entity>
</a-scene>

दृश्य और इसकी इकाइयाँ प्रारंभिक होने और प्रतिपादन करने से पहले हर परिसंपत्ति (टाइमआउट तक) की प्रतीक्षा करेंगी।

क्रॉस-ओरिजिनल रिसोर्स शेयरिंग (कोर)

चूंकि ए-फ्रेम एक्सएचआर का उपयोग करके संपत्ति प्राप्त करता है , ब्राउज़र सुरक्षा के लिए ब्राउज़र को क्रॉस- ऑरिजनल रिसोर्स शेयरिंग (कोर) हेडर के साथ परिसंपत्तियों की सेवा करने की आवश्यकता होती है यदि परिसंपत्ति एक अलग डोमेन पर होती है। अन्यथा, हमें दृश्य के रूप में उसी मूल पर परिसंपत्तियों की मेजबानी करनी होगी।

कुछ विकल्पों के लिए, GitHub Pages कोर के हेडर के साथ सब कुछ प्रदान करता है। हम GitHub Pages को एक सरल परिनियोजन प्लेटफ़ॉर्म के रूप में सुझाते हैं। या आप ए-फ्रेम + अपलोडकेयर अपलोडर का उपयोग करके संपत्ति भी अपलोड कर सकते हैं, एक ऐसी सेवा जो कॉर्स हेडर सेट के साथ फाइल पेश करती है।

यह देखते हुए कि CORS हेडर सेट कर रहे हैं, <a-assets> स्वचालित रूप से सेट crossorigin मीडिया तत्वों पर जिम्मेदार बताते हैं (जैसे, <audio> , <img> , <video> ) यदि यह पता लगाता संसाधन एक अलग डोमेन पर है।

ऑडियो और वीडियो को लोड करना

यदि हम autoplay सेट करते हैं या यदि हम preload="auto" सेट करते हैं तो ऑडियो और वीडियो एसेट दृश्य को ब्लॉक कर देंगे।

<a-scene>
  <a-assets>
    <!-- These will not block. -->
    <audio src="blockus.mp3"></audio>
    <video src="loadofblocks.mp4"></video>

    <!-- These will block. -->
    <audio src="blocky.mp3" autoplay></audio>
    <video src="blockiscooking.mp4" preload="auto"></video>
  </a-assets>
</a-scene>

एक टाइमआउट सेट करना

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

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

<a-scene>
  <a-assets timeout="10000">
    <!-- You got until the count of 10 to load else the show will go on without you. -->
    <img src="bigimage.png">
  </a-asset>
</a-scene>

निर्दिष्ट रिस्पांस टाइप

<a-asset-item> द्वारा प्राप्त सामग्री को सादे पाठ के रूप में लौटाया जाएगा। यदि हम एक अलग प्रतिक्रिया प्रकार का उपयोग करना चाहते हैं जैसे कि arraybuffer , का उपयोग करें <a-asset-item> arraybuffer <a-asset-item> की response-type विशेषता:

<a-asset-item response-type="arraybuffer" src="model.gltf"></a-asset-item>

यह आंतरिक रूप से कैसे काम करता है

ए-फ्रेम में प्रत्येक तत्व <a-node> , AFRAME.ANode प्रोटोटाइप से विरासत में AFRAME.ANode । ANode लोड और इनिशियलाइज़ेशन ऑर्डर को नियंत्रित करता है। प्रारंभिक करने के लिए एक तत्व के लिए (चाहे वह <a-assets> , <a-asset-item> , <a-scene> , या <a-entity> ) हो, अपने बच्चों को पहले से ही प्रारंभ करना होगा। नोड्स ऊपर नीचे शुरू करते हैं।

<a-assets> ANode <a-assets> एक ANode , और यह लोड होने से पहले अपने बच्चों के लोड होने का इंतजार करता है। और चूंकि <a-assets> <a-scene> का बच्चा है, इसलिए दृश्य को प्रभावी रूप से सभी संपत्तियों के लोड होने की प्रतीक्षा करनी चाहिए। हमने अतिरिक्त लोड तर्क को <a-entity> भी जोड़ा ताकि वे स्पष्ट रूप से <a-assets> लिए प्रतीक्षा करें अगर हमने परिभाषित किया है <a-assets> ।

<a-asset-item> फ़ाइलों को लाने के लिए THREE.FileLoader का उपयोग करता है। तीन. THREE.Cache में THREE.Cache गए डेटा को THREE.Cache । प्रत्येक तीन.जेएस लोडर THREE.FileLoader से विरासत में THREE.FileLoader , चाहे वे ColladaLoader , OBJLoader , ImageLoader , आदि हों और वे सभी का उपयोग करते हैं और केंद्रीय THREE.Cache । THREE.Cache बारे में जानते हैं। यदि ए-फ़्रेम पहले से ही एक फ़ाइल ले आया है, तो ए-फ्रेम इसे फिर से लाने की कोशिश नहीं करेगा।

इस प्रकार, जब से हम एंटिटीज को एसेट्स पर इनिशियलाइजेशन ब्लॉक करते हैं, समय के हिसाब से लोड हो जाता है, तब तक सभी एसेट्स पहले से ही लाई जा चुकी होती हैं। जब तक हम परिभाषित करते हैं <a-asset-item> THREE.FileLoader <a-asset-item> s, और इकाई कुछ फॉर्म THREE.FileLoader का उपयोग करके फ़ाइलें ला THREE.FileLoader , तब कैशिंग स्वचालित रूप से काम करेगा।

FileLoader और कैश तक पहुँचना

Three.js तक पहुंचने के लिए FileLoader अगर हम और अधिक बारीकी से सुनना चाहते हैं:

console.log(document.querySelector('a-assets').fileLoader);

XHR प्रतिक्रियाओं को संग्रहीत करने वाले कैश का उपयोग करने के लिए:

console.log(THREE.Cache);