3D Alan Gezgini özelleştirmeleri

3D Area Explorer, toplulukları büyüleyici 3D olarak keşfetmenizi sağlayan bir çözümdür. Çözümde şu API'ler kullanılır: Google'ın Gerçekçi Fotoğraf 3B Parçaları, Yer Arama, Yer Ayrıntıları, ve Otomatik Tamamlama API'leri.

Başlarken:

Etkinleştir

Deneyimi özelleştirme

3D Area Explorer çözümü, deneyimi müşteri yolculuklarınıza göre uyarlamanıza olanak tanıyan yüksek düzeyde özelleştirilebilir bir çözümdür. Kullanıcı arayüzündeki denetim masasını veya config.json dosyasını kullanarak özelleştirebilirsiniz.

Özelleştirmeye hazır mısınız? Bunun için:

Konum

config.json dosyasında enlem ve boylamı ayarlayarak deneyiminizin başlangıç noktasını tanımlayın.

Kamera Kontrolü

Kameranın yörünge türünü seçerek yolculuğunuzun kontrolünü elinize alın: klasik dairesel yol veya ilgi çekici sinüs dalgası.

  • Sabit yörünge:

    Bu, belirli bir önemli noktanın etrafında sabit bir yükseklikte dairesel bir yörüngedir.

    Google Sidney ofisini keşfederek sabit yörüngeyi iş başında görebilirsiniz.

  • Dinamik yörünge:

    Kamera, belirlenen bir ilgi noktasının etrafında sinüs dalgası yörüngesinde sorunsuz bir şekilde hareket eder. Bu benzersiz hareket, izleyicilerin önemli noktayı çeşitli yüksekliklerden ve açılardan gözlemlemesine olanak tanıyarak dinamik ve sürükleyici bir görsel deneyim sunar.

    Eyfel Kulesi'ni keşfederek dinamik yörüngenin nasıl çalıştığını görebilirsiniz.

Önemli yerler (ÖY):

  • Keşfetmek istediğiniz yer türlerini belirleyerek keşfinizi özelleştirin. config.json içindeki types dizisini kullanarak müzeler, parklar, okullar ve daha fazlası arasından seçim yapın.
  • density parametresini ayarlayarak gösterilen maksimum önemli yer sayısını belirleyin.
  • Yakındaki gizli mücevherleri dahil etmek veya belirli alanlara odaklanmak için searchRadius (in meters) değiştirin.
  • speed (in revolutions per minute) parametresiyle kameranızın hareket hızını ayarlayın.

Keşfiniz önceden yükleniyor: URL Özelleştirme ile Daha Derine İnin

3D Area Explorer, URL özelleştirme ile keşfinizi önceden tanımlamanıza olanak tanır. Bu sayede manuel yapılandırma ihtiyacı ortadan kalkar ve kullanıcı deneyimi kolaylaşır.

Mükemmel URL'yi oluşturma:

Konumu ve diğer ayarları önceden belirlemek için Area Explorer URL'sine belirli parametreleri eklemeniz yeterlidir. Örneğin:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

Bu URL, başlangıç noktasını belirtilen enlem ve boylama ayarlayarak sizi anında seçilen konuma taşır. Kullanılabilir Parametreler:

  • location.coordinates.lat: Seçtiğiniz konumun enlemi.
  • location.coordinates.lng: Seçtiğiniz konumun boylamı.
  • poi.types: Gösterilecek ÖY türlerinin virgülle ayrılmış listesi.
  • poi.density: Seçilen maksimum ÖY sayısı.
  • poi.searchRadius: Yakındaki ÖY'leri aramak için yarıçap.
  • camera.speed: Kamera yörünge hızı.
  • camera.orbitType: Kamera yörünge türü ("fixed-orbit" veya "dynamic-orbit").

URL özelleştirmenin avantajları:

  • Seçtiğiniz ayarları önceden tanımlayarak kullanıcı deneyimini kolaylaştırın.
  • Önceden yüklenmiş belirli konumlar ve önemli yerler içeren hedeflenmiş yolculukları paylaşın.
  • Önceden yapılandırılmış Area Explorer deneyimlerini web sitelerine sorunsuz bir şekilde yerleştirin.

