3D 모델과 환경

<a-scene>
  <a-assets>
    <a-asset-item id="robot" src="models/robot.glb"></a-asset-item>
    <a-asset-item id="tree" src="models/tree.glb"></a-asset-item>
    <a-asset-item id="house" src="models/house.gltf"></a-asset-item>
  </a-assets>

  <!-- a-gltf-model 태그로 모델 배치 -->
  <a-gltf-model
    src="#robot"
    position="0 0 -5"
    scale="2 2 2"
    rotation="0 180 0"
  ></a-gltf-model>

  <!-- a-entity + gltf-model 컴포넌트 (동일 결과) -->
  <a-entity
    gltf-model="#tree"
    position="-3 0 -6"
    scale="1.5 1.5 1.5"
  ></a-entity>

  <!-- 여러 모델 배치로 장면 구성 -->
  <a-entity
    gltf-model="#tree"
    position="4 0 -8"
    scale="1 1 1"
  ></a-entity>

  <a-entity
    gltf-model="#house"
    position="0 0 -10"
    scale="0.5 0.5 0.5"
    rotation="0 45 0"
  ></a-entity>
</a-scene>

<a-scene shadow="type: pcfsoft">
  <!-- 환경광 — 장면 전체를 균일하게 밝힘 -->
  <a-light
    type="ambient"
    color="#404060"
    intensity="0.4"
  ></a-light>

  <!-- 방향광 — 태양처럼 평행한 빛, 그림자 생성 -->
  <a-light
    type="directional"
    color="#ffffff"
    intensity="0.8"
    position="2 4 1"
    castShadow="true"
    shadow-map-height="2048"
    shadow-map-width="2048"
  ></a-light>

  <!-- 점광원 — 전구처럼 한 점에서 퍼지는 빛 -->
  <a-light
    type="point"
    color="#ff6600"
    intensity="1.5"
    distance="10"
    decay="2"
    position="0 3 -3"
  ></a-light>

  <!-- 스포트라이트 — 원뿔 형태의 빛 -->
  <a-light
    type="spot"
    color="#ffffff"
    intensity="2"
    angle="45"
    penumbra="0.2"
    position="0 5 -5"
    target="#spotlight-target"
    castShadow="true"
  ></a-light>
  <a-entity id="spotlight-target" position="0 0 -5"></a-entity>

  <!-- 그림자를 받는 바닥 -->
  <a-plane
    rotation="-90 0 0"
    width="20"
    height="20"
    color="#2c3e50"
    shadow="receive: true"
  ></a-plane>

  <!-- 그림자를 드리우는 객체 -->
  <a-box
    position="0 1 -4"
    color="#e74c3c"
    shadow="cast: true; receive: true"
  ></a-box>
</a-scene>

<!-- 안개 효과 — 멀리 있는 객체가 점점 사라짐 -->
<a-scene fog="type: exponential; color: #1a1a2e; density: 0.05">
  <a-sky color="#1a1a2e"></a-sky>

  <!-- 선형 안개 (near ~ far 사이에서 점진적으로 안개) -->
  <!-- fog="type: linear; color: #aab; near: 5; far: 20" -->

  <!-- 바닥 그리드 -->
  <a-entity
    geometry="primitive: plane; width: 50; height: 50"
    material="color: #333; wireframe: true; wireframeLinewidth: 1"
    rotation="-90 0 0"
  ></a-entity>

  <!-- 원거리 오브젝트 — 안개에 가려짐 -->
  <a-sphere position="0 1 -5" color="#3498db"></a-sphere>
  <a-sphere position="0 1 -10" color="#e74c3c"></a-sphere>
  <a-sphere position="0 1 -20" color="#2ecc71"></a-sphere>
  <a-sphere position="0 1 -30" color="#f39c12"></a-sphere>
</a-scene>

<!-- aframe-environment-component 사용 (서드파티) -->
<!-- <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script> -->
<!-- <a-entity environment="preset: forest; dressingAmount: 500"></a-entity> -->
<!-- preset 옵션: default, contact, egypt, checkerboard, forest, goaland, yavapai, goldmine, arches, threetowers, poison, tron, japan, dream, volcano, starry, osiris -->