3D स्टोरीटेलिंग को पसंद के मुताबिक बनाने की सुविधाएं

परिचय

इस गाइड में, 3D Storytelling की सुविधा को पसंद के मुताबिक बनाने के अलग-अलग तरीकों के बारे में बताया गया है. इससे, जगह की जानकारी से जुड़ी दिलचस्प कहानियां बनाई जा सकती हैं.

आपके पास, 3D Storytelling की सुविधा को कॉन्फ़िगर करने के दो आसान तरीके हैं. पहला तरीका यह है कि व्यवस्थापक ऐप्लिकेशन में मौजूद, आसान यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल किया जाए. इसमें, कॉन्फ़िगरेशन के लिए एक अलग पैनल होता है. इस पैनल में, उपयोगकर्ता मुख्य प्रॉपर्टी में बदलाव कर सकते हैं. जैसे, imageUrl, टाइटल, तारीख वगैरह. ये बदलाव, पूरी कहानी के साथ-साथ हर चैप्टर के लिए भी किए जा सकते हैं.

दूसरा तरीका यह है कि Admin ऐप्लिकेशन में मौजूद जीयूआई का इस्तेमाल करके, हर चैप्टर के लिए कैमरे की सेटिंग और फ़ोकस के विकल्प में बदलाव किया जाए. कॉन्फ़िगरेशन से संतुष्ट होने के बाद, उपयोगकर्ता जनरेट की गई JSON फ़ाइल डाउनलोड कर सकते हैं.

इसके अलावा, JSON फ़ाइल को सीधे तौर पर भी एडिट किया जा सकता है. JSON स्ट्रक्चर को अडजस्ट किया जा सकता है, कॉन्फ़िगर की गई 3D Storytelling की सुविधा को लोड किया जा सकता है, और Admin कंट्रोल पैनल को बायपास किया जा सकता है. इस दोहरे तरीके से, उपयोगकर्ता के लिए आसान इंटरफ़ेस और JSON में बेहतर तरीके से बदलाव करने की सुविधा मिलती है.

शुरू करना:

चालू करना

अपनी कहानी बनाना

कहानी के पूरे लेआउट को कवर स्टोरी और उसके बाद चैप्टर में बांटा जाता है. कवर और चैप्टर, दोनों को अलग-अलग तरीके से पसंद के मुताबिक बनाया जा सकता है. Admin ऐप्लिकेशन और कॉन्फ़िगरेशन फ़ाइल, दोनों का इस्तेमाल करके कहानियां बनाने और उन्हें पसंद के मुताबिक बनाने के बारे में ज़्यादा जानें
.

कवर पेज

सबसे पहले, आपको अपनी पूरी कहानी के लिए एक कवर पेज बनाना होगा. इससे आपकी कहानी में खास जानकारी, कवर फ़ोटो, और ब्यौरा जुड़ जाता है.

व्यवस्थापक ऐप्लिकेशन का इस्तेमाल करना

अपनी कहानी के लिए कवर पेज जोड़कर शुरुआत करें. व्यवस्थापक ऐप्लिकेशन में, यह काम इस स्क्रीन का इस्तेमाल करके किया जा सकता है:

इमेज

config.json का इस्तेमाल करना

इसके अलावा, अगर आपके पास कॉन्फ़िगरेशन फ़ाइल है, तो इन सेक्शन को सीधे फ़ाइल में जोड़ा जा सकता है:

  • 1. imageUrl: पूरी कहानी के लिए मुख्य मीडिया फ़ाइल (इमेज, GIF या वीडियो) का यूआरएल.

यह सार्वजनिक तौर पर ऐक्सेस किया जा सकने वाला कोई भी यूआरएल हो सकता है. यह यूआरएल, इमेज, GIF या वीडियो फ़ाइल की ओर ले जाता है. इस फ़ाइल को पूरी कहानी के लिए मुख्य मीडिया के तौर पर इस्तेमाल किया जा सकता है.

  • 2. title: पूरी कहानी का टाइटल.
  • 3. date: कहानी से जुड़ी तारीख या समयसीमा.
  • 4. description: कहानी का संक्षिप्त ब्यौरा.
  • 5. createdBy: कहानी का क्रिएटर या लेखक.
  • 6. imageCredit: मुख्य इमेज का क्रेडिट.
  • 7. cameraOptions: पूरी कहानी के लिए कैमरे की शुरुआती सेटिंग.

