aframe
कर्सर

परिचय

वाक्य - विन्यास

• <-निकाय कर्सर = ""> </ a-कर्सर>
• <एक-कर्सर> </ एक-कर्सर>

पैरामीटर

टिप्पणियों

डिफ़ॉल्ट कर्सर

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

<a-entity camera>
  <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
  </a-entity>
</a-entity>

<a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue">
</a-entity>

// Component to change to random color on click.
AFRAME.registerComponent('cursor-listener', {
  init: function () {
    var COLORS = ['red', 'green', 'blue'];
    this.el.addEventListener('click', function (evt) {
      var randomIndex = Math.floor(Math.random() * COLORS.length);
      this.setAttribute('material', 'color', COLORS[randomIndex]);
      console.log('I was clicked at: ', evt.detail.intersection.point);
    });
  }
});

कर्सर घटक के साथ टकटकी आधारित बातचीत

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

टकटकी आधारित बातचीत को जोड़ने के लिए, हमें एक घटक को जोड़ना या लागू करना होगा। ए-फ्रेम एक कर्सर घटक के साथ आता है जो कैमरे से जुड़ा होने पर टकटकी आधारित बातचीत प्रदान करता है:

1. स्पष्ट रूप से इकाई को परिभाषित करें। पहले, ए-फ्रेम डिफ़ॉल्ट कैमरा प्रदान कर रहा था।
2. कैमरा इकाई के नीचे एक बाल तत्व के रूप में एक a-cursor इकाई जोड़ें।
3. वैकल्पिक रूप से, कर्सर द्वारा उपयोग किए गए रेकस्टर को कॉन्फ़िगर करें।

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
    <!-- Or <a-entity cursor></a-entity> -->
  </a-camera>
</a-scene>

एक कर्सर आदिम

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

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
  <a-box></a-box>
</a-scene>

फ्यूज-आधारित कर्सर

इसे टकटकी आधारित कर्सर के रूप में भी जाना जाता है। यदि हम कर्सर को फ्यूज-आधारित होने के लिए सेट करते हैं, तो उपयोगकर्ता एक सेट राशि के लिए उपयोगकर्ता को एक समय पर गेज करता है तो कर्सर एक क्लिक को ट्रिगर करेगा। कल्पना करें कि उपयोगकर्ता के सिर पर एक लेजर फंसा है, और लेजर दृश्य में फैल गया है। यदि उपयोगकर्ता किसी इकाई में बहुत देर तक घूरता रहता है (यानी, फ्यूजटाइमआउट), तो कर्सर एक क्लिक को ट्रिगर करेगा।

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

Raycaster घटक के माध्यम से कर्सर को कॉन्फ़िगर करना

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

<a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>

विजुअल फीडबैक जोड़ना

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

<a-entity cursor="fuse: true; fuseTimeout: 500"
          position="0 0 -1"
          geometry="primitive: ring"
          material="color: black; shader: flat">
  <a-animation begin="click" easing="ease-in" attribute="scale"
               fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
  <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
               fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>

माउस कर्सर

नोट: इस उदाहरण के लिए आपको एक बाहरी npm पैकेज जोड़ना होगा।

यदि आप अपने कंप्यूटर के माउस कर्सर का उपयोग करना चाहते हैं, तो आपको aframe-mouse-cursor-component को जोड़ना aframe-mouse-cursor-component । यदि आपको इस कोड का उपयोग करके स्क्रिप्ट को शामिल करना होगा:

import 'aframe';
import 'aframe-mouse-cursor-component';

// or this 

require('aframe');
require('aframe-mouse-cursor-component');

और अपने कैमरे पर आपको mouse-cursor घटक जोड़ना होगा।

<a-scene>
  <a-entity camera look-controls mouse-cursor>
</a-scene>