에셋 관리와 텍스처

<a-scene>
  <!-- 에셋 사전 로딩 -->
  <a-assets>
    <!-- 이미지 텍스처 -->
    <img id="sky-img" src="sky.jpg" />
    <img id="floor-img" src="floor.png" />
    <img id="wall-img" src="bricks.jpg" />

    <!-- 오디오 -->
    <audio id="bgm" src="background.mp3" preload="auto"></audio>

    <!-- 3D 모델 (GLTF) -->
    <a-asset-item id="tree-model" src="tree.glb"></a-asset-item>
    <a-asset-item id="chair-model" src="chair.gltf"></a-asset-item>
  </a-assets>

  <!-- 360도 하늘 배경 — 이미지 텍스처 적용 -->
  <a-sky src="#sky-img"></a-sky>

  <!-- 바닥 — 텍스처 반복 적용 -->
  <a-plane
    src="#floor-img"
    rotation="-90 0 0"
    width="20"
    height="20"
    repeat="10 10"
  ></a-plane>

  <!-- 벽면 — 텍스처 적용 -->
  <a-box
    src="#wall-img"
    position="0 1.5 -5"
    width="6"
    height="3"
    depth="0.2"
  ></a-box>
</a-scene>

<a-scene>
  <a-assets>
    <img id="wood-tex" src="wood.jpg" />
    <img id="metal-tex" src="metal.jpg" />
    <img id="normal-map" src="wood-normal.jpg" />
  </a-assets>

  <!-- 기본 텍스처 매핑 -->
  <a-box
    src="#wood-tex"
    position="-2 1 -4"
    width="2"
    height="2"
    depth="2"
  ></a-box>

  <!-- material 컴포넌트로 세밀한 제어 -->
  <a-sphere
    position="2 1.5 -4"
    radius="1"
    material="
      src: #metal-tex;
      metalness: 0.9;
      roughness: 0.1;
      normalMap: #normal-map;
      normalTextureRepeat: 2 2;
    "
  ></a-sphere>

  <!-- 투명 텍스처 -->
  <a-plane
    src="#wood-tex"
    position="0 2 -5"
    width="3"
    height="2"
    material="
      transparent: true;
      opacity: 0.7;
      side: double;
    "
  ></a-plane>
</a-scene>