3D Hikaye Anlatma: özelleştirme kılavuzu

Giriş

Bu kılavuzda, 3D Hikaye Anlatma çözümünün özelleştirilebileceği farklı yollar adım adım açıklanmıştır. Böylece, etkileyici coğrafi konum hikayeleri oluşturabilirsiniz.

Hikaye anlatımı çözümünü iki kolay yöntemle yapılandırabilirsiniz. Öncelikle, Yönetici uygulamasında bulunan sezgisel kullanıcı arayüzünü kullanabilirsiniz. Bu arayüz, özel bir yapılandırma paneline sahiptir. Bu panelde, kullanıcılar hem görselin tamamı için hem de ayrı bölümler için imageUrl, başlık, tarih ve diğer ana özellikleri değiştirebilir.

İkinci olarak, Yönetici uygulamasındaki GUI'yi kullanarak her bir bölüm için kamera ayarlarında ve odaklama seçeneklerinde ince ayar yapabilirsiniz. Yapılandırmadan memnun kalan kullanıcılar, oluşturulan JSON dosyasını indirebilirler.

Alternatif olarak, JSON dosyasını doğrudan düzenleyebilirsiniz. JSON yapısını ayarlayabilir, yapılandırılmış hikaye anlatma çözümünü yükleyebilir ve Yönetici kontrol panelini atlayabilirsiniz. Bu ikili yaklaşım, hem kullanıcı dostu bir arayüz hem de gelişmiş JSON işleme özelliği sunar.

Başlarken:

Etkinleştir

Kendi hikayenizi oluşturun

Haberin genel düzeni, bir cover hikaye ve ardından bölümler şeklinde ayrılır. Hem kapak hem de bir bölüm ayrı ayrı özelleştirilebilir. Hikayelerin
hem Yönetici uygulaması hem de yapılandırma dosyası kullanılarak nasıl oluşturulup özelleştirilebileceğiyle ilgili ayrıntılara göz atın.

Kapak sayfası

Yapmanız gereken ilk şey, hikayenizin geneli için bir kapak sayfası oluşturmaktır. Bu işlem, hikayenize genel bakış, kapak fotoğrafı ve açıklama ekler.

Yönetici Konsolu uygulamasını kullan

Hikayeniz için bir kapak sayfası ekleyerek başlayın. Bu işlemi Yönetici Konsolu uygulamasından, aşağıdaki ekranı kullanarak yapabilirsiniz:

resim

config.json kullanma

Ayrıca, yapılandırma dosyanız varsa bu bölümleri doğrudan dosyaya ekleyebilirsiniz:

  • 1. imageUrl: Haberin tamamına ait ana medya dosyasının (resim, GIF veya video) URL'si.

Bu, hikayenin tamamı için ana medya olarak kullanmak istediğiniz bir resim, GIF veya video dosyasına işaret eden, herkesin erişimine açık herhangi bir URL olabilir.

  • 2. title: Tüm hikayenin başlığı.
  • 3. date: Haberle ilişkili tarih veya zaman aralığı.
  • 4. description: Hikayenin kısa bir açıklaması.
  • 5. createdBy: Hikayenin içerik üreticisi veya yazarı.
  • 6. imageCredit: Ana resmin kredisi.
  • 7. cameraOptions: Hikayenin tamamı için başlangıçtaki kamera ayarları.

Bölümler

Hikaye, bölümlere ayrılır. Her birinin kendi değişken grubu vardır. İstediğiniz sayıda bölüm oluşturabilirsiniz. Önce bir adres seçip aşağıdaki ayrıntıları bölüme eklersiniz.

Yönetici Konsolu uygulamasını kullan

Konum arama: Göstermek istediğiniz konumu bulmak için entegre Google Haritalar Platformu Otomatik Tamamlama arama çubuğunu kullanın.

Bir konum eklendikten sonra konumun yanındaki Düzenle düğmesini tıklayarak bölüme ayrıntılar ekleyebilirsiniz:

resim

Konumla ilgili ayrıntıları ekleyin:

Genel yapılandırmadan memnunsanız json dosyasını indirip demo uygulamasında kullanabilirsiniz.

config.json kullanarak yapılandırma

Her bir bölümü özelleştirmek için aşağıdaki değişkenleri doğrudan indirilen config.json dosyasında düzenleyebilirsiniz:

  • title: Bölümün başlığı.
  • id: Bölüm için benzersiz tanımlayıcıdır.
  • imageUrl: Bölüm resminin URL'si.
  • imageCredit: Bölüm resminin jeneriği.
  • content: Bölümle ilgili metin içeriği.
  • dateTime: Bölüme özgü tarih veya zaman aralığı.
  • coords: Bölümle ilişkili konumun koordinatları.
    • lat: Enlem.
    • lng: Boylam.
  • address: Bölümle ilgili adrestir.

Kamera ayarları

Uygulama, kamera üzerinde birçok farklı denetim sağlar. Bu bölümde farklı kamera ayarları ve bunları nasıl özelleştireceğiniz adım adım açıklanmıştır.

resim

(Mükemmel görüntüleme açınızı elde etmek için kamerayı kaydırın,yakınlaştırın, yatırın)

Yönetici Konsolu uygulamasını kullanma

Kamera: Seçilen izleme deneyimini oluşturmak için kamera hareket hızını ve yörünge türünü ayarlayın.

  • Konum işaretçisi, bir raptiyeyi belirli bir konumda gösterme veya gizleme arasında geçiş yapmanıza olanak tanır.

  • Yarıçap odağı, yeri belirtmeden belirli bir alanın etrafında vinyet gölgesi oluşturur. Bu, bir mahalleyi veya genel alanı göstermek için harikadır.

