AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-3d-gltf

GL 전송 양식(gITF) 3D 모델을 표시합니다.

필수 스크립트 <script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
지원되는 레이아웃 fill, fixed, fixed-height, flex-item, responsive
AMP By Example의 amp-3d-gltf 예를 참조하세요.

사용

amp-3d-gltf 구성요소는 gITF 형식의 3D 모델을 표시합니다.

참고: 이 모델을 표시하려면 WebGL이 지원되는 브라우저가 필요합니다.

<amp-3d-gltf
  layout="responsive"
  width="320"
  height="240"
  alpha="true"
  antialiasing="true"
  src="path/to/model.glb"></amp-3d-gltf>

제한사항

현재 glTF 2.0에서만 작동합니다.

지원되지 않는 기능:

  • 내장 카메라
  • 애니메이션

CORS

amp-3d-gltfaccess-control-allow-origin: *.ampproject.netsrc로 지정된 엔드포인트의 응답 헤더에 설정되도록 원본 https://<random>.ampproject.net에서 fetch 요청을 합니다. 원본에 이 구성요소에 대한 임의의 하위 도메인 구성요소가 있으므로 와일드 카드가 필요합니다.

속성

src [필수] gltf 파일의 URL을 지정하는 필수 속성입니다.
alpha [선택사항] 캔버스의 빈 공간이 투명한지 여부를 지정하는 부울 속성입니다. 기본적으로 빈 공간은 검정색으로 채워집니다. 기본값은 false입니다.
antialiasing [선택사항] 안티 앨리어싱을 사용 설정할지 여부를 지정하는 부울 속성입니다. 기본값은 false입니다.
clearColor [선택사항] 유효한 CSS 색상을 포함해야 하는 문자열로, 캔버스의 빈 공간을 채우는 데 사용됩니다.
maxPixelRatio [선택사항] pixelRatio 렌더링 옵션의 상한을 지정하는 숫자 값입니다. 기본값은 window.devicePixelRatio입니다.
autoRotate [선택사항] 모델의 중심 주위로 카메라를 자동으로 회전할지 여부를 지정하는 부울 속성입니다. 기본값은 false입니다.
enableZoom [선택사항] 확대/축소를 사용 설정할지 여부를 지정하는 부울 속성입니다. 기본값은 true입니다.

작업

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax) 모델 회전을 설정합니다. 회전 순서는 ZYX입니다.
  • x/y/z: 숫자 0..1로, 기본값은 모델 회전의 이전 값입니다.
  • min/max: 각도(라디안)로, 기본값은 0 / pi * 2이며, 대상 범위를 정의합니다.
예를 들어 setModelRotation(x=0.5, xMin=0, xMax=3.14) 는 회전의 x 구성요소를 1.57로 변경합니다.

유효성 검사

AMP 유효성 검사기 사양의 amp-3d-gltf 규칙을 참조하세요.

도움이 더 필요한가요?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub