3D ストーリーテリング: エディタを使ってストーリーを作成
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
視聴者を現実世界の場所に連れて行く魅力的な 3D ストーリーを作成してみませんか?このガイドでは、組み込みエディタを使用して新しいストーリーを作成する方法について説明します。
直感的なインターフェースを使用して、タイトル、説明、画像、カメラアングルを調整します。初心者にも最適です。
ストーリー エディタを開く
3D ストーリーテリング ソリューションには、UI からストーリーを作成できる組み込みのエディタが付属しています。
エディタはページの左側にあります。この小さいアイコンをクリックして開きます。

エディタにアクセスするには、ホスト版の 3D Storytelling 管理アプリにアクセスするか、GitHub から独自の Storytelling インスタンスをダウンロードしてインストールします。
表紙を作成する
[ストーリーの詳細] セクションで、タイトル、画像、説明などの詳細を設定します。これにより、視聴者にストーリーを紹介できます。

チャプターを追加
各章は、旅の途中の立ち寄り場所のようなものです。追加方法は次のとおりです。
組み込みのオートコンプリート検索バーを使用して場所を検索します。
場所を追加したら、場所の横にある [編集] ボタンをクリックして、チャプターの詳細を追加できます。

[編集] をクリックして、チャプターのタイトル、説明、画像、日付を入力します。

特定のチャプターを削除する場合は、[編集] ボタンのすぐ下にある [削除] ボタンをクリックします。
左側の点線アイコンを使用して、チャプターをドラッグして移動することで、順序を変更できます。

チャプターを保存する
特定のチャプターを保存するには、[編集モードを終了] ボタンをクリックします。[編集モードを終了] ボタンは保存ボタンとして機能します。

カメラの設定をカスタマイズする
さまざまなカメラ設定をカスタマイズできます。

高度なカメラ オプションがカスタマイズされたエクスペリエンスの作成にどのように役立つかを示します。
カメラの位置をカスタマイズする: カメラの簡単な操作で、表示したいカメラの角度を微調整できます。
傾斜: 地図を上から見たり、地面の高さから見たりできます。Ctrl キー(一部のパソコンでは Cmd キー)を押しながら、マウスで上下にクリックしてドラッグします。
回転: 地図を回転させて 360 度のビューを表示します。Control キー(一部のパソコンでは Cmd キー)を押しながら、マウスでクリックして左右にドラッグします。
ズーム: クローズアップまたは広角で表示します。マウスのスクロール ホイールまたは使い慣れたズームイン/ズームアウトのジェスチャーを使用します。
傾斜、回転、ズームを組み合わせて、各場所の最適な角度を見つけてください。コントロールは、パソコンの設定によって若干異なる場合があります。

3D キャンバスを操作して、最適なカメラアングルを見つける方法をご確認ください。
最終調整してダウンロード
ストーリーとチャプターが作成されたら、構成をダウンロードします。
[ダウンロード] をクリックして、カスタマイズした構成を JSON 形式で取得します。

