aframe
자산 관리 시스템

소개

비고

애셋의 사용 예

자산을 <a-assets> 내에 배치하고 <a-assets> 를 <a-scene> 내에 배치합니다. 자산에는 다음이 포함됩니다.

• <a-asset-item> - 3D 모델 및 자료와 같은 기타 자산
• <audio> - 사운드 파일
• <img> - 이미지 텍스처
• <video> - 비디오 텍스처

브라우저가 모든 애셋을 가져 오거나 (또는 ​​오류를 일으키거나) 애셋 시스템이 시간 초과에 도달 할 때까지 장면이 렌더링되거나 초기화되지 않습니다.

<a-assets> 애셋을 정의하고 선택자를 사용하여 애셋의 애셋을 가리킬 수 있습니다.

<a-scene>
  <!-- Asset management system. -->
  <a-assets>
    <a-asset-item id="horse-obj" src="horse.obj"></a-asset-item>
    <a-asset-item id="horse-mtl" src="horse.mtl"></a-asset-item>
    <a-mixin id="giant" scale="5 5 5"></a-mixin>
    <audio id="neigh" src="neigh.mp3"></audio>
    <img id="advertisement" src="ad.png">
    <video id="kentucky-derby" src="derby.mp4"></video>
  </a-assets>

  <!-- Scene. -->
  <a-plane src="advertisement"></a-plane>
  <a-sound src="#neigh"></a-sound>
  <a-entity geometry="primitive: plane" material="src: #kentucky-derby"></a-entity>
  <a-entity mixin="giant" obj-model="obj: #horse-obj; mtl: #horse-mtl"></a-entity>
</a-scene>

장면과 엔티티는 초기화 및 렌더링 전에 모든 애셋을 기다립니다 (시간 초과까지).

교차 출하 자원 공유 (CORS)

A-Frame은 XHR을 사용하여 에셋을 가져 오므로 , 브라우저 보안을 사용하면 자산이 다른 도메인에있는 경우 브라우저에서 CORS (cross-origin resource sharing) 헤더 가있는 자산을 제공해야합니다. 그렇지 않으면 장면과 동일한 출처에서 애셋을 호스팅해야합니다.

일부 옵션의 경우 GitHub 페이지 는 CORS 헤더가있는 모든 것을 제공합니다. GitHub Pages를 간단한 배포 플랫폼으로 사용하는 것이 좋습니다. 또는 CORS 헤더가 설정된 파일을 제공하는 서비스 인 A-Frame + Uploadcare 업 로더를 사용하여 에셋을 업로드 할 수도 있습니다.

CORS 헤더 가 설정된 경우 <a-assets> 는 리소스가 다른 도메인에 있음을 감지하면 미디어 요소 (예 : <audio> , <img> , <video> )의 crossorigin 속성을 자동으로 설정합니다.

오디오 및 비디오 미리로드

오디오 및 동영상 애셋은 autoplay 을 설정하거나 preload="auto" 설정 한 경우에만 장면을 차단합니다.

<a-scene>
  <a-assets>
    <!-- These will not block. -->
    <audio src="blockus.mp3"></audio>
    <video src="loadofblocks.mp4"></video>

    <!-- These will block. -->
    <audio src="blocky.mp3" autoplay></audio>
    <video src="blockiscooking.mp4" preload="auto"></video>
  </a-assets>
</a-scene>

제한 시간 설정

도달하면 장면이 렌더링을 시작하고 모든 에셋이로드되었는지 여부에 관계없이 엔티티가 초기화되기 시작하는 시간 제한을 설정할 수 있습니다. 기본 제한 시간은 3 초입니다. 다른 타임 아웃을 설정하려면 timeout 속성에 밀리 초 단위로 전달하면됩니다.

일부 애셋에로드하는 데 시간이 오래 걸리는 경우 네트워크가 느린 경우 사용자가 하루 종일 대기하지 않도록 적절한 시간 초과를 설정해야 할 수 있습니다.

<a-scene>
  <a-assets timeout="10000">
    <!-- You got until the count of 10 to load else the show will go on without you. -->
    <img src="bigimage.png">
  </a-asset>
</a-scene>

응답 유형 지정

<a-asset-item> 이 가져온 내용은 ​​일반 텍스트로 반환됩니다. arraybuffer 와 같은 다른 응답 유형을 사용하려면 <a-asset-item> 의 response-type 속성을 사용하십시오.

<a-asset-item response-type="arraybuffer" src="model.gltf"></a-asset-item>

내부적으로 어떻게 작동 하는가?

A-Frame의 모든 요소는 <a-node> , AFRAME.ANode 프로토 타입을 상속받습니다. ANode 는로드 및 초기화 순서를 제어합니다. <a-assets> , <a-asset-item> , <a-scene> 또는 <a-entity> 이든 초기화 할 요소가 이미 초기화되어 있어야합니다. 노드가 아래쪽으로 초기화됩니다.

<a-assets> 은 ANode 이며로드되기 전에 자식이로드 될 때까지 대기합니다. <a-assets> 은 <a-scene> 의 하위 요소이므로 장면은 모든 애셋이로드 될 때까지 기다려야합니다. 우리는 또한에 추가로드 논리를 추가 <a-entity> 가 명시 적으로 대기하도록 <a-assets> 우리가 정의한 경우로드 <a-assets> .

<a-asset-item> 은 THREE.FileLoader 를 사용하여 파일을 가져옵니다. three.js는 반환 된 데이터를 THREE.Cache 저장합니다. 모든 three.js를 로더에서 상속 THREE.FileLoader 그들이 여부, ColladaLoader , OBJLoader , ImageLoader 등 그리고 그들은 모든 액세스 권한이 중앙의 인식 THREE.Cache . A-Frame이 이미 파일을 가져온 경우, A-Frame은 다시 파일을 가져 오려고 시도하지 않습니다.

따라서 자산에 대한 엔티티 초기화를 차단하므로 시간 엔티티가로드 될 때 모든 자산이 이미 가져온 것입니다. <a-asset-item> 을 정의하고 엔티티가 THREE.FileLoader 형식을 사용하여 파일을 THREE.FileLoader 캐싱이 자동으로 작동합니다.

FileLoader 및 캐시 액세스

더 자세히 듣고 싶다면 three.js FileLoader 액세스하려면 :

console.log(document.querySelector('a-assets').fileLoader);

XHR 응답을 저장하는 캐시에 액세스하려면 다음을 수행하십시오.

console.log(THREE.Cache);