이 페이지는 Cloud Translation API를 통해 번역되었습니다.

3D 스토리텔링: 맞춤설정 가이드

소개

이 가이드에서는 3D 스토리텔링 솔루션을 사용하여 눈길을 끄는 위치정보 스토리를 만들 수 있습니다.

고객의 스토리텔링 솔루션을 유연하게 구성할 수 있는 2가지 방법을 편리하게 사용할 수 있습니다. 이제 전용 구성 패널이 있는 관리 앱 이 패널에서 사용자는 imageUrl, title, date 등 주요 속성을 수정하고 전체 스토리와 개별 챕터에 적용할 수 있습니다

둘째, 카메라 설정 및 초점 옵션별로 장을 참조하세요. 구성에 만족하면 사용자는 생성된 JSON 파일을 다운로드할 수 있습니다.

또는 JSON 파일을 직접 수정할 수 있습니다. JSON 구조를 조정하고, 구성된 스토리텔링 솔루션을 로드하고, 관리자 제어판을 우회합니다. 이 이중 접근 방식은 사용자 친화적인 인터페이스와 고급 JSON 조작을 지원합니다.

시작하기:

사용 설정

나만의 스토리 만들기

스토리의 전체 레이아웃은 커버 스토리와 챕터로 구성됩니다. 표지와 챕터 모두 개별적으로 맞춤설정할 수 있습니다. 체크아웃:
Admin 앱을 사용하여 스토리를 작성하고 맞춤설정하는 방법에 대한 자세한 내용 구성 파일도 포함됩니다

표지

가장 먼저 해야 할 일은 전체 콘텐츠를 위한 표지 페이지를 만드는 것입니다. 있습니다. 이렇게 하면 스토리에 개요, 표지 사진, 설명이 추가됩니다.

관리자 앱 사용

먼저 스토리의 표지 페이지를 추가합니다. 이 작업은 관리 앱에서 할 수 있습니다. 다음 화면을 사용합니다.

config.json 사용

또한 구성 파일이 있으면 이러한 섹션을 있습니다.

1. imageUrl: 다음에 해당하는 기본 미디어 파일 (이미지, gif 또는 동영상)의 전체 스토리

이미지, GIF 또는 동영상을 가리키는 공개적으로 액세스할 수 있는 URL일 수 있습니다. 전체 스토리의 기본 미디어로 사용할 360개 이상의 파일이어야 합니다.

2. title: 전체 스토리의 제목입니다.
3. date: 뉴스와 연결된 날짜 또는 기간입니다.
4. description: 이야기에 대한 간단한 설명입니다.
5. createdBy: 스토리의 작성자 또는 저자입니다.
6. imageCredit: 기본 이미지의 크레딧입니다.
7. cameraOptions: 전체 스토리의 초기 카메라 설정입니다.

챕터

스토리는 챕터로 나뉘며, 챕터마다 고유한 변수 세트가 있습니다. 다음과 같은 작업을 할 수 있습니다. 원하는 만큼 챕터를 만들 수 있습니다. 먼저 주소를 선택한 후 다음 세부정보를 챕터입니다.

관리자 앱 사용

위치 검색: 통합된 Google Maps Platform Autocomplete 검색을 사용합니다. 막대를 탭하여 표시할 위치를 찾습니다.

위치가 추가되면 위치 옆의 수정 버튼을 클릭합니다.

위치에 대한 세부정보를 추가합니다.

전체 구성이 만족스러우면 json 파일을 다운로드하고 데모 앱에서 사용할 수 있습니다

config.json을 사용하여 구성

다운로드한 config.json 파일에서 다음 변수를 직접 수정할 수 있습니다. 각 장을 맞춤설정할 수 있습니다.

title: 챕터의 제목입니다.
id: 장의 고유 식별자입니다.
imageUrl: 챕터 이미지의 URL
imageCredit: 챕터 이미지의 크레딧입니다.
content: 장의 텍스트 콘텐츠입니다.
dateTime: 챕터와 관련된 날짜 또는 기간입니다.
coords: 챕터와 연결된 위치의 좌표입니다.
- lat: 위도.
- lng: 경도.
address: 장과 관련된 주소입니다.

카메라 설정

애플리케이션이 카메라에서 다양한 컨트롤을 제공합니다. 이 섹션 에서 다양한 카메라 설정과 맞춤설정 방법을 안내합니다.

(상하/좌우 이동,확대/축소, 카메라를 기울여 완벽한 시야각을 얻을 수 있음)

관리 앱 사용

카메라: 카메라 이동 속도와 궤도 유형을 조정하여 선택할 수 있습니다.

위치 마커를 사용하면 특정 위치에 핀을 표시하거나 숨길 수 있습니다. 도움이 될 수 있습니다
반경 포커스를 사용하면 특정 영역 주위에 비네트 그림자를 만들 수 있습니다. 특정 위치를 정확하게 가리킴 주변 지역을 보여줄 때 유용합니다. 대략적인 위치 또는 대략적인 위치일 수 있습니다.

