레슨 1 / 3·15분
A-Frame 시작하기
A-Frame — HTML 태그로 3D/VR 만들기
A-Frame은 HTML 태그만으로 3D/VR 장면을 만들 수 있는 웹 프레임워크입니다. Three.js 위에 구축되어 있지만, JavaScript 없이 HTML 속성만으로 3D 씬을 구성할 수 있습니다.
html
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- 하늘 배경 -->
<a-sky color="#1a1a2e"></a-sky>
<!-- 바닥 평면 -->
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="10"
height="10"
color="#2c3e50"
></a-plane>
<!-- 박스 (큐브) -->
<a-box
position="-1 0.5 -3"
rotation="0 45 0"
scale="1 1 1"
color="#e74c3c"
></a-box>
<!-- 구 -->
<a-sphere
position="0 1.25 -5"
radius="1.25"
color="#3498db"
></a-sphere>
<!-- 원기둥 -->
<a-cylinder
position="1 0.75 -3"
radius="0.5"
height="1.5"
color="#2ecc71"
></a-cylinder>
</a-scene>
</body>
</html>- •
— 3D 장면 전체를 감싸는 루트 태그 - •
— 직육면체 (position, rotation, scale, color) - •
— 구 (radius로 크기 지정) - •
— 원기둥 (radius, height) - •
— 평면 (width, height, rotation으로 바닥/벽 생성) - •
— 360도 배경 (color 또는 src로 이미지 지정) - •position="x y z" — 3D 공간에서의 위치
- •rotation="x y z" — 각 축 기준 회전 (도)
html
<!-- 다양한 기본 도형과 속성 -->
<a-scene background="color: #112233">
<!-- 원환(도넛) -->
<a-torus
position="0 2 -5"
color="#9b59b6"
radius="1"
radius-tubular="0.1"
></a-torus>
<!-- 텍스트 -->
<a-text
value="Hello A-Frame!"
position="0 3.5 -5"
align="center"
color="#ffffff"
width="6"
></a-text>
<!-- 이미지를 텍스처로 사용 -->
<a-box
position="3 1 -5"
src="texture.jpg"
width="2"
height="2"
depth="0.1"
></a-box>
</a-scene>💡
A-Frame은 WASD 키로 이동, 마우스 드래그로 시점 회전이 기본 내장되어 있습니다. VR 헤드셋이 연결되면 화면 오른쪽 하단의 VR 아이콘을 클릭해 몰입형 VR 모드로 전환됩니다.