Bubble.io에서 3D 모델 뷰어를 추가하는 방법은 무엇인가요?

Bubble.io 앱에 3D 모델 뷰어를 추가하면 사용자의 시각적 경험이 크게 향상될 수 있습니다. 다음은 Bubble 앱에 3D 모델 뷰어를 통합하는 간단한 단계별 가이드입니다:

첫 번째 단계:
Bubble.io 편집기를 열고 3D 모델 뷰어를 추가하려는 페이지로 이동합니다.

두 번째 단계:
3D 모델 보기를 지원하는 플러그인을 설치합니다. 이를 위해 Bubble.io 편집기의 "Plugins" 탭으로 이동하고 "Add plugins" 버튼을 클릭합니다. "3D Model Viewer"와 같은 3D 모델 보기 플러그인을 검색하거나 이 목적을 위한 다른 사용 가능한 플러그인을 검색합니다. 적당한 플러그인을 찾으면 "Install"을 클릭하여 앱에 추가합니다.

세 번째 단계:
플러그인을 설치한 후에는 페이지에 3D 뷰어 요소를 추가해야 합니다. "Design" 탭으로 다시 돌아가고, 시각적 요소 툴바에서 일반적으로 편집기의 왼쪽에 있는 플러그인 요소 섹션 아래에 새로 설치된 3D 뷰어 요소를 찾습니다.

네 번째 단계:
페이지에서 3D 모델이 표시되길 원하는 곳에 3D 뷰어 요소를 드래그 앤 드롭합니다. 레이아웃 요구 사항에 따라 크기와 위치를 조정할 수 있습니다.

다섯 번째 단계:
3D 뷰어 요소를 선택하고, 속성 편집기 패널로 이동하여 뷰어 설정을 구성합니다. 온라인에 호스팅되고 공개적으로 접근 가능해야 하는 3D 모델 파일의 URL을 제공합니다. 그렇지 않으면 플러그인이 파일을 직접 업로드하는 방법을 제공합니다. 또한, 배경색, 자동 회전, 확대/축소 제어 등 기타 사용 가능한 설정을 자신의 필요에 따라 구성합니다.

여섯 번째 단계:
일부 3D 뷰어 플러그인은 API 키 설정이나 추가 구성이 필요할 수 있습니다. 선택한 플러그인이 이를 요구한다면, 필요한 키를 얻고 설정하기 위해 플러그인 문서에 제공된 단계를 따르십시오.

일곱 번째 단계:
뷰어와 모델 URL을 설정한 후, 앱을 미리 보는 시간입니다. "Preview" 버튼을 클릭하여 앱을 새 브라우저 탭에서 엽니다. 3D 모델 뷰어가 올바르게 작동하고 모델이 의도한 대로 표시되는지 테스트 합니다.

여덟 번째 단계:
미리보기에서 모든 것이 좋아 보인다면, 변경 사항을 배포할 수 있습니다. 편집기로 다시 돌아가 "Deploy"를 클릭하여 사용자들에게 실시간 업데이트를 푸시합니다.

아홉 번째 단계:
배포 후에는 앱의 실시간 버전에서 최종 테스트를 실시하여 3D 모델 뷰어가 최종 사용자에게 원활하게 작동하는지 확인합니다.

그게 다입니다! 이제 사용자들은 Bubble.io 앱 내에서 직접 제공된 3D 모델과 상호작용할 수 있습니다. 이 기능이 프로젝트에 가져다주는 확장된 기능과 몰입 형 경험을 즐기십시오.