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. İlk olarak, Özel bir yapılandırma paneli bulunan yönetici uygulaması. Kullanıcılar bu panelde imageUrl, title, date ve benzeri ana özellikleri değiştirebilirsiniz. hem hikayenin geneli, hem de tek tek bölümler için.

İ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 anlatma çözümünü yükleyebilir, Yönetici kontrol panelini atlayın. 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 hikayesine ve ardından bölümlere ayrılmıştır. Hem kapak hem de bölüm ayrı ayrı özelleştirilebilir. Göz atın
hikayelerin hem Yönetici uygulaması kullanılarak nasıl oluşturulabileceğine ve özelleştirilebileceğine ilişkin ayrıntılar yapılandırma dosyası da vardır.

Kapak sayfası

İlk olarak, genel çalışma sayfanız için bir kapak sayfası iş hayatına dokunun. 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ından yapabilirsiniz. şu ekranı kullanarak:

resim

config.json kullan

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

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

Bu, bir resim, GIF veya videoya işaret eden, herkese açık herhangi bir URL olabilir. hikayenin tamamında ana medya olarak kullanmak istediğiniz bir dosya seçin.

  • 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. Şunları yapabilirsiniz: istediğiniz kadar bölüm oluşturabilirsiniz. Önce bir adres seçin, ardından aşağıdaki ayrıntıları bakın.

Yönetici Konsolu uygulamasını kullan

Konum arama: Entegre Google Haritalar Platformu Otomatik Tamamlama aramasını kullanın çubuğunu kullanın.

Yer eklendikten sonra, Konumun yanındaki Düzenle düğmesi:

resim

Konumla ilgili ayrıntıları ekleyin:

Genel yapılandırmadan memnun kaldığınızda, json dosyasını indirin ve demo uygulamada 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 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ü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çınızı elde etmek için kamerayı kaydırma, yakınlaştırma ve eğme)

Yönetici Konsolu uygulamasını kullanma

Kamera: Kameranın hareket hızını ve yörünge türünü ayarlayarak tercih edilir.

  • Konum işaretçisi, belirli bir konumdaki raptiyeler arasında geçiş yapmanızı sağlar. gizleyebiliyor.

  • Yarıçap odağı, belirli bir alanın etrafında vinyet gölgesi oluşturur: belirli bir konumu ayrıntılı olarak görebilirsiniz. Bu, mahalleyi herkese göstermek için veya genel alan.

resim

Bu görselde, fotoğraf makinesi yerine bir alanı göstermek için kameranın karar verebilirsiniz.

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, 3D ortamda gösterme. x, y ve z olmak üzere üç değerden oluşur. Her koordinat, x, y ve z eksenleri üzerinde bir noktayı temsil eder ve kameranın konumuna dikkat edin.

    • heading: <heading> parametresi, yön tuşlarından kameranın doğrultulduğu yer. Coğrafi terimlerde bu, kameranın görüş açısı ile kuzey yönü arasındaki açı 0 başlığı kameranın kuzeye doğru yönelttiğini belirtir.

    • 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. CEVAP pozitif perde aşağı doğru, negatif perde de yukarıyı işaret eder.

    • roll: Yuvarlama parametresi, kameranın etrafındaki dönüşü tanımlar eksenini seçin. Kameranın bükme hareketini gösterir. 0 zar at değeri rotasyon olmadığını belirtirken, pozitif veya negatif değerler bir sağa veya sola dönmesini sağlar.

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

Son 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çın ve değerleri düzenleyebilirsiniz. Metni, resimleri, hatta kamerayı değiştirebilirsiniz kitleniz için benzersiz ve sürükleyici bir deneyim oluşturun.

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 birçok bağımsız bölüm bulunur.

"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, 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 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 anlatımını özelleştirmek için bir kılavuz sağladık. kabul edersiniz. Yönetici Konsolu uygulamasında bulunan çeşitli seçenekleri ve etkileyici coğrafi konum hikayeleri oluşturmak için bunların nasıl kullanılabileceğini açıklayacağız. 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ş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 nedenle hayal gücünüzü sınırlamayın ve gerçekten özel bir şey.