01. Three.js 시작하기

Three.js는 3D 장면을 만들고 애니메이션으로 만드는 것을 훨씬 쉽게 만들어주는 라이브러리입니다. 다음 목록은 Three.js로 매우 쉽게 수행할 수 있는 몇 가지 작업을 보여줍니다.  

 

- 단순하고 복잡한 3D 지오메트리 생성

- 가상 현실(VR) 및 증강 현실(AR) 장면 만들기

- 3D 장면을 통해 개체 애니메이션 및 이동

- 개체에 텍스처 및 재료 적용

- 다양한 광원을 사용하여 장면을 비추기

- 3D 모델링 소프트웨어에서 개체 로드

- 3D 장면에 고급 후처리 효과 추가

- 자신만의 커스텀 셰이더로 작업하기

- 포인트 클라우드 생성

 

다음 스크린샷과 같이 몇 줄의 JavaScript로 간단한 3D 모델에서 사실적인 실시간 장면에 이르기까지 무엇이든 만들 수 있습니다(브라우저에서 http://www.vill.ee/eye/를 열어 직접 확인하십시오)

 

1. Three.js 작업에 필요한 도구

Three.js는 JavaScript 라이브러리이므로 Three.js WebGL 응용 프로그램을 만드는 데 필요한 것은 텍스트 편집기와 결과를 렌더링하는 지원되는 브라우저 중 하나뿐입니다.

 

1.1 자바스크립트 편집기

관심 있는 프로젝트는 http://c9.io 입니다. GitHub 계정에 연결할 수 있는 클라우드 기반 JavaScript 편집기입니다. 

또는 온라인편집기를 사용하려면 http://threejs.org/editor/ 에서 직접 편집할 수 있습니다.

 

1.2 웹 브라우저

대부분의 최신 웹 브라우저가 WebGL을 지원하며 Three.js 예제를 실행하는 데 사용할 수 있다고 언급했습니다. 일반적으로 Chrome에서 코드를 실행합니다. 그 이유는 대부분의 경우 Chrome이 WebGL에 대한 최고의 지원과 성능을 가지고 있고 정말 훌륭한 JavaScript 디버거를 가지고 있기 때문입니다.

 

다음 스크린샷에 표시된 이 디버거를 사용하면 예를 들어 중단점 및 콘솔 출력을 사용하여 문제를 빠르게 찾아낼 수 있습니다. 이것은 다음 스크린샷에 예시되어 있습니다. 

=> 크롬에서 개발자 도구를 실행하려면 [도구 더보기] 메뉴를 선택하거나  단축키 F12를 누릅니다. 

 

2. 소스 코드 및 예제 다운로드

브라우저에서 https://github.com/josdirksen/learning-threejs-third 를 열고 오른쪽에 있는 복제 또는 다운로드 버튼을 클릭합니다. 이렇게 하면 단일 ZIP 파일에 있는 모든 소스를 다운로드할 수 있는 옵션이 제공됩니다.