resim

Bu görselde, kameranın odağının belirli bir nokta yerine bir alanı gösterecek şekilde nasıl değiştirileceği gösteriliyor.

config.json kullanma

Tüm kamera parametrelerini doğrudan json yapılandırma dosyasını kullanarak da özelleştirebilirsiniz:

  • cameraOptions: Bölüm için kamera ayarları. (kamera açıları hakkında daha fazla bilgi edinin)

    • position: Konum parametresi, 3D ortamda kameranın uzamsal koordinatlarını belirler. x, y ve z olmak üzere üç değerden oluşur. Her koordinat, x, y ve z eksenlerindeki bir noktayı temsil ederek kameranın konumunu tanımlar.

    • heading: Başlık parametresi, kameranın doğrultulduğu yatay yönü belirtir. Coğrafi olarak kameranın görüş açısıyla kuzey yönü arasındaki açıyı temsil eder. 0 yönü, kameranın kuzeyi işaret ettiğini gösterir.

    • pitch: Perde parametresi, kameranın dikey açısını belirler. Kamera görünümünün eğimini veya eğimini belirtir. Pozitif bir perde aşağı doğru, olumsuz bir perde ise yukarıyı işaret eder.

    • roll: Roll parametresi, kamera ekseni etrafında dönmeyi tanımlar. Kameranın bükülme hareketini temsil eder. 0'lık bir yuvarlama, dönüş olmadığını belirtirken pozitif veya negatif değerler sırasıyla sağa veya sola bir dönüşü belirtir.

  • focusOptions: Belirli bir noktaya odaklanma seçenekleri.

  • focusRadius: Odak noktası yarıçapı.

  • showFocus: Odağı göstermek veya gizlemek için Boole değeri.

  • showLocationMarker: Konum işaretçisini göstermek veya gizlemek için kullanılan boole değeridir.

Yapılandırmanızı kaydedin

Son olarak, kamera konumunuzu kaydetmek için Kamera konumunu kaydet'i ve ardından çalışmanızı kaydetmek için Düzenleme modundan çık'ı tıklayın.

resim

Bu uygulama, 3D deneyimini özelleştirmenize olanak tanıyan kullanıcı dostu bir arayüz sağlar. Bu, Yönetici uygulamasıdır.

Son config.json dosyası

Son config.json dosyası, özel hikaye anlatma deneyiminizi oluşturmak için gereken tüm bilgileri içerir. Kapak sayfası ayrıntılarını, bölümleri ve kamera ayarlarını içerir. Hikayenizde ince ayar yapmak ve istediğiniz gibi görüntü ve izlenimi vermek için bu dosyayı kullanabilirsiniz.

Başlamak için Yönetici Konsolu uygulamasından config.json dosyasını indirin veya sıfırdan yeni bir dosya oluşturun. Sonra, dosyayı bir metin düzenleyicide açın ve değerleri düzenlemeye başlayın. Kitlenize benzersiz ve sürükleyici bir deneyim sunmak için metinleri, resimleri, hatta kamera ayarlarını değiştirebilirsiniz.

Hikayeye genel bakış json dosyası şöyle görünebilir:

{
  "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
    }
  }

Belirli bir bölüm de böyle görünebilir. Bölümler bir dizidir ve dizi içine birçok farklı bölüm alabilir.

"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
      }
    },

Gelişmiş özelleştirmeler

Kodu ayrıntılı şekilde inceleyip başka özelleştirmeler yapabilirsiniz:

Yapılandırma dosyasını başka bir konumdan yükleme

Çözüm, ilk andan itibaren hikaye anlatımı yapılandırmasını yerel bir dosyadan yükler . Ancak, bu ayar config.js içinden kolayca değiştirilebilir:

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

Kamera Yapılandırmaları

Kamera, /utils/cesium.js dosyasından daha fazla özelleştirilebilir. Aşağıdaki gibi bir dizi önemli değişkeni tanımlar:

  • YER ALANI
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

Çeşitli kamera melekleri ve deneyimleri elde etmek için bu değişkenlerde ince ayar yapmaktan çekinmeyin.

Sonuç

Bu belgelerde, 3D Hikaye Anlatma uygulamasının özelleştirilmesi için bir kılavuz sağladık. Yönetici uygulamasındaki çeşitli seçenekleri ve bu seçeneklerin etkileyici ve ilgi çekici coğrafi konum hikayeleri oluşturmak için nasıl kullanılabileceğini inceledik. config.json dosyasını kullanarak özel hikaye oluşturma sürecini de ele aldık. Sonraki adımlar

Artık 3D Hikaye Anlatma uygulamasını nasıl özelleştireceğinizi öğrendiğinize göre, kendi hikayelerinizi oluşturmaya başlayabilirsiniz. Başlamanıza yardımcı olacak birkaç fikir aşağıda verilmiştir:

  • Memleketiniz veya ziyaret ettiğiniz bir yer hakkında bir hikaye oluşturun.
  • Tarihi bir olay veya size ilham veren bir kişi hakkında bir hikaye oluşturun.
  • Kurgusal bir dünya veya gördüğünüz bir hayalle ilgili bir hikaye oluşturun.

Seçenekleriniz sınırsızdır. Öyleyse hayal gücünüzü serbest bırakın ve gerçekten özel bir şey yaratın.