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

Giriş

Bu kılavuzda, 3D hikaye anlatımı çözümünün özelleştirilmesinin farklı yolları anlatılmaktadır. Bu sayede, büyüleyici coğrafi konum hikayeleri oluşturabilirsiniz.

Hikaye anlatma çözümünü iki kullanışlı yöntemle yapılandırabilirsiniz. Yönetici uygulamasında, özel bir yapılandırma paneli bulunan sezgisel kullanıcı arayüzünü kullanabilirsiniz. Kullanıcılar bu panelde imageUrl, başlık, tarih gibi ana özellikleri hem genel hikaye hem de bağımsız bölümler için değiştirebilir.

İkinci olarak, Yönetici uygulamasındaki GUI'yi kullanarak her 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ı 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 işleme imkanı sunar.

Başlarken:

Etkinleştir

Kendi hikayenizi oluşturun

Hikayenin genel düzeni bir cover hikayesine ve ardından bölümlere ayrılmıştır. Hem kapak hem de bölüm ayrı ayrı özelleştirilebilir. Hikayelerin
hem Yönetici uygulaması hem de yapılandırma dosyası kullanılarak nasıl derlenebileceği ve özelleştirilebileceği ile ilgili ayrıntılara göz atın.

Kapak sayfası

Yapmanız gereken ilk şey, genel hikayeniz için bir kapak sayfası oluşturmaktır. Bu, 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 uygulamasında, aşağıdaki ekranı kullanarak yapabilirsiniz:

resim

config.json kullan

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

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

Bu, hikayenin tamamında ana medya olarak kullanmak istediğiniz bir resim, gif veya video dosyasına işaret eden, herkese açık herhangi bir URL olabilir.

  • 2. title: Tüm hikayenin başlığıdır.
  • 3. date: Hikayeyle ilişkilendirilen 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ıç kamera ayarları.

Bölümler

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

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.

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 memnun kaldığınızda, json dosyasını indirin. Bu dosyayı 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 için benzersiz tanımlayıcı.
  • imageUrl: Bölüm resminin URL'si.
  • imageCredit: Bölüm görselinin kredisi.
  • 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ı denetim sağlar. Bu bölümde farklı kamera ayarları ve bunların nasıl özelleştirileceği konusunda yol gösterici bilgiler verilmektedir.

resim

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

Yönetici Konsolu 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, bir raptiyeyi belirli bir konumda gösterme veya gizleme seçeneği arasında geçiş yapmanızı sağlar.

  • Yarıçap odağı, belirli bir konumu sabitlemeden belirli bir alanın etrafında vinyet gölgesi oluşturur. Bu, bir mahalleyi veya genel bölgeyi sergilemek için harikadır.

resim

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

config.json kullan

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: heading parametresi, kameranın doğrultulduğu yatay yönü belirtir. Coğrafi terimlerde, kameranın bakış açısıyla kuzey yönü arasındaki açıyı gösterir. 0 başlığı, kameranın kuzeye doğru baktığını gösterir.

    • pitch: Ses perdesi parametresi, kameranın dikey açısını belirler. Kameranın görüş açısını veya eğimini belirtir. Pozitif bir perde aşağıya doğru, negatif perde ise yukarıyı işaret eder.

    • roll: Yuvarlama parametresi, kameranın ekseni etrafındaki dönüşü tanımlar. Kameranın bükme hareketini gösterir. 0 değerindeki yuvarlama, döndürme olmadığını, pozitif veya negatif değerler ise sırasıyla sağa veya sola doğru dönüşü gösterir.

  • focusOptions: Belirli bir noktaya odaklanma seçenekleri sunar.

  • focusRadius: Odak 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ı kaydedin

Son olarak, kamera konumunu 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ştirmenizi sağlayan kullanıcı dostu bir arayüz sağlar. Bu, Yönetici uygulaması.

Son config.json

Son 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ı buna dahildir. Bu dosyayı hikayenizde ince ayarlar yapmak, tam olarak istediğiniz gibi göründüğünden emin olmak için kullanabilirsiniz.

Başlamak için Yönetici uygulamasından config.json dosyasını 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 sürükleyici bir deneyim sunmak için metinleri, resimleri ve hatta kamera ayarlarını değiştirebilirsiniz.

Hikaye genel bakış json dosyası aşağıdaki gibi 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 dizide birçok ayrı 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ı olarak inceleyebilir ve başka özelleştirmeler de yapabilirsiniz:

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

Bu çözüm kullanıma hazır, hikaye anlatma yapılandırmasını yerel bir dosyadan yükler . Ancak bu, config.js'de 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 da özelleştirilebilir. Bir dizi önemli değişkeni tanımlar. Örneğin:

  • YARDIMCI ALAN
  • 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şkenleri değiştirmekten çekinmeyin.

Sonuç

Bu dokümanlarda, 3D Hikaye Anlatma uygulamasını özelleştirmek için bir kılavuz sağladık. Yönetici uygulamasındaki çeşitli seçenekleri ve bunların 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

3D Hikaye Anlatma 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ç fikir:

  • 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 hayal ettiğiniz bir hayal hakkında hikaye oluşturun.

Seçenekleriniz sınırsızdır. Bu yüzden hayal gücünüzü sınırlamayın ve gerçekten özel bir şey yaratın.