URL özelleştirmeden yararlanarak özel deneyimler oluşturabilir ve başkalarını özel olarak seçilmiş maceralara davet edebilirsiniz.

Daha fazla özelleştirme

Önceki bölümde, kullanıcı arayüzü veya yapılandırma dosyası üzerinden erişilebilen düzenlemeler incelenmişti. Ancak uygulamayı daha da özelleştirmek için değiştirebileceğiniz başka yerleşik parametreler de vardır.

Bu gelişmiş özelleştirmeleri yapmak için src dizinindeki src/utils/cesium.js dosyasında bulunan koda bakmanız gerekir. Uygulamanın görünümünü ve tarzını değiştirmek için aşağıdaki değişkenler değiştirilebilir

Kamera yüksekliği

CAMERA_HEIGHT değerini ayarlayarak kameranın bir noktaya doğru uçarken ne kadar yükseğe çıkacağını kontrol edin. Daha yüksek değerler daha uzak, panoramik bir görünüm sağlarken daha düşük değerler sizi bölgenin ayrıntılarına yaklaştırır.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • Ayar: CAMERA_HEIGHT
  • Varsayılan değer: 100
  • Açıklama: Bir noktaya uçarken kameranın hedef konumun üzerindeki yüksekliğini tanımlar.
  • Örnek değerler:
    • 50: Ayrıntıları vurgulayan daha yakın görünüm.
    • 200: Daha panoramik bir perspektif.

Kamera eğimi

Kameranın ilk eğimi BASE_PITCH ile tanımlanır. Aşağı doğru eğim için negatif değerler, yukarı doğru görünüm için pozitif değerler kullanın. Keşfinize hafif bir dinamik hareket eklemek için AUTO_ORBIT_PITCH_AMPLITUDE değerini değiştirin.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;
  • Ayar: BASE_PITCH ve AUTO_ORBIT_PITCH_AMPLITUDE
  • Varsayılan değerler:
    • BASE_PITCH: -30 (30 derece aşağı eğim)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zaman içinde perdeyi 10 derece değiştirir)

Açıklama: Kamera eğimi, bir haritanın derece cinsinden ölçülen görsel eğimidir. Eğme olarak da bilinir. Bu ayarlar, otomatik dönüşler sırasında kameranın ilk eğimini ve dinamik eğim ayarını tanımlar.

Örnek değerler:

  • BASE_PITCH: 0 (kamerayı düz tutun)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (perde varyasyonu yok)

Kamera Menzili ve Yakınlaştırma

Bu parametreler, belirli noktalara odaklanırken uygulanan yakınlaştırma miktarını ayarlar. Daha küçük değerler, daha yakın bir yakınlaştırma anlamına gelir.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

Ayar: RANGE_AMPLITUDE_RELATIVE ve ZOOM_FACTOR

Varsayılan Değerler:

  • RANGE_AMPLITUDE_RELATIVE: 0,55 (göreli mesafe varyasyonu)
  • ZOOM_FACTOR: 20 (kamera yakınlaştırma faktörü)

Açıklama: Bu ayarlar, kamera hareketi sırasında menzil varyasyonunu ve daha yakından bakmak için yakınlaştırma seviyesini tanımlar.

Örnek değerler:

  • RANGE_AMPLITUDE_RELATIVE: 1 (tam aralık varyasyonu)
  • ZOOM_FACTOR: 10 (daha az yakınlaştırma)
// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

Kamerayı Sıfırlama

