three.js로 시작하는 웹 3D 인터랙션 특강

📌 수업 개요

이 수업은 복잡한 이론 설명보다는 직접 보고, 조작하고, 바꿔보는 방식으로 JavaScript와 3D 그래픽 프로그래밍의 기초(three.js, R3F)를 익히는 실습 중심 수업입니다.

처음에는 2D 화면에서 모형 또는 캐릭터를 움직이는 간단한 코드로 시작하여, 점차 이를 3D 공간으로 확장하고, 마지막에는 3D 인터랙션으로 업그레이드합니다.

이 수업을 통해 즐겁게 학습하고, 종합적으로 나만의 3D 웹을 구현하는 경험을 하게 됩니다.

🎯 학습 목표

1. 프로그래밍 기초 이해

• JavaScript의 변수, 함수, 조건문, 이벤트를 이해하고 활용한다.
• three.js의 3D 모형 조절, 이동, 회전, 이벤트를 이해하고 활용한다.
• 숫자와 코드가 화면 속 움직임과 직접적으로 연결됨을 경험한다.

2. 논리적 사고력과 문제 해결력 경험

• 어떻게 움직이는지, 얼마나 움직이는지 등 스스로 생각하고, 조작하며 코드를 수정 및 작성한다.
• 간단한 규칙과 조건을 자유롭게 만들어 나만의 구현 로직을 구성한다.

3. 2D → 3D 공간 이해

• 웹 내 존재하는 좌표(x, y, z) 개념을 직접 코드를 작성하는 실습을 통해 체득한다.
• Javascript를 사용하여 2D 공간에서 만든 개념을 three.js를 사용하여 3D로 확장하는 사고를 익힌다.

4. 인터랙션 중심의 구현