jobassignment.txt

이 프로그램은 HONNE-Warm on a Cold Night를 위한 웹 환경에서 작동되는 뮤직비디오이다.


[실행 방법]
이 프로그램은 Google Chrome 51.0.2704.84 m버전 이상에서 작동이 보장되었다. 프로그램을 실행시키려면 먼저 컴퓨터 하나를 Apache나 Nginx 등 웹 서버 데몬을 사용해서 웹 서버로 만들고, 그 웹 서버에 프로젝트 전체를 복사해서 root에 index.html이 노출되도록 하고, 서버에 크롬을 이용하여 접속한다. 
로컬에서 바로 index.html을 크롬으로 열 경우, 보안 문제 때문에 로컬 파일에 대해서는 XHR로 요청을 보내는 것이 불가능하여 파일 로딩에서 오류가 발생하므로 이 점을 염두에 두어야 한다. 
Index.html이 열리면 로딩이 시작되고, 로딩이 끝나면 화면을 한 번 클릭한다. 이제 뮤직비디오가 재생이 되는데, 재생 중 일시정지를 하고 싶다면 화면을 클릭하면 일시정지를 할 수 있다. 다시 재생을 하고 싶다면 화면을 클릭한다. 



(보고서에 명시되지 않은 파일들은 모두 사용되지 않지만 다운받아놓은 파일들입니다.)



[Action 과 CamShot을 작성하는 가이드]

Action은 뮤직 비디오에서 나타나는 어떤 "장면"에서 물체들이 어떻게 배치되고, 매 업데이트에 물체들에 어떤 일이 일어나고, 
boom 이벤트(베이스드럼 소리에 따라 발생되는 이벤트)에 어떤 일이 일어나는지 기술하는 오브젝트입니다.
start는 이 장면이 시작되었을 때 장면을 초기화하는 함수입니다.
update는 매 프레임마다 호출되는 업데이트 함수입니다.
boom은 박자에 따라 호출되는 함수입니다.
end는 장면이 끝날 때 호출되는 함수입니다.

Action의 target은 현재 이 액션이 주목하고 있는 Object3D를 나타냅니다. 
한 Action이 여러 물체로 이루어져 있을 경우 하나의 계층구조를 만들어 그 구조의 root를 target으로 설정해주세요.(constructor의 첫번째 인자)

CamShot의 target은 현재 이 샷이 주목하고 있는 Camera를 나타냅니다. 
CamShot의 subject는 현재 이 샷의 카메라가 붙어있는 Object3D 대상을 말합니다. 

 * 새로운 Action이나 CamShot을 작성하는 방법

action: 
js/actions/ 폴더에 원하는 이름의 .js파일을 생성합니다.
PulsateAction을 참고하여 새로운 Action 클래스를 만듭니다. 사실 복사 붙여넣기 하고 내용만 바꾸면 됩니다.

camshot:
js/camshots/ 폴더에 원하는 이름의 .js파일을 생성합니다.
MoonShot.js와 PulsatingMoonShot.js를 참고하여 새로운 CamShot클래스를 만듭니다.

 * 테스트/적용시키는 법
index.html에서 js/CamShot.js를 불러온 줄 바로 뒤에서 새로 만든 js파일들을 불러오도록 script태그를 이용하여 명시합니다.

BootStrap.js에서 44~74번째 줄에 보면 노트에 따라 타임라인에 액션과 카메라를 추가하는 코드가 있습니다.
여기에서 현재 60, 61, 71, 72번째 줄을 보면 어떤 오브젝트 (육면체, 구)에 대한 Action과 CamShot을 새로 만드는 부분이
있습니다. 여기를 자신이 만든 Action이나 CamShot으로 바꿔서 테스트합니다.
사용되는 target을 다른 것으로 바꾸고 싶다면 THREE js 문서를 참조하시면서 현재 있는 큐브와 구 대신에 새로운 물체를 만들어도 됩니다.


* 테스트 환경
  자기 컴퓨터를 웹서버로 만들어서 자기 컴퓨터에 접속해야 합니다. 그렇지 않으면 파일들을 로딩할 때 문제가 생깁니다. 
 
 * 참고 : GSAP TweenLite를 쓰면 부드러운 모션을 만들 수 있습니다.