Kullanıcı kamerayı orijinal konumuna sıfırlamak istediğinde CAMERA_OFFSET değerleri kullanılır. Bu ayar; yön (döndürme), eğim (eğme) ve menzili (kameranın merkezden ne kadar uzakta olduğu) içerir.

  • Ayar: CAMERA_OFFSET
  • Varsayılan değerler:
    • heading: 0 (döndürme ofseti yok)
    • pitch: Cesium.Math.toRadians(-30) (30 derece aşağı eğme)
    • range: 800 (merkezden 800 metre uzaklıkta)
  • Açıklama: Görünümü sıfırlamak için kameranın yönünü, eğimini ve menzilini tanımlar.
  • Örnek değerler:
    • heading: 45 (derece, kuzeybatı görünümü)
    • range: 1.500 metre (merkezden daha uzakta)

Başlangıç Koordinatları:

START_COORDINATES, kamera için başlangıç boylamını, enlemini ve yüksekliğini tanımlar. Keşif buradan başlayacağı için kullanıcıların ilk olarak görmesini istediğiniz alana ayarlayın.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};
  • Ayar: START_COORDINATES

  • Varsayılan Değerler:

    • longitude: 0
    • latitude: 60
    • height: 15000000 (yüzeyden 15.000 km yukarıda)

  • Örnek değerler:

    • longitude: -122.4934, latitude: 37.7951 (Golden Gate Köprüsü)
    • height: 2000 (daha yakın başlangıç konumu)

Önceden tanımlanmış bir konum yükleme

config.json içindeki location nesnesi, alanın merkezini belirler. Cesium görüntüleyicide kameranın ilk bakış açısıdır.coordinates: Kameranın ilk olarak kaydırılmasını istediğiniz konumun enlemini (lat) ve boylamını (lng) tanımlar. Kamerayı dünya üzerinde belirli bir konuma ayarlamak için bu değerleri düzenleyin.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

Bu yapılandırma, 3D Place Navigator uygulamanızı seçtiğiniz belirli bir konuma yakınlaştırılmış olarak başlatmanıza olanak tanır. Bir adresin veya yer adının enlem ve boylam koordinatlarını almak için Google'ın Coğrafi Kodlama aracını kullanabilirsiniz. Bunun için adresi veya yer adını konum nesnesinde belirtmeniz gerekir:

  1. Coğrafi Kodlama Aracı'na erişin.
  2. Coğrafi Kodlama İsteği Oluşturma "Kendiniz Deneyin" bölümünü tıklayın ve seçtiğiniz konumu "Adres" alanına girin. Adres, yer adı ve hatta önemli noktaları belirtebilirsiniz.
  3. Koordinat Oluşturma İsteğinizi göndermek için "Çalıştır" düğmesini tıklayın. Araç, geometry.location bölümünde gösterilen enlem ve boylam koordinatları da dahil olmak üzere konumla ilgili çeşitli bilgileri içeren bir yanıt döndürür.
  4. Coğrafi kodları kullanın Yanıttan alınan enlem ve boylam değerlerini kopyalayıp yapılandırmanızdaki coordinates nesnesine yapıştırın.

Not: Bu şekilde kullanılan coğrafi kodlar, Google Haritalar Platformu Hizmet Şartları'nın 3.4 bölümünde belirtilen şartlara uymalıdır. Yani 30 günden uzun süre önbelleğe alınmamalı ve bu sürenin ardından yenilenmelidir.

resim

Bu yapılandırma, Google'ın Mountain View, Kaliforniya'daki genel merkezinin koordinatlarını otomatik olarak belirlemek için Coğrafi Kodlama aracını kullanır ve 3D Place Navigator uygulamanızı, kamera bu konuma odaklanmış şekilde başlatır.

Gelişmiş özelleştirmeler

Kodu daha ayrıntılı inceleyerek ek özelleştirmeler yapabilirsiniz. Aşağıdaki bölümde bazı seçenekler açıklanmaktadır.

Yeni bir kamera yolu ekleme

Çözüm, kullanıma hazır iki farklı kamera yolu uygular:

fixed-orbit" | "dynamic-orbit"

Ancak isterseniz yeni bir kamera yolu oluşturabilir ve bunu

/src/utils/cesium.js dosyasındaki calculateAutoOrbitFrame işlevinde.

Yapılandırma panelinde bu yeni yol hesaplamasını kullanmak için demo/src/camera-settings.js. uygulamasındaki uygulamaya bakın.