카메라의 초점을 변경하여 특정 영역이 아닌 영역을 표시하는 방법을 보여줍니다. 확인할 수 있습니다

config.json 사용

json 구성을 사용하여 모든 카메라 매개변수를 직접 맞춤설정할 수도 있습니다. 파일:

cameraOptions: 챕터의 카메라 설정입니다. (카메라에 대해 자세히 알아보기 각도)
- position: 위치 매개변수는 다음 위치의 공간 좌표를 결정합니다. 카메라를 3D 환경에서 촬영할 수 있습니다. x, y, z의 세 가지 값으로 구성됩니다. 각 좌표는 x, y, z축의 한 점을 나타내며 카메라 위치.
- heading: 방위 매개변수가 가로 방향을 참조하며 카메라가 가리키는 대상을 나타냅니다. 지리적으로 볼 때 각도를 나타냅니다. 제목 0 는 카메라가 정북을 가리키고 있음을 나타냅니다.
- pitch: 피치 매개변수가 피치 매개변수의 수직각을 있습니다. 카메라 뷰의 기울기 또는 경사를 나타냅니다. 가 긍정적인 음조는 아래쪽을 가리키고 부정적인 음조는 위쪽을 가리킵니다.
- roll: 롤 매개변수는 카메라 중심축을 중심으로 한 회전을 정의합니다. 축에 위치합니다. 카메라의 비틀기를 나타냅니다. 0인 굴리기 양수 또는 음수 값은 회전이 없음을 나타냄 오른쪽 또는 왼쪽으로 각각 회전합니다.
focusOptions: 특정 지점에 초점을 맞추는 옵션입니다.
focusRadius: 초점의 반경입니다.
showFocus: 포커스를 표시하거나 숨기는 불리언입니다.
showLocationMarker: 위치 마커를 표시하거나 숨기는 불리언입니다.

구성 저장

마지막으로 카메라 위치 저장을 클릭하여 카메라 위치를 저장합니다. 수정 모드 나가기를 클릭하여 작업을 저장합니다.

이 애플리케이션은 사용자 친화적인 인터페이스를 제공하여 3D 환경을 경험할 수 있습니다. 관리 앱입니다.

최종 config.json

최종 config.json 파일에는 경험해 볼 수 있습니다 여기에는 표지 세부정보, 장, 카메라 설정 등이 있습니다. 이 파일을 사용하여 이야기를 세밀하게 조정하고 정확히 원하는 대로 보이고 느껴집니다.

시작하려면 관리 앱에서 config.json 파일을 다운로드하거나 처음부터 새로 만듭니다. 그런 다음 텍스트 편집기에서 파일을 열고 할 수 있습니다. 텍스트, 이미지, 카메라도 변경할 수 있습니다. 독자층을 위한 특별하고 몰입도 높은 경험을 제공할 수 있습니다.

스토리 개요 json 파일은 다음과 같습니다.

{
  "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
    }
  }

특정 챕터는 다음과 같이 표시될 수 있습니다. 챕터는 배열이며 많은 개별 챕터가 있습니다.

"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
      }
    },

고급 맞춤설정

코드를 살펴보고 몇 가지 다른 맞춤설정을 할 수 있습니다.

다른 위치에서 구성 파일 로드

솔루션은 즉시 사용할 수 있는 상태로 스토리텔링 구성을 로컬 파일 . 그러나 config.js에서 쉽게 변경할 수 있습니다.

export async function loadConfig(configUrl) {
  try {
    // Fetch the configuration data from the specified URL.
    const configResponse = await fetch(configUrl);

카메라 구성

카메라는 /utils/cesium.js 파일에서 추가로 맞춤설정할 수 있습니다. 다음과 같은 여러 가지 중요한 변수를 정의합니다.

반경
BASE_PITCH_RADIANS
BASE_HEADING_RADIANS
BASE_ROLL_RADIANS
DEFAULT_HIGHLIGHT_RADIUS

이러한 변수를 자유롭게 조정하여 다양한 카메라와 경험을 얻을 수 있습니다.

결론

이 문서에서는 3D 스토리텔링을 맞춤설정하는 방법에 대한 가이드를 제공합니다. 애플리케이션입니다. Admin 앱에서 사용할 수 있는 다양한 옵션을 살펴보고 몰입도 높고 흥미로운 위치정보 스토리를 만드는 데 사용하는 방법을 설명합니다. config.json 파일을 사용하여 맞춤 스토리를 만드는 과정도 살펴보았습니다. 파일에서 참조됩니다. 다음 단계

지금까지 3D 스토리텔링 애플리케이션을 맞춤설정하는 방법을 배웠으므로 나만의 스토리를 만들 수 있습니다 다음은 시작하기 위한 몇 가지 팁입니다.

고향이나 방문했던 장소에 대한 스토리를 만듭니다.
역사적 사건이나 나에게 영감을 준 사람에 대한 이야기를 만들어 보세요.
상상 속의 세상이나 꿈에 그리는 스토리를 만들어 보세요.

가능성은 무한합니다! 상상력을 마음껏 펼치고 진짜 특별한 것입니다.