A-Frame 레퍼런스

<!-- 패턴 1: 이벤트 기반 상태 전환 -->
<a-box
  class="clickable"
  color="#e74c3c"
  animation__grow="property: scale; to: 1.5 1.5 1.5; dur: 300; startEvents: mouseenter"
  animation__shrink="property: scale; to: 1 1 1; dur: 300; startEvents: mouseleave"
  animation__spin="property: rotation; to: 0 360 0; dur: 1000; startEvents: click"
></a-box>

<!-- 패턴 2: 카메라 + 마우스 커서 (데스크톱) -->
<a-entity camera look-controls wasd-controls position="0 1.6 0">
  <a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable"></a-entity>
</a-entity>

<!-- 패턴 3: 카메라 + 시선 커서 (VR) -->
<a-entity camera look-controls position="0 1.6 0">
  <a-entity
    cursor="fuse: true; fuseTimeout: 1500"
    raycaster="objects: .clickable"
    position="0 0 -1"
    geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
    material="color: white; shader: flat"
  ></a-entity>
</a-entity>

<!-- 패턴 4: 반복 배치 (JavaScript) -->
<script>
  const scene = document.querySelector('a-scene');
  for (let i = 0; i < 10; i++) {
    const el = document.createElement('a-sphere');
    el.setAttribute('position', `${i * 2 - 9} 1 -5`);
    el.setAttribute('color', `hsl(${i * 36}, 80%, 60%)`);
    el.setAttribute('radius', '0.5');
    scene.appendChild(el);
  }
</script>

<!-- 패턴 5: 사운드 재생 -->
<a-entity
  sound="src: url(click.mp3); on: click; volume: 0.5"
  class="clickable"
  geometry="primitive: box"
  material="color: #3498db"
  position="0 1 -3"
></a-entity>