3D Hikaye Anlatımı özelleştirmeleri

Giriş

Bu kılavuzda, 3D Storytelling çözümünü özelleştirmenin farklı yolları açıklanmaktadır. Bu sayede, ilgi çekici coğrafi konum hikayeleri oluşturabilirsiniz.

Hikaye anlatımı çözümünü iki kolay yöntemle yapılandırabilirsiniz. İlk olarak, özel bir yapılandırma paneli içeren yönetici uygulamasındaki sezgisel kullanıcı arayüzünü kullanabilirsiniz. Kullanıcılar bu panelde, hem hikayenin tamamı hem de her bir bölüm için imageUrl, başlık, tarih gibi ana özellikleri değiştirebilir.

İkinci olarak, yönetici uygulamasındaki GUI'yi kullanarak her bölüm için kamera ayarlarını ve odak seçeneklerini hassas bir şekilde ayarlayabilirsiniz. Yapılandırmadan memnun kalan kullanıcılar, oluşturulan JSON dosyasını indirebilir.

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 denetim masasını atlayabilirsiniz. Bu ikili yaklaşım, hem kullanıcı dostu bir arayüz hem de gelişmiş JSON manipülasyonu sunar.

Başlarken

Etkinleştir

Kendi hikayenizi oluşturun

Hikayenin genel düzeni, kapak hikayesi ve ardından gelen bölümlerden oluşur. Hem kapak hem de bölümler 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ıları
inceleyin.

Kapak sayfası

İlk olarak hikayeniz için bir kapak sayfası oluşturmanız gerekir. Bu işlem, hikayenize genel bakış, kapak fotoğrafı ve açıklama ekler.

Yönetici uygulamasını kullanma

Öncelikle hikayenize bir kapak sayfası ekleyin. Bu işlemi, yönetici uygulamasında aşağıdaki ekranı kullanarak yapabilirsiniz:

resim

config.json dosyasını kullanma

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

  • 1. imageUrl: Hikayenin tamamı için 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 yönlendiren, herkese açık herhangi bir URL olabilir.

  • 2. title: Hikayenin tamamının başlığı.
  • 3. date: Hikayeyle ilişkili tarih veya zaman aralığı.
  • 4. description: Hikayenin kısa bir açıklaması.
  • 5. createdBy: Hikayenin yaratıcısı veya yazarı.
  • 6. imageCredit: Ana resmin kaynağı.
  • 7. cameraOptions: Hikayenin tamamı için ilk kamera ayarları.

Bölümler

Hikaye, her biri kendi değişken grubuna sahip bölümlere ayrılmıştır. İstediğiniz sayıda bölüm oluşturabilirsiniz. Önce bir adres seçersiniz, ardından bölüme aşağıdaki ayrıntıları eklersiniz.

Yönetici uygulamasını kullanma

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ı ekleyebilirsiniz:

resim

Konumla ilgili ayrıntıları ekleyin:

Genel yapılandırmadan memnun kaldığınızda JSON dosyasını indirip demo uygulamasında kullanabilirsiniz.

config.json kullanarak yapılandırma

Her 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ün benzersiz tanımlayıcısı.
  • imageUrl: Bölüm resminin URL'si.
  • imageCredit: Bölümün görseli için kredi.
  • content: Bölümün 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 adres.

Kamera ayarları

Uygulama, kamera üzerinde birçok farklı kontrol sunar. Bu bölümde, farklı kamera ayarları ve bunları nasıl özelleştireceğiniz açıklanmaktadır.

resim

(Mükemmel görüş açısını elde etmek için kamerayı kaydırın, yakınlaştırın ve eğin)

Yönetici uygulamasını kullanma

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

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

  • Yarıçap odağı, belirli bir konumu tam olarak belirlemeden belirli bir alanın çevresinde vinyet gölgesi oluşturur. Bu, bir mahalleyi veya genel bir alanı göstermek için idealdir.

resim

Bu videoda, kameranın odağını belirli bir nokta yerine bir alanı gösterecek şekilde nasıl değiştireceğiniz anlatılmaktadır.

config.json dosyasını kullanma

Ayrıca, tüm kamera parametrelerini doğrudan json yapılandırma dosyasını kullanarak özelleştirebilirsiniz:

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

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

    • heading: Yön parametresi, kameranın doğrultulduğu yatay yönü ifade eder. Coğrafi açıdan, kameranın görünümü ile kuzey yönü arasındaki açıyı temsil eder. 0 yönü, kameranın tam kuzeyi gösterdiğini belirtir.

    • pitch: Eğim parametresi, kameranın dikey açısını belirler. Kamera görünümünün eğimini ifade eder. Pozitif eğim aşağıya, negatif eğim ise yukarıya bakar.

    • roll: Dönüş parametresi, kameranın ekseni etrafındaki dönüşü tanımlar. Kameranın bükülme hareketini temsil eder. 0 değeri dönüş olmadığını, pozitif veya negatif değerler ise sırasıyla sağa veya sola dönüşü gösterir.

  • focusOptions: Belirli bir noktaya odaklanma seçenekleri.

  • focusRadius: Odaklanma yarıçapı.

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

  • showLocationMarker: Konum işaretçisini göstermek veya gizlemek için Boole değeri.

Yapılandırmanızı kaydetme

Son olarak, kamera konumunuzu kaydetmek için Kamera konumunu kaydet'i, 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 sunar. Bu, yönetici uygulamasıdır.

Nihai config.json dosyası

Son config.json dosyası, özel hikaye anlatımı deneyiminizi oluşturmak için gereken tüm bilgileri içerir. Kapak sayfası ayrıntıları, bölümler ve kamera ayarları bu dosyada yer alır. Bu dosyayı kullanarak hikayenizi hassas bir şekilde ayarlayabilir ve tam olarak istediğiniz gibi görünmesini ve hissettirmesini sağlayabilirsiniz.

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

Hikaye özeti JSON dosyası şu şekilde 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 şu şekilde görünebilir. Bölümler bir dizidir ve dizi içinde birçok bağımsız bölüm barındırabilir.

"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

Koda göz atabilir ve başka özelleştirmeler yapabilirsiniz:

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

Çözüm, hikaye anlatımı yapılandırmasını yerel bir dosyadan yükler . Ancak bu, config.js dosyasında 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ğıdakiler gibi bir dizi önemli değişkeni tanımlar:

  • RADIUS
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

Farklı kamera açıları ve deneyimler elde etmek için bu değişkenleri dilediğiniz gibi ayarlayabilirsiniz.

Sonuç

Bu dokümanda, 3D Hikaye Anlatımı uygulamasını özelleştirmeyle ilgili bir kılavuz sunulmuştur. Yönetici uygulamasındaki çeşitli seçenekleri ve bu seçeneklerin sürükleyici ve ilgi çekici coğrafi konum hikayeleri oluşturmak için nasıl kullanılabileceğini inceledik. Ayrıca config.json dosyasını kullanarak özel hikaye oluşturma sürecini de ele aldık. Sonraki Adımlar

3D Storytelling uygulamasını nasıl özelleştireceğinizi öğrendiğinize göre artık kendi hikayelerinizi oluşturmaya başlayabilirsiniz. Başlamanıza yardımcı olacak birkaç fikri burada bulabilirsiniz:

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

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