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ında 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 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. 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ı

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

Yönetici Konsolu uygulamasını kullan

İlk olarak hikayeniz için 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 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 resim, GIF veya video dosyasını gösteren, herkese açık 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 kümesine 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

Konumla 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 için benzersiz tanımlayıcı.
  • 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: Doğu 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 hakkında bilgi verilmektedir.

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.

  • 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 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 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. Üç değerden oluşur: x, y ve z. Her koordinat, x, y ve z eksenleri üzerindeki 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: Ses perdesi parametresi, kameranın dikey açısını belirler. Kameranın görüş açısını veya eğimini belirtir. Pozitif eğim aşağı, negatif eğim ise yukarı bakar.

    • roll: Yuvarlama parametresi, kameranın ekseni etrafındaki dönüşü tanımlar. Kameranın bükme 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ı.

Son 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ı 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 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ümanlarda, 3D Hikaye Anlatma uygulamasını özelleştirmek için 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. 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şlamanıza yardımcı olacak 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ü serbest bırakın ve gerçekten özel bir şey oluşturun.