चैप्टर

कहानी को चैप्टर में बांटा जाता है. हर चैप्टर के लिए, वैरिएबल का अपना सेट होता है. जितने चाहें उतने चैप्टर बनाए जा सकते हैं. शुरुआत करने के लिए, कोई पता चुनें. इसके बाद, चैप्टर में यह जानकारी जोड़ें.

व्यवस्थापक ऐप्लिकेशन का इस्तेमाल करना

जगह की खोज: दिखाई जाने वाली जगह को ढूंढने के लिए, Google Maps Platform के साथ इंटिग्रेट किए गए, ऑटोकंप्लीट खोज बार का इस्तेमाल करें.

कोई जगह जोड़ने के बाद, चैप्टर में जानकारी जोड़ी जा सकती है. इसके लिए, जगह के बगल में मौजूद बदलाव करें बटन पर क्लिक करें:

इमेज

जगह के बारे में जानकारी जोड़ें:

पूरे कॉन्फ़िगरेशन से संतुष्ट होने के बाद, JSON फ़ाइल डाउनलोड करें. इसका इस्तेमाल डेमो ऐप्लिकेशन में किया जा सकता है.

config.json का इस्तेमाल करके कॉन्फ़िगर करना

हर चैप्टर को पसंद के मुताबिक बनाने के लिए, डाउनलोड की गई config.json फ़ाइल में इन वैरिएबल को सीधे तौर पर एडिट किया जा सकता है:

  • title: चैप्टर का टाइटल.
  • id: चैप्टर के लिए यूनीक आइडेंटिफ़ायर.
  • imageUrl: चैप्टर की इमेज का यूआरएल.
  • imageCredit: चैप्टर की इमेज का क्रेडिट.
  • content: चैप्टर के लिए टेक्स्ट कॉन्टेंट.
  • dateTime: चैप्टर के लिए खास तारीख या समयसीमा.
  • coords: चैप्टर से जुड़ी जगह के कोऑर्डिनेट.
    • lat: Latitude.
    • lng: Longitude.
  • address: चैप्टर से जुड़ा पता.

कैमरे की सेटिंग

ऐप्लिकेशन में, कैमरे के लिए कई अलग-अलग कंट्रोल उपलब्ध हैं. इस सेक्शन में, कैमरे की अलग-अलग सेटिंग और उन्हें पसंद के मुताबिक बनाने के तरीके के बारे में बताया गया है.

इमेज

(कैमरे को पैन, ज़ूम, और टिल्ट करके, देखने का सही ऐंगल पाएं)

व्यवस्थापक ऐप्लिकेशन का इस्तेमाल करना

कैमरा: देखने का चुना गया अनुभव पाने के लिए, कैमरे के मूवमेंट की स्पीड और ऑर्बिट टाइप को अडजस्ट करें.

  • जगह का मार्कर की मदद से, किसी खास जगह पर पिन दिखाने या छिपाने के बीच टॉगल किया जा सकता है.

  • रेडियस फ़ोकस की मदद से, किसी खास जगह को पिनपॉइंट किए बिना, उसके आस-पास विनेट शैडो बनाई जा सकती है. यह किसी आस-पड़ोस या जगह की अनुमानित जानकारी दिखाने के लिए बेहतरीन है.

इमेज

इससे पता चलता है कि किसी खास पॉइंट के बजाय, किसी इलाके को दिखाने के लिए कैमरे का फ़ोकस कैसे बदला जाता है.

config.json का इस्तेमाल करना

