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

Giriş

Bu kılavuzda, 3D Hikaye Anlatma çözümünün coğrafi konum hikayeleri oluşturmanıza olanak tanıyacak şekilde özelleştirebilirsiniz.

Hikaye anlatma çözümlerini iki şekilde yapılandırabilirsiniz: yöntemler. Öncelikle, özel bir yapılandırma paneli içeren Yönetici uygulamasındaki sezgisel kullanıcı arayüzünü kullanabilirsiniz. Bu panelde kullanıcılar, hem hikayenin tamamı hem de bölümler için imageUrl, başlık, tarih gibi temel özellikleri değiştirebilir.

İkincisi, her video için ayrı ayrı kamera ayarlarında ve odaklama seçeneklerinde bölümünü da inceleyebilirsiniz. Yapılandırmadan memnun kaldıklarında kullanıcılar, oluşturulan JSON dosyasını indirme seçeneğine sahiptir.

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

Başlarken:

Etkinleştir

Kendi hikayenizi oluşturun

Hikayenin genel düzeni bir cover hikayesi ve ardından bölümler halinde bölünmüştü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, genel tanıtım sayfanız için bir kapak sayfası iş hayatına dokunun. Bu işlem, genel bakışı, kapak fotoğrafını ve açıklamayı hikayenize ekler.

Yönetici Konsolu uygulamasını kullan

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

resim

config.json kullan

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

  • 1. imageUrl: İlgili içeriğe ait ana medya dosyasının (resim, GIF veya video) URL'si karar verebilirsiniz.

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: 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 grubuna sahip bölümlere ayrılır. Şunları yapabilirsiniz: istediğiniz kadar bölüm oluşturabilirsiniz. Önce bir adres seçip bölüme aşağıdaki ayrıntıları ekleyin.

Yönetici uygulamasını kullanma

Konum arama: Entegre Google Haritalar Platformu Otomatik Tamamlama aramasını kullanın ç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 kullanarak yapılandırma

Aşağıdaki değişkenleri doğrudan indirilen config.json dosyasında düzenleyebilirsiniz. tıklayın:

  • 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: Boylam.
  • address: Bölümle ilgili adres.

Kamera ayarları

Uygulama, kamera üzerinde birçok farklı kontrol sunar. Bu bölüm farklı kamera ayarları ve bunların nasıl özelleştirileceği konusunda size yol gösterir.

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 Konsolu 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, belirli bir konumdaki raptiyeler arasında geçiş yapmanızı sağlar. gizleyebiliyor.

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

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ırmasını kullanarak da özelleştirebilirsiniz dosya:

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

    • 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 eksenleri üzerinde bir noktayı temsil eder ve kameranın konumuna dikkat edin.

    • 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ünün arasındaki açıyı temsil eder. 0 değeri, kameranın tam kuzeye baktığını gösterir.

    • pitch: Ses perdesi parametresi, dönüş açısının dikey açısını bulun. 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 etrafındaki dönüşü tanımlar eksenini seçin. 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 tıklayın ve ardından Çalışmanızı kaydetmek için Düzenleme modundan çık'ı tıklayın

resim

Bu uygulama, kullanıcı dostu bir arayüz sunar. Kullanıcı adınızı 3D deneyimi sunuyor. Bu, Yönetici uygulaması.

Nihai config.json

Son config.json dosyası, ve özel hikaye anlatma deneyimiyle ilgilidir. Kapak sayfası ayrıntıları, bölümler, ve kamera ayarları. Bu dosyayı hikayenizde ince ayar yapmak ve projenizde şekilde görünmesini sağlayabilirsiniz.

Başlamak için Yönetici uygulamasından config.json dosyasını indirin veya sıfırdan yeni bir tane 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ükle

Bu çözüm, kutudan çıktığı gibi hikaye anlatma yapılandırmasını yerel bir dosya . 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 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 anlatımını özelleştirmek için bir kılavuz sağladık. kabul edersiniz. 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. Biz config.json kullanarak özel hikaye oluşturma sürecine de değindik. dosyası olarak kaydedebilirsiniz. Sonraki Adımlar

Artık 3D Hikaye Anlatma uygulamasını nasıl özelleştireceğinizi 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şi hakkında 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.