이차함수 그래프 시각화

카메라 영상 위에 이차함수 그래프를 그리며, 계수 입력 및 (y)-방향 평행이동을 실시간으로 관찰하는 WebXR 스타일 데모입니다. Three.js를 사용해 격자, 축, 그래프를 렌더링합니다.

프로젝트 구조

• index.html: UI 요소(입력창, 버튼, 슬라이더)와 MathJax, Three.js 모듈 로드.
• styles.css: 전체 화면 캔버스/비디오 레이아웃, 컨트롤러, 슬라이더, 토글 버튼 스타일.
• app.js: Three.js 씬 구성, 그래프 그리기/갱신 로직(updateFunctionGraph, updateFunctionGraph2), 평행이동 애니메이션(animateGraph), 카메라 접근 및 터치 이동 처리.

실행 방법

1. 로컬에서 브라우저로 열기

   • index.html을 브라우저에서 직접 열면 됩니다. 모바일 환경에서도 동작하며, 카메라 권한을 허용해야 배경 비디오가 표시됩니다.

2. 개발 컨테이너/VS Code Live Server 사용

   • Live Server 확장으로 index.html을 서빙하면 CORS 없이 모듈을 로드할 수 있습니다.

주요 기능

• 그래프 그리기: 입력값 (a, b, c)로 (,y = ax^2 + bx + c) 또는 (,y = a(x-b)^2 + c) 그래프를 점 기반으로 렌더링.
• 평행이동 관찰: “(y=ax^2)의 (y)축 방향으로의 평행이동 관찰하기” 버튼으로 슬라이더를 표시하고, (q) 값을 바꾸며 그래프 이동을 실시간 확인.
• 격자 토글: “격자 표시/숨기기” 버튼으로 대시 격자 켜기/끄기.
• 카메라 이동: 터치 드래그로 카메라 위치 이동(슬라이더 터치 시 이동 없음), “돌아가기”로 초기 상태 복원.
• 배경 카메라: navigator.mediaDevices.getUserMedia로 후면 카메라(가능 시) 스트림을 캔버스 뒤에 표시.