Daha fazla yer türü ekleme

Yapılandırma için yer türleri listesi demo/src/place-settings.js dosyasında ayarlanabilir. 4. satırdan itibaren, demoda kullanılabilen yer türleri gösterilir.

Demo kaynağını değiştirmeden belirli yer türlerini kullanmak istiyorsanız bunları poi.types altındaki config.json dosyasına ekleyebilirsiniz.

Stili özelleştirme (css)

Stiller için CSS değişkenleriyle çalıştık. Tüm büyük tarayıcılarda desteklenirler ve merkezi bir yerde tek bir satırı değiştirerek belirli CSS özelliklerini güncellemeyi mümkün kılarlar. CSS değişkenlerimiz src/main.css. içinde tanımlanır. Burada tüm uygulama için renkleri, yazı tipi ayarlarını ve dolguları veya kenar boşluklarını ayarlayabilirsiniz.

Ek verileri yerleştirme

Ek verileri yerleştirmek için src/utils/cesium.js dosyasını güncellemeniz ve GeoJSON veya diğer coğrafi referanslı verileri küreye nasıl ekleyeceğinizle ilgili cesium dokümanlarına bakmanız gerekir.

Yapılandırma bölümlerini kaldırma

JavaScript uygulamamızın yapılandırma dosyasında üç ana bölüm vardır: demo/src/[config-panel.js](config-panel.js): location, poi ve camera. Bu bölümlerin her biri, uygulamanın farklı yönleri için yapılandırma seçenekleri sunar. Geliştiriciler bu bölümleri kendi ihtiyaçlarına göre özelleştirebilir.

1.Yapılandırmadan belirli bir bölümü kaldırma

  • Konum Bölümü

location bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulun ve yorum yapın veya silin:

const locationConfig = { ...config.location, ...customConfig.location };
  • ÖY Bölümü

poi bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulun ve yorum yapın veya silin:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Kamera Bölümü

camera bölümünü kaldırmak için kodunuzda aşağıdaki satırı bulun ve yorum yapın veya silin:

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. Birleştirilmiş Yapılandırmaları Güncelleme

Bir bölümü kaldırdıktan sonra birleştirilmiş yapılandırma nesnesini güncellemeniz gerekir. Bu nesne, varsayılan yapılandırmayı tüm özelleştirmelerle birleştirir. İlgili özelliği combinedConfig nesnesinden kaldırın:

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. Kullanıcı arayüzü öğelerini ayarlama

Bir bölümü kaldırmak, ilgili kullanıcı arayüzü öğelerini de kaldırmak anlamına geliyorsa HTML kodunu buna göre güncelleyin. Örneğin, Yönetici panelinden kamera hızı gibi belirli bir bölümü kaldırmak istiyorsanız hem JS hem de HTML kodunu güncellemeniz gerekir.

4. Kamera Ayarları Bölümünü Kaldırma

Kamera ayarları bölümünü kullanıcı arayüzünden kaldırmak için aşağıdaki satırı bulun ve yorum yapın veya silin:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Konum Bölümünü Kaldırma Özeti

const locationSection = await getLocationSettingsSection(locationConfig);

Sonuç

Bu dokümanda, 3D keşif deneyiminizi özelleştirmek için Bölge Gezgini'nde bulunan çeşitli özelleştirme seçeneklerini inceledik. Kamera davranışını değiştirerek, görsel eğimi ayarlayarak ve yakınlaştırma seviyelerini değiştirerek seçtiğiniz ayarları ve önemli yerleri gösteren benzersiz ve ilgi çekici deneyimler oluşturabilirsiniz.

Farklı yapılandırmaları denemeyi ve parametreleri ihtiyaçlarınıza göre ayarlamayı unutmayın. Özelleştirmenin gücünden yararlanarak kitlenizi büyüleyen ve vizyonunuzu hayata geçiren, sürükleyici ve kişiselleştirilmiş yolculuklar oluşturabilirsiniz.