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

Giriş

Bu kılavuzda, 3D hikaye anlatma çözümünün özelleştirilebileceği farklı yöntemler açıklanmaktadır. Bu yöntemler sayesinde ilgi çekici coğrafi konum hikayeleri oluşturabilirsiniz.

Hikaye anlatma çözümünü iki uygun yöntemle yapılandırabilirsiniz. Öncelikle, ö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 bölümler için imageUrl, başlık, tarih gibi temel özellikleri değiştirebilir.

İkinci olarak, Yönetici uygulamasındaki kullanıcı arayüzünü kullanarak her bölüm için kamera ayarlarında ve odak seçeneklerinde ince ayar yapabilirsiniz. Kullanıcılar, yapılandırmalarından memnun kaldıklarında 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 kontrol panelini atlayabilirsiniz. Bu ikili yaklaşım hem kullanıcı dostu bir arayüz hem de gelişmiş JSON değiştirme olanağı sunar.

Başlarken:

Etkinleştir

Kendi hikayenizi oluşturun

Hikayenin genel düzeni, bir kapak hikayesine ve ardından bölümlere ayrılır. Hem kapak hem de bölümler ayrı ayrı özelleştirilebilir. Hikayeleri hem Yönetici uygulaması hem de yapılandırma dosyası kullanılarak nasıl oluşturabileceğiniz ve özelleştirebileceğinizle ilgili ayrıntıları
inceleyin.

Kapak sayfası

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

Yönetici uygulamasını kullanma

İlk olarak hikayeniz için bir kapak sayfası ekleyin. Bunu Yönetici uygulamasından aşağıdaki ekranı kullanarak yapabilirsiniz:

resim

config.json dosyasını kullanma

Ayrıca, yapılandırma dosyanız varsa aşağıdaki 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ını işaret eden, 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 kredisi.
  • 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 kadar bölüm oluşturabilirsiniz. Bir adres seçerek başlayın ve ardından bölüme aşağıdaki ayrıntıları ekleyin.

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

Yerle ilgili ayrıntıları ekleyin:

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

config.json dosyasını 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ün benzersiz tanımlayıcısı.
  • imageUrl: Bölüm resminin URL'si.
  • imageCredit: Bölüm resminin kaynağı.
  • 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ını ve bunların nasıl özelleştirileceğini adım adım açıklayacağız.

resim

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

Yönetici uygulamasını kullanma

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

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

  • Yarıçap odak noktası, belirli bir konumu işaretlemeden belirli bir alan etrafında vinyet gölgesi oluşturur. Bu yöntem, bir mahalleyi veya genel bir alanı göstermek için mükemmeldir.

resim

Bu resimde, kameranın odağının belirli bir nokta yerine bir alanı göstermek için nasıl değiştirileceği gösterilmektedir.

config.json dosyasını kullanma

Tüm kamera parametrelerini doğrudan json yapılandırma dosyasını kullanarak da ö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 eksenlerindeki 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 değeri, kameranın tam kuzeye baktığını gösterir.

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

    • roll: Roll parametresi, kameranın ekseni etrafında dönüşü tanımlar. Kameranın dönme hareketini gösterir. 0 yuvarlanma değeri, dönme olmadığını gösterirken pozitif veya negatif değerler sırasıyla sağa veya sola dönmeyi gösterir.

  • focusOptions: Belirli bir noktaya odaklanma seçenekleri.

  • focusRadius: Odak için 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 deneyimi özelleştirmenize olanak tanıyan kullanıcı dostu bir arayüz sunar. Bu, Yönetici uygulamasıdır.

Nihai config.json

Nihai config.json dosyası, özel hikaye anlatma deneyiminizi oluşturmak için gereken tüm bilgileri içerir. Kapak sayfası ayrıntıları, bölümler ve kamera ayarları bu kapsamdadır. Bu dosyayı kullanarak hikayenizde ince ayarlamalar yapabilir ve tam istediğiniz şekilde göründüğünden emin olabilirsiniz.

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çıp 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.

Hikayeye genel bakış 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 ise şu şekilde görünebilir. Bölümler bir dizidir ve dizi içinde birçok bölüm bulunabilir.

"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 inceleyebilir 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 çeşitli önemli değişkenleri 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 sağladık. Yönetici uygulamasında bulunan çeşitli seçenekleri ve bunların 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 hikaye anlatımı uygulamasını nasıl özelleştireceğinizi öğrendiniz. Artık kendi hikayelerinizi oluşturmaya başlayabilirsiniz. Başlangıç için birkaç fikir:

  • Memleketiniz veya ziyaret ettiğiniz bir yer hakkında hikaye oluşturun.
  • Tarihi bir olay veya size ilham veren bir kişiyle ilgili bir hikaye oluşturun.
  • Hayali 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ü çalıştırın ve gerçekten özel bir şey oluşturun.