뷰어 임베드

Any3D 뷰어를 내 페이지에 넣을 수 있습니다. 임베드 프레임은 https 주소에서 모델을 불러오고, 전체 뷰어를 여는 버튼을 제공합니다.

  1. 1

    프레임 넣기

    iframe 을 Any3D 로 지정하고 src 쿼리에 모델 주소를 넣습니다. 프레임 안에는 캔버스만 보이며, 오른쪽 아래에 전체 뷰어를 여는 버튼이 있습니다. 아래에 예시가 있습니다.

    <iframe
      src="https://any3d.cc/ko-KR/embed?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb"
      title="3D 모델"
      style="width:100%;height:480px;border:0"
      loading="lazy"
      allow="fullscreen"
      allowfullscreen
      referrerpolicy="strict-origin-when-cross-origin"
    ></iframe>
    팁: 아래 프롬프트를 복사하여 AI 어시스턴트(Cursor, Claude, ChatGPT 등)에 전달하면 임베드 코드를 빠르게 생성하여 연동할 수 있습니다.
    AI 연동 프롬프트(클릭하여 펼치기/접기)
    웹페이지에 Any3D 3D 뷰어를 임베드하기 위한 <iframe> 코드를 생성해 주세요. 기존 페이지나 컴포넌트를 수정 중이라면 3D 모델이 표시될 위치에 <iframe>을 배치해 주세요. 임베드 기본 URL: https://any3d.cc/ko-KR/embed URL 및 매개변수 규칙: - 필수 매개변수: src 는 모델의 HTTPS 주소를 퍼센트 인코딩(encodeURIComponent)하여 독립된 쿼리 매개변수로 전달해야 합니다(예: https://any3d.cc/ko-KR/embed?src=...). 원본 모델 주소를 경로에 직접 연결하지 마세요. 3D Tiles 는 tileset.json 주소를 사용합니다. - 선택 매개변수(필요 없는 항목은 생략): - autorotate=1: 모델을 자동으로 회전합니다. 생략하면 정지 상태를 유지합니다. - theme=light, theme=dark, theme=system: 뷰어 테마를 설정합니다. - bg=transparent: 투명 배경을 사용합니다. - controls: 마우스 조작 프리셋. 비워 두거나 auto 로 설정하면 파일 형식에 맞춰 최적의 조작 방식이 자동 선택됩니다. standard, cad, solidworks, blender, splat, custom 도 지정할 수 있습니다. 마우스 조작 안내: - auto: CAD 파일은 CAD 조작, Gaussian Splatting 은 부드러운 궤도, 기타 파일은 오비트. - standard: 오비트. 왼쪽 드래그 회전, 오른쪽 드래그 이동, 휠 확대/축소. - cad: AutoCAD 스타일. 가운데 드래그 이동, Shift+가운데 드래그 궤도 회전, 커서 기준 휠 확대/축소, 관성 없음. 왼쪽 드래그로도 회전 가능, 오른쪽 드래그 이동. - solidworks: SolidWorks 스타일. 가운데 드래그 궤도 회전, Ctrl 또는 Command+가운데 드래그 이동, Shift+가운데 드래그 확대/축소. 휠 앞으로 굴리면 커서 위치에서 축소, 관성 없음. - blender: Blender 스타일. 가운데 드래그 궤도 회전, Shift+가운데 드래그 이동, Ctrl 또는 Command+가운데 드래그 확대/축소. 뷰 중심 기준 휠 확대/축소, 관성 없음. - splat: 대형 Gaussian Splatting 을 위한 부드러운 궤도. 드래그하여 부드럽게 회전, 더블 클릭으로 초점 재설정. - custom: standard 와 동일. iframe 요구사항 및 주의사항: - 기본 속성: loading="lazy", style="width:100%;height:480px;border:0" 포함(컨테이너에 맞춰 조정 가능). - 권한 및 정책: allow="fullscreen", allowfullscreen, referrerpolicy="strict-origin-when-cross-origin" 필수. - 샌드박스: 상위 페이지에서 iframe 에 sandbox 를 적용할 경우, 오른쪽 하단 버튼이 새 탭에서 전체 뷰어를 열 수 있도록 allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox 를 포함해야 합니다. - 호스팅 및 CORS: 모델을 호스팅하는 서버는 https://any3d.cc 의 CORS 접근을 허용해야 합니다. 단일 파일(GLB, STL, OBJ, FBX, PLY 등)만 다운로드되므로 별도 텍스처 파일은 모델 내에 포함되어 있지 않으면 누락됩니다. 참고 예시: <iframe src="https://any3d.cc/ko-KR/embed?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb" title="3D 모델" style="width:100%;height:480px;border:0" loading="lazy" allow="fullscreen" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" ></iframe> 주의: 예시의 모델 주소는 자리표시자입니다. 코드 생성 시 src 값을 실제 퍼센트 인코딩된 HTTPS 모델 주소로 변경하세요. 마우스 조작을 파일에 맞춰 자동으로 선택하려면 controls 매개변수를 제외하세요.
  2. 2

    모델을 두는 곳

    주소는 https여야 하고, 파일을 제공하는 쪽은 https://any3d.cc 의 읽기를 허용해야 합니다. 방문자의 브라우저가 그 파일 하나를 받습니다. GLB, STL, OBJ, FBX, PLY 등입니다. 3D Tiles는 tileset.json 주소를 사용합니다. Any3D는 사본을 보관하지 않습니다. 텍스처와 데이터가 별도 파일에 있으면, GLB처럼 모델 안에 들어 있지 않는 한 빠집니다.

  3. 3

    페이지 옵션

    아래 쿼리는 선택 사항입니다. 전체 뷰어를 여는 버튼은 항상 표시됩니다.

    매개변수값효과
    autorotate1모델을 회전합니다. 없으면 그대로 둡니다.
    themelight | dark | system페이지 테마를 정합니다.
    bgtransparent배경을 투명하게 합니다.
    controlsauto | standard | cad | solidworks | blender | splat | custom마우스 조작. 비우면 auto 이고, 파일에 맞춰 고릅니다.
    https://any3d.cc/ko-KR/embed
      ?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb
      &autorotate=1
      &theme=dark
      &bg=transparent
  4. 4

    전체 뷰어 열기

    버튼은 맞는 Any3D 뷰어를 새 탭에서 열고, 같은 모델 주소를 넘깁니다. 가우시안 스플랫, 3D Tiles, DWG 또는 DXF 도면은 전용 뷰어로 갑니다. 그 밖에는 3D 모델 뷰어입니다. 부모 페이지가 iframe에 sandbox를 걸었다면, 버튼으로 탭을 열려면 allow-popups와 allow-popups-to-escape-sandbox가 필요합니다.