この構成を使用すると、GitHub からコードをフォークして、独自の 3D ストーリーテリングを作成できます。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-08-27 UTC。
[null,null,["最終更新日 2025-08-27 UTC。"],[[["\u003cp\u003eCreate immersive 3D stories with real-world locations using the built-in editor to customize titles, descriptions, images, and camera angles for a captivating user journey.\u003c/p\u003e\n"],["\u003cp\u003eEasily add chapters to your story by searching for locations, providing details such as titles, descriptions, and images, and reordering them as needed.\u003c/p\u003e\n"],["\u003cp\u003eFine-tune the camera settings for each chapter by controlling the tilt, rotate, and zoom to achieve the perfect perspective and enhance the visual experience.\u003c/p\u003e\n"],["\u003cp\u003eDownload the story configuration in JSON format once finalized to integrate it with the 3D Storytelling solution and share it with your audience.\u003c/p\u003e\n"],["\u003cp\u003eAccess the 3D Storytelling Admin app either through the hosted version or by downloading the code from GitHub to get started building your stories.\u003c/p\u003e\n"]]],["The core process involves creating a 3D story using the built-in editor, accessible via a hosted app or downloaded code. Users set story details, add chapters by searching locations, and customize chapter elements like titles, descriptions, images, and dates. Chapters can be reordered and deleted. Camera settings are adjustable, including showing/hiding markers, displaying a radius, and fine-tuning the view via tilt, rotate, and zoom. Finally, the complete story configuration is downloadable as a JSON file.\n"],null,["Ready to create captivating 3D stories that take viewers on a journey through\nreal-world locations? This guide will show you how to build a new story using\nthe built-in editor.\n\nUse our intuitive interface to adjust titles, descriptions, images, and camera\nangles. It's perfect for beginners!\n| **Use the hosted** [3D Storytelling Admin app](https://js-3d-storytelling-admin-t6a6o7lkja-uc.a.run.app/)\n|\n| Or\n| [Get an API Key](https://console.cloud.google.com/google/maps-apis/credentials?utm_source=3d_solutions_storytelling). and **download** the code from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling).\n\nOpen the story editor\n\nThe 3D Storytelling solution comes with a built-in Editor which lets you to\nbuild the story from the UI\n\nThe editor is on the left side of the page. Open by clicking this small icon:\n\nYou can access the editor by visiting the hosted version\n[3D Storytelling Admin app](https://goo.gle/3d-storytelling-admin) or by\ndownloading and installing your own Storytelling instance from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling)\n\nCreate the cover page\n\nUse the \"Story details\" section to set a title, image, description, and other\ndetails. This introduces your story to the viewer.\n\nAdd chapters\n\nEach chapter is like a stop on your journey. Here's how to add them:\n\n1. Search for a location using the built-in Autocomplete search bar.\n\n2. Once a location is added you can add details to the chapter by clicking on the\n **Edit** button next to the location:\n\n3. Click \"**Edit**\" to enter the title, description, image, and date for your\n chapter.\n\n4. If you want to delete a particular chapter, there is a **delete** button right\n below the Edit button.\n\n5. You can **reorder** the chapters by dragging and moving using the left hand\n dotted icons:\n\nSave the chapter\n\nTo save a specific chapter just click the \"**Leave Edit mode**\" button.\nThe Leave Edit mode button acts as a save button.\n\nCustomize camera settings\n\nYou can customize different camera settings:\n\n- **Show/hide the location marker** You may not want\n to show the pin on a specific location rather want to showcase a general area.\n Check/uncheck the \"Display location marker\" box to show or hide a pin.\n\n- **Show a radius around an area** You can choose to show an area around a\n specific location using the \"Display Radius Focus\" feature. When checked\n it will open up a radius slider that will allow you to control the boundary\n radius of the camera focus.\n\n | **Note:** Make sure to click \"Save camera position\" to save the above settings before exiting.\n\nThis shows how advanced camera options help create a customized experience.\n\n- **Customize the camera location** Fine tune the specific camera angle you\n want to show with easy camera controls:\n\n- **Tilt:** See the map from above or at ground level. Hold down the Control\n key (or Cmd on some computers) while clicking and dragging up or down with\n your mouse.\n\n- **Rotate:** Spin the map for a 360-degree view. Hold down the Control key\n (or Cmd on some computers) while clicking and dragging left or right with your\n mouse.\n\n- **Zoom:** Get a close-up or a wide-angle view. Use scroll wheel of your mouse\n or familiar zoom in/out gestures.\n\nExperiment with combining tilt, rotate, and zoom to find the perfect angle for\neach location. The controls may vary slightly depending on your computer's\nsetup.\n\nCheck how to control the 3D canvas to get your perfect camera angle.\n\nFinalize and download\n\nOnce the story and the chapters are built, download the configuration.\n\nClick \"**Download**\" to get your customized config in JSON format.\n\nThis configuration can be used to create your own 3D Storytelling by forking the\ncode from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling)."]]