amp-3d-gltf
Description
GL 전송 양식(glTF) 3D 모델을 표시합니다
Required Scripts
<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
Supported Layouts
예제
GL 전송 양식(glTF) 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 구성요소는 glTF 형식의 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-gltf는 access-control-allow-origin: *.ampproject.net가 src로 지정된 엔드포인트의 응답 헤더에 설정되도록 원본 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입니다.
setModelRotation(x=0.5, xMin=0, xMax=3.14) 는 회전의 x 구성요소를 1.57로 변경합니다. |
유효성 검사
AMP 유효성 검사기 사양의 amp-3d-gltf 규칙을 참조하세요.
도움이 더 필요하신가요?
이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.
Stack Overflow로 이동 버그나 누락된 기능을 발견하셨나요?AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.
GitHub로 이동하기