Pengantar
Panduan ini akan menuntun Anda melalui berbagai cara menyesuaikan solusi Bercerita 3D, sehingga Anda dapat membuat cerita geolokasi yang menarik.
Anda memiliki fleksibilitas untuk mengonfigurasi solusi bercerita mereka melalui dua metode yang mudah. Pertama-tama, Anda dapat menggunakan UI intuitif yang tersedia di aplikasi Admin, yang dilengkapi panel konfigurasi khusus. Dalam panel ini, pengguna dapat mengubah properti utama seperti imageUrl, judul, tanggal, dan lainnya, baik untuk keseluruhan cerita maupun bab.
Kedua, Anda dapat menyesuaikan setelan kamera dan opsi fokus untuk setiap bab menggunakan GUI di aplikasi Admin. Setelah puas dengan konfigurasinya, pengguna memiliki opsi untuk mendownload file JSON yang dihasilkan.
Atau, Anda dapat langsung mengedit file JSON. Anda dapat menyesuaikan struktur JSON, memuat solusi bercerita yang dikonfigurasi, dan mengabaikan panel kontrol Admin. Pendekatan ganda ini menawarkan antarmuka yang mudah digunakan dan manipulasi JSON lanjutan.
Memulai:
Aktifkan
Buat kisah Anda sendiri
Tata letak keseluruhan cerita dibagi menjadi cerita awal yang diikuti oleh bab-bab.
Sampul dan bab dapat disesuaikan satu per satu. Lihat
detail tentang cara membuat dan menyesuaikan cerita menggunakan aplikasi Admin
serta file konfigurasi.
Halaman sampul
Hal pertama yang perlu dilakukan adalah membuat halaman sampul untuk keseluruhan cerita. Tindakan ini akan menambahkan ringkasan, foto sampul, dan deskripsi ke cerita Anda.
Gunakan aplikasi Admin
Anda memulai dengan menambahkan halaman sampul untuk cerita. Anda dapat melakukannya dari aplikasi Admin menggunakan layar berikut:
Menggunakan config.json
Selain itu, jika memiliki file konfigurasi, Anda dapat langsung menambahkan bagian berikut dalam file tersebut:
- 1.
imageUrl: URL file media utama (gambar, gif, atau video) untuk seluruh artikel.
Ini dapat berupa URL apa pun yang dapat diakses secara publik, yang mengarah ke file gambar, gif, atau video yang ingin Anda gunakan sebagai media utama untuk keseluruhan artikel.
- 2.
title: Judul keseluruhan cerita. - 3.
date: Tanggal atau jangka waktu yang terkait dengan artikel. - 4.
description: Deskripsi singkat tentang cerita. - 5.
createdBy: Pembuat atau penulis cerita. - 6.
imageCredit: Kredit untuk gambar utama. - 7.
cameraOptions: Setelan kamera awal untuk seluruh story.
Segmen
Cerita ini dibagi menjadi beberapa bab, masing-masing dengan kumpulan variabelnya sendiri. Anda dapat membuat segmen sebanyak yang diinginkan. Mulailah dengan memilih alamat, lalu menambahkan detail berikut ke bab tersebut.
Gunakan aplikasi Admin
Penelusuran lokasi: Gunakan kotak penelusuran Autocomplete Google Maps Platform yang terintegrasi untuk menemukan lokasi yang ingin Anda tampilkan.
Setelah lokasi ditambahkan, Anda dapat menambahkan detail ke bab tersebut dengan mengklik tombol Edit di samping lokasi:
Tambahkan detail tentang lokasi:
Setelah Anda puas dengan konfigurasi keseluruhan, download file json dan gunakan dalam aplikasi demo.
Mengonfigurasi menggunakan config.json
Anda dapat mengedit variabel berikut secara langsung di file config.json yang didownload untuk menyesuaikan setiap bab:
title: Judul segmen.id: ID unik untuk segmen.imageUrl: URL gambar segmen.imageCredit: Kredit untuk gambar segmen.content: Konten teks untuk segmen.dateTime: Tanggal atau jangka waktu khusus untuk segmen.coords: Koordinat untuk lokasi yang terkait dengan segmen.lat: Lintang.lng: Bujur.
address: Alamat yang terkait dengan segmen.
Setelan kamera
Aplikasi ini menyediakan berbagai kontrol pada kamera. Bagian ini akan memandu Anda mempelajari berbagai setelan kamera dan cara menyesuaikannya.
(Geser,zoom, miringkan kamera untuk mendapatkan sudut pandang yang sempurna)
Menggunakan aplikasi Admin
Kamera: Menyesuaikan kecepatan gerakan dan jenis orbit kamera untuk menciptakan pengalaman menonton yang dipilih.
Penanda lokasi memungkinkan Anda beralih antara menampilkan pin di lokasi tertentu atau menyembunyikannya.
Fokus radius membuat bayangan vinyet di sekitar area tertentu tanpa menunjukkan lokasi tertentu dengan tepat. Ini sangat bagus untuk menampilkan lingkungan atau kisaran area.
Ini menunjukkan cara mengubah fokus kamera untuk menampilkan area, bukan titik tertentu.
Menggunakan config.json
Anda juga dapat menyesuaikan semua parameter kamera secara langsung menggunakan file konfigurasi JSON:
cameraOptions: Setelan kamera untuk segmen. (pelajari sudut kamera lebih lanjut)position: Parameter posisi menentukan koordinat spasial kamera di lingkungan 3D. Terdiri dari tiga nilai: x, y, dan z. Setiap koordinat mewakili titik dalam sumbu x, y, dan z, yang menentukan lokasi kamera.heading: Parameter arah tujuan mengacu pada arah horizontal yang ditunjuk kamera. Dalam istilah geografis, ini mewakili sudut antara pandangan kamera dan arah utara. Tajuk 0 menunjukkan kamera menunjuk ke utara.pitch: Parameter pitch menentukan sudut vertikal kamera. Hal ini menandakan kemiringan atau kemiringan pandangan kamera. Pitch positif terlihat ke bawah, sedangkan pitch negatif mengarah ke atas.roll: Parameter roll menentukan rotasi di sekitar sumbu kamera. Kamera ini merepresentasikan gerakan memutar kamera. Rol 0 menunjukkan tidak ada rotasi, sedangkan nilai positif atau negatif masing-masing menunjukkan rotasi ke kanan atau kiri.
focusOptions: Opsi untuk berfokus pada titik tertentu.focusRadius: Radius untuk fokus.showFocus: Boolean untuk menampilkan atau menyembunyikan fokus.showLocationMarker: Boolean untuk menampilkan atau menyembunyikan penanda lokasi.
Simpan konfigurasi Anda
Terakhir, klik Simpan posisi kamera untuk menyimpan posisi kamera, lalu klik Keluar dari mode edit untuk menyimpan pekerjaan Anda
Aplikasi ini menyediakan antarmuka yang mudah digunakan sehingga Anda dapat menyesuaikan pengalaman 3D. Ini adalah aplikasi Admin.
Config.json akhir
File config.json akhir berisi semua informasi yang diperlukan untuk membuat pengalaman bercerita kustom Anda. Hal ini mencakup detail halaman sampul, bab, dan setelan kamera. Anda dapat menggunakan file ini untuk menyempurnakan cerita dan memastikan tampilan dan nuansanya persis seperti yang Anda inginkan.
Untuk memulai,download file config.json dari aplikasi Admin atau buat yang baru dari awal. Kemudian, buka file di editor teks dan mulailah mengedit nilainya. Anda dapat mengubah teks, gambar, dan bahkan setelan kamera untuk menciptakan pengalaman yang unik dan imersif bagi audiens.
File json ringkasan cerita dapat terlihat seperti ini:
{
"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
}
}
Dan segmen tertentu dapat terlihat seperti ini. Bab adalah array dan dapat mengambil banyak segmen terpisah di dalam array.
"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
}
},
Penyesuaian lanjutan
Anda dapat mendalami kode dan dapat melakukan beberapa penyesuaian lainnya:
Memuat file konfigurasi dari lokasi lain
Secara langsung, solusi tersebut memuat konfigurasi bercerita dari file lokal . Namun, hal ini dapat dengan mudah diubah di config.js:
export async function loadConfig(configUrl) {
try {
// Fetch the configuration data from the specified URL.
const configResponse = await fetch(configUrl);
Konfigurasi Kamera
Kamera dapat disesuaikan lebih lanjut dari file /utils/cesium.js.
Ini mendefinisikan sejumlah variabel penting seperti:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Jangan ragu untuk menyesuaikan variabel ini untuk mendapatkan berbagai malaikat dan pengalaman kamera.
Kesimpulan
Dalam dokumen ini, kami telah menyediakan panduan untuk menyesuaikan aplikasi Penceritaan 3D. Kita telah mempelajari berbagai opsi yang tersedia di aplikasi Admin dan bagaimana opsi tersebut dapat digunakan untuk membuat cerita geolokasi yang imersif dan menarik. Kita juga telah membahas proses pembuatan story kustom menggunakan file config.json. Langkah Berikutnya
Setelah mempelajari cara menyesuaikan aplikasi Bercerita 3D, Anda dapat mulai membuat cerita Anda sendiri. Berikut ini beberapa ide untuk membantu Anda memulai:
- Buat cerita tentang kampung halaman atau tempat yang pernah Anda kunjungi.
- Buat cerita tentang peristiwa bersejarah atau orang yang menginspirasi Anda.
- Buat cerita tentang dunia fiksi atau mimpi yang pernah Anda miliki.
Kemungkinannya tak terbatas. Jadi, biarkan imajinasi Anda berkembang dan buat sesuatu yang benar-benar istimewa.