عمليات تخصيص أسلوب السرد ثلاثي الأبعاد

مقدمة

يستعرض هذا الدليل الطرق المختلفة التي يمكن من خلالها تخصيص حلّ 3D Storytelling، ما يتيح لك إنشاء قصص جغرافية آسرة.

يمكنك ضبط حلّ السرد القصصي بطريقتَين مناسبتَين. أولاً، يمكنك استخدام واجهة المستخدم السهلة المتوفّرة في تطبيق المشرف، والتي تتضمّن لوحة إعدادات مخصّصة. ضمن هذه اللوحة، يمكن للمستخدمين تعديل الخصائص الرئيسية، مثل imageUrl والعنوان والتاريخ وغير ذلك، لكلّ من القصة العامة والفصول الفردية.

ثانيًا، يمكنك ضبط إعدادات الكاميرا وخيارات التركيز لكل فصل باستخدام واجهة المستخدم الرسومية في تطبيق المشرف. بعد أن يصبح المستخدمون راضين عن الإعدادات، يمكنهم تنزيل ملف JSON الذي تم إنشاؤه.

بدلاً من ذلك، يمكنك تعديل ملف JSON مباشرةً. يمكنك تعديل بنية JSON وتحميل حلّ السرد القصصي الذي تم ضبطه وتجاوز لوحة تحكّم المشرف. يوفّر هذا النهج المزدوج واجهة سهلة الاستخدام وإمكانية تعديل JSON المتقدّمة.

البدء:

تفعيل

• ‫واجهة برمجة تطبيقات مربّعات ثلاثية الأبعاد لصور واقعية
• ‫Places API

إنشاء قصتك الخاصة

يتم تقسيم التنسيق العام للقصة إلى قصة غلاف تليها الفصول. يمكن تخصيص كلّ من الغلاف والفصل بشكل فردي. يمكنك الاطّلاع على
تفاصيل حول كيفية إنشاء القصص وتخصيصها باستخدام كلّ من تطبيق المشرف وملف الإعدادات.

صفحة الغلاف

أول ما عليك فعله هو إنشاء صفحة غلاف لقصتك العامة. يؤدي ذلك إلى إضافة النظرة العامة وصورة الغلاف والوصف إلى قصتك.

استخدام تطبيق المشرف

ابدأ بإضافة صفحة غلاف لقصتك. يمكنك إجراء ذلك من تطبيق المشرف باستخدام الشاشة التالية:

استخدام config.json

بالإضافة إلى ذلك، إذا كان لديك ملف الإعدادات، يمكنك إضافة هذه الأقسام مباشرةً في الملف:

• ‫1. imageUrl: عنوان URL لملف الوسائط الرئيسي (صورة أو صورة GIF أو فيديو) للقصة بأكملها

يمكن أن يكون هذا أي عنوان URL متاح للجميع يشير إلى ملف صورة أو صورة GIF أو فيديو تريد استخدامه كملف الوسائط الرئيسي للقصة بأكملها.

• ‫2. title: عنوان القصة بأكملها
• ‫3. date: التاريخ أو الإطار الزمني المرتبط بالقصة
• ‫4. description: وصف موجز للقصة
• ‫5. createdBy: منشئ القصة أو مؤلفها
• ‫6. imageCredit: مصدر الصورة الرئيسية
• ‫7. cameraOptions: إعدادات الكاميرا الأولية للقصة بأكملها

الفصول

تنقسم القصة إلى فصول، ولكلّ منها مجموعة متغيّرات خاصة به. يمكنك إنشاء أي عدد تريده من الفصول. ابدأ باختيار عنوان، ثم أضِف التفاصيل التالية إلى الفصل.

استخدام تطبيق المشرف

البحث عن الموقع الجغرافي: استخدِم شريط البحث المتكامل الخاص بميزة "الإكمال التلقائي" من "منصة خرائط Google" للعثور على الموقع الجغرافي الذي تريد عرضه.

بعد إضافة موقع جغرافي، يمكنك إضافة تفاصيل إلى الفصل من خلال النقر على الزر تعديل بجانب الموقع الجغرافي:

أضِف تفاصيل عن الموقع الجغرافي:

بعد أن تصبح راضيًا عن الإعدادات العامة، نزِّل ملف JSON ويمكنك استخدامه في التطبيق التجريبي.

الضبط باستخدام config.json

يمكنك تعديل المتغيّرات التالية مباشرةً في ملف config.json الذي تم تنزيله لتخصيص كل فصل:

• title: عنوان الفصل
• id: معرّف فريد للفصل
• imageUrl: عنوان URL لصورة الفصل
• imageCredit: مصدر صورة الفصل
• content: المحتوى النصي للفصل
• dateTime: التاريخ أو الإطار الزمني الخاص بالفصل
• coords: إحداثيات الموقع الجغرافي المرتبط بالفصل
  • lat: خط العرض
  • lng: خط الطول
• address: العنوان المرتبط بالفصل

إعدادات الكاميرا

يوفّر التطبيق الكثير من عناصر التحكّم المختلفة في الكاميرا. يستعرض هذا القسم إعدادات الكاميرا المختلفة وكيفية تخصيصها.

(يمكنك تحريك الكاميرا وتكبيرها وإمالتها للحصول على زاوية العرض المثالية)

استخدام تطبيق المشرف

الكاميرا: اضبط سرعة حركة الكاميرا ونوع المدار لإنشاء تجربة العرض التي تختارها.

• تتيح لك علامة الموقع الجغرافي التبديل بين عرض دبوس في موقع جغرافي معيّن أو إخفائه.

• يؤدي التركيز على النطاق الجغرافي إلى إنشاء ظلّ حول منطقة معيّنة بدون تحديد موقع جغرافي معيّن. هذا الخيار رائع لعرض حيّ أو منطقة عامة.

يوضّح هذا المثال كيفية تغيير تركيز الكاميرا لعرض منطقة بدلاً من نقطة معيّنة.

استخدام config.json

يمكنك أيضًا تخصيص جميع مَعلمات الكاميرا مباشرةً باستخدام ملف إعدادات JSON:

• cameraOptions: إعدادات الكاميرا للفصل (مزيد من المعلومات عن زوايا الكاميرا)

  • position: تحدّد مَعلمة الموضع الإحداثيات المكانية للكاميرا في البيئة الثلاثية الأبعاد. وتتألف من ثلاث قيم: x وy وz. تمثّل كل إحداثية نقطة في المحاور x وy وz، ما يحدّد موقع الكاميرا.

  • heading: تشير مَعلمة الاتجاه إلى الاتجاه الأفقي الذي يتم توجيه الكاميرا نحوه. من الناحية الجغرافية، تمثّل هذه المَعلمة الزاوية بين شاشة الكاميرا واتجاه الشمال. يشير الاتجاه 0 إلى أنّ الكاميرا موجّهة نحو الشمال مباشرةً.

  • pitch: تحدّد مَعلمة الميل الزاوية العمودية للكاميرا. وتشير إلى ميل شاشة الكاميرا أو انحدارها. يشير الميل الموجب إلى الأسفل، بينما يشير الميل السالب إلى الأعلى.

  • roll: تحدّد مَعلمة الدوران الدوران حول محور الكاميرا. وتشير إلى حركة الكاميرا الملتوية. يشير الدوران 0 إلى عدم حدوث دوران، بينما تشير القيم الموجبة أو السالبة إلى دوران إلى اليمين أو اليسار على التوالي.

• focusOptions: خيارات التركيز على نقطة معيّنة

• focusRadius: نطاق التركيز

• showFocus: قيمة منطقية لعرض التركيز أو إخفائه

• showLocationMarker: قيمة منطقية لعرض علامة الموقع الجغرافي أو إخفائها

حفظ الإعدادات

أخيرًا، انقر على حفظ موضع الكاميرا لحفظ موضع الكاميرا، ثم انقر على مغادرة وضع التعديل لحفظ عملك.

يوفّر هذا التطبيق واجهة سهلة الاستخدام تتيح لك تخصيص التجربة الثلاثية الأبعاد. هذا هو تطبيق المشرف.

ملف config.json النهائي

يحتوي ملف config.json النهائي على جميع المعلومات اللازمة لإنشاء تجربة السرد القصصي المخصّصة. ويشمل ذلك تفاصيل صفحة الغلاف والفصول وإعدادات الكاميرا. يمكنك استخدام هذا الملف لضبط قصتك بدقة والتأكّد من أنّها تبدو وتعمل بالطريقة التي تريدها تمامًا.

للبدء،نزِّل ملف 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
      }
    },

التخصيصات المتقدّمة

يمكنك الاطّلاع على الرمز وإجراء العديد من التخصيصات الأخرى:

تحميل ملف الإعدادات من موقع آخر

يُحمِّل الحلّ إعدادات السرد القصصي من ملف محلي بشكل تلقائي . ومع ذلك، يمكن تغيير ذلك بسهولة في 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، يمكنك البدء في إنشاء قصصك الخاصة. في ما يلي بعض الأفكار لمساعدتك في البدء:

• أنشئ قصة عن مسقط رأسك أو مكان زرته.
• أنشئ قصة عن حدث تاريخي أو شخص ألهمك.
• أنشئ قصة عن عالم خيالي أو حلم راودك.

الخيارات لا تحصى. لذا، أطلِق العنان لخيالك وأنشئ شيئًا مميزًا.