JSON कॉन्फ़िगरेशन फ़ाइल का इस्तेमाल करके, कैमरे के सभी पैरामीटर को सीधे तौर पर भी पसंद के मुताबिक बनाया जा सकता है:

  • cameraOptions: चैप्टर के लिए कैमरे की सेटिंग. (कैमरा ऐंगल के बारे में ज़्यादा जानें camera angles)

    • position: पोज़िशन पैरामीटर, 3D एनवायरमेंट में कैमरे के स्पैटियल कोऑर्डिनेट तय करता है. इसमें तीन वैल्यू होती हैं: x, y, और z. हर कोऑर्डिनेट, x, y, और z ऐक्सिस में एक पॉइंट दिखाता है. इससे कैमरे की जगह तय होती है.

    • heading: हेडिंग पैरामीटर, कैमरे की हॉरिज़ॉन्टल दिशा को दिखाता है. भौगोलिक तौर पर, यह कैमरे के व्यू और उत्तर दिशा के बीच का ऐंगल दिखाता है. हेडिंग की वैल्यू 0 होने का मतलब है कि कैमरा सीधे उत्तर की ओर है.

    • pitch: पिच पैरामीटर, कैमरे का वर्टिकल ऐंगल तय करता है. यह कैमरे के व्यू के टिल्ट या झुकाव को दिखाता है. पॉज़िटिव पिच का मतलब है कि कैमरा नीचे की ओर है. वहीं, नेगेटिव पिच का मतलब है कि कैमरा ऊपर की ओर है.

    • roll: रोल पैरामीटर, कैमरे के ऐक्सिस के चारों ओर रोटेशन तय करता है. यह कैमरे के ट्विस्टिंग मोशन को दिखाता है. रोल की वैल्यू 0 होने का मतलब है कि कोई रोटेशन नहीं है. वहीं, पॉज़िटिव या नेगेटिव वैल्यू का मतलब है कि रोटेशन, क्रमशः दाईं या बाईं ओर है.

  • focusOptions: किसी खास पॉइंट पर फ़ोकस करने के विकल्प.

  • focusRadius: फ़ोकस के लिए रेडियस.

  • showFocus: फ़ोकस दिखाने या छिपाने के लिए बूलियन.

  • showLocationMarker: जगह का मार्कर दिखाने या छिपाने के लिए बूलियन.

अपना कॉन्फ़िगरेशन सेव करना

आखिर में, कैमरे की पोज़िशन सेव करने के लिए कैमरे की पोज़िशन सेव करें पर क्लिक करें. इसके बाद, अपना काम सेव करने के लिए एडिट मोड से बाहर निकलें पर क्लिक करें

इमेज

इस ऐप्लिकेशन में, उपयोगकर्ता के लिए आसान इंटरफ़ेस मिलता है. इसकी मदद से, 3D अनुभव को पसंद के मुताबिक बनाया जा सकता है. यह व्यवस्थापक एप्लिकेशन है.

आखिरी config.json

आखिरी config.json फ़ाइल में, 3D Storytelling का अपना अनुभव जनरेट करने के लिए ज़रूरी सभी जानकारी होती है. इसमें कवर पेज की जानकारी, चैप्टर, और कैमरे की सेटिंग शामिल होती हैं. इस फ़ाइल का इस्तेमाल करके, अपनी कहानी को बेहतर बनाया जा सकता है. साथ ही, यह पक्का किया जा सकता है कि कहानी ठीक वैसी ही दिखे और लगे जैसी आपको चाहिए.

शुरू करने के लिए,व्यवस्थापक एप्लिकेशन से config.json फ़ाइल डाउनलोड करें या नई फ़ाइल बनाएं. इसके बाद, फ़ाइल को टेक्स्ट एडिटर में खोलें और वैल्यू में बदलाव करना शुरू करें. अपने दर्शकों के लिए यूनीक और इमर्सिव अनुभव बनाने के लिए, टेक्स्ट, इमेज, और कैमरे की सेटिंग में बदलाव किया जा सकता है.

कहानी की खास जानकारी वाली JSON फ़ाइल ऐसी दिख सकती है:

{
  "properties": {
    "imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/317-300x160.jpg",
    "title": "Title",
    "date": "1967",
    "description": ""his is where you put descriptions",
    "createdBy": "Add author",
    "imageCredit": "Add image credit",
    "cameraOptions": {
      "position": {
        "x": -2708127.031960028,
        "y": -4260747.583520751,
        "z": 3886346.825328216
      },
      "heading": -1.5708,
      "pitch": -0.785398,
      "roll": 0
    }
  }

और कोई खास चैप्टर ऐसा दिख सकता है. चैप्टर एक कलेक्शन है. इसमें कई अलग-अलग चैप्टर शामिल किए जा सकते हैं.

"chapters": [
    {
      "title": "The Jimmy Hendrix Experience",
      "id": 4,
      "imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/401-300x160.jpg",
      "imageCredit": "Hunter",
      "content": "XYZZZ",
      "dateTime": "Aug 10-12 1967",
      "coords": {
        "lat": 37.7749,
        "lng": -122.4194
      },
      "address": "The Filmore | 1805 Geary Blvd",
      "cameraOptions": {
        "position": {
          "x": -2706472.5713478313,
          "y": -4261528.277488908,
          "z": 3885143.750529967
        },
        "heading": 0,
        "pitch": 0,
        "roll": 0
      },
      "focusOptions": {
        "focusRadius": 3000,
        "showFocus": false,
        "showLocationMarker": true
      }
    },

बेहतर कस्टमाइज़ेशन

कोड में जाकर, कई अन्य बदलाव किए जा सकते हैं:

कॉन्फ़िगरेशन फ़ाइल को किसी दूसरी जगह से लोड करना

डिफ़ॉल्ट रूप से, यह सुविधा, 3D Storytelling के कॉन्फ़िगरेशन को किसी स्थानीय फ़ाइल से लोड करती है . हालांकि, इसे config.js में आसानी से बदला जा सकता है:

export async function loadConfig(configUrl) {
  try {
    // Fetch the configuration data from the specified URL.
    const configResponse = await fetch(configUrl);

कैमरे के कॉन्फ़िगरेशन

कैमरे को /utils/cesium.js फ़ाइल से भी पसंद के मुताबिक बनाया जा सकता है. इसमें कई अहम वैरिएबल तय किए जाते हैं. जैसे:

  • RADIUS
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

कैमरे के अलग-अलग ऐंगल और अनुभव पाने के लिए, इन वैरिएबल में बदलाव किया जा सकता है.

नतीजा

इस दस्तावेज़ में, 3D Storytelling ऐप्लिकेशन को पसंद के मुताबिक बनाने के बारे में जानकारी दी गई है. हमने व्यवस्थापक ऐप्लिकेशन में उपलब्ध अलग-अलग विकल्पों के बारे में बताया है. साथ ही, यह भी बताया है कि इनका इस्तेमाल करके, जगह की जानकारी से जुड़ी इमर्सिव और दिलचस्प कहानियां कैसे बनाई जा सकती हैं. हमने config.json फ़ाइल का इस्तेमाल करके, कस्टम कहानी बनाने की प्रोसेस के बारे में भी बताया है. अगले चरण

अब आपको 3D Storytelling ऐप्लिकेशन को पसंद के मुताबिक बनाने का तरीका पता चल गया है. इसलिए, अपनी कहानियां बनाना शुरू करें. शुरू करने के लिए यहां कुछ आइडिया दिए गए हैं:

  • अपने होमटाउन या किसी ऐसी जगह के बारे में कहानी बनाएं जहां आपने कभी यात्रा की हो.
  • किसी ऐतिहासिक घटना या ऐसे व्यक्ति के बारे में कहानी बनाएं जिससे आपको प्रेरणा मिली हो.
  • किसी काल्पनिक दुनिया या अपने किसी सपने के बारे में कहानी बनाएं.

खरीदारी की सुविधा वाले कई तरह के वीडियो बनाए जा सकते हैं! इसलिए, अपनी कल्पनाओं को उड़ान दें और कुछ खास बनाएं.