콘텐츠로 이동
Prevu3D

소개

RealityConnect Embed를 사용하면 라이브 인터랙티브 RealityTwin 뷰어를 자체 웹 애플리케이션에 직접 배치할 수 있습니다. 트윈은 iframe에서 렌더링되며, 경량 JavaScript SDK(@prevu3d/realityconnect-embed)가 페이지에 프로그래밍 방식의 제어권을 제공합니다. 덕분에 사용자는 이미 사용 중인 도구를 벗어나지 않고도 몰입감 있는 3D 컨텍스트를 얻을 수 있습니다.

임베드의 구성 방식

섹션 제목: “임베드의 구성 방식”

구축을 시작하기 전에 알아 두면 좋은 몇 가지 설계상의 선택이 있습니다.

  • 페이지가 제어하는 순수 뷰어. 임베드된 트윈은 내장 인터페이스가 없는 3D 뷰어입니다. 헤더, 사이드바, 메뉴, 도구 모음이 없습니다. 애플리케이션이 주변의 모든 UI를 소유하며 SDK를 통해 트윈을 제어합니다.
  • RealityConnect API를 통한 권한 부여. 모든 임베드 세션은 조직의 OAuth 자격 증명을 사용하여 권한이 부여됩니다. 익명 임베딩은 없습니다. 백엔드가 특정 트윈에 대해 서명된 단기 임베드 URL을 요청합니다.
  • SDK가 뷰어를 로드하고 계측합니다. 페이지가 해당 URL을 SDK에 전달하면, SDK는 iframe을 삽입하고 트윈과 안전한 양방향 채널을 설정합니다.
  • 페이지가 트윈을 제어합니다. 뷰어가 준비 완료를 알리면 SDK 명령을 사용하여 트윈을 제어(내비게이션, 관심 지점, 객체로 텔레포트, 공유 가능한 뷰 캡처)하고 임베드된 장면의 라이브 상태를 구독할 수 있습니다.
  • RealityConnect의 시각 계층입니다. RealityConnect API가 시스템을 연결하고 접근 권한을 부여하는 한편, RealityConnect Embed는 트윈을 렌더링하고 이를 프런트엔드 코드에 노출합니다.

각 구성 요소의 연동 방식

섹션 제목: “각 구성 요소의 연동 방식”

임베드 세션이 작동하도록 세 가지 구성 요소가 협력합니다.

  1. 백엔드가 Client Credentials 플로우로 RealityConnect API에 인증한 다음, 특정 트윈에 대한 단기 임베드 세션을 생성하도록 API에 요청합니다. OAuth 클라이언트 시크릿이 존재하는 유일한 위치입니다.
  2. 프런트엔드가 백엔드로부터 세션 값을 받아 SDK에 전달합니다. SDK는 서명된 임베드 URL을 가리키는 iframe을 삽입하고 그와 안전한 postMessage 채널을 엽니다.
  3. 임베드된 트윈이 3D 장면을 렌더링하고, 페이지에서 보낸 명령을 실행하며, 라이브 상태(선택된 객체, 현재 카메라 모드, 인코딩된 뷰 등)를 다시 스트리밍합니다.

임베드가 노출하는 것

섹션 제목: “임베드가 노출하는 것”

SDK는 장면을 제어(카메라 내비게이션, 관심 지점, 객체 텔레포트, 뷰 공유, 스크린샷)하고 트윈에서 돌아오는 라이브 상태를 구독할 수 있는 타입이 지정된 API를 페이지에 제공합니다. 전체 표면(네임스페이스, 액션, observable, 오류 코드)은 SDK README에 문서화되어 있습니다.

아래 표는 임베드가 현재 다루는 것과 다루지 않는 것을 요약한 것입니다. 새로운 기능이 정기적으로 추가되므로 이는 스냅숏으로 보시기 바랍니다.

기능임베드에 포함?비고
3D 장면 렌더링예완전한 RealityTwin 열람 환경.
카메라 내비게이션 모드예원근, 정사영, 포토스피어, 3인칭.
관심 지점(보기, 생성, 편집)예관심 지점의 생성, 편집, 배치.
객체 선택 및 “텔레포트”예특정 비즈니스 객체로 카메라를 이동합니다.
공유 가능한 뷰 링크예현재 카메라를 간결한 문자열로 인코딩한 뒤, 나중에 페이지가 로드될 때 복원합니다.
스크린샷예현재 뷰를 PNG 바이트로 캡처합니다.
라이브 상태 구독예선택, 호버, 카메라 모드, 관심 지점 도구 상태 등을 관찰합니다.
내장 트윈 UI(메뉴, 패널, 모달)아니요호스트 페이지가 모든 인터페이스 요소를 제공합니다.
편집 기능(초안, 측정, 존, RealityPlan Projects, CAD 검사)아니요이러한 기능은 완전한 RealityTwin 애플리케이션에 남아 있습니다.

일반적인 사용 사례

섹션 제목: “일반적인 사용 사례”
  • 레코드와 함께 3D 컨텍스트를 원하는 자산 관리 및 검사 플랫폼
  • 가상 투어 및 이러닝 경험
  • 임베드되고 탐색 가능한 디지털 트윈의 이점을 누리는 모든 웹 제품

다음 단계

섹션 제목: “다음 단계”