예제. three.js 를 이용해서 지구본을 만들어보자.

See the Pen globe with stars by iamdap91 (@iamdap91) on CodePen.

Codepen에 옮기느라 꽤나 힘들었다. 망할 base64

최대한 기능별로 함수로 나누었으며, 앞선 글에서의 개념을 이해했다면 크게 어렵지 않으리라 생각한다.

주석으로 설명을 달아놔서 설명은 필요 없을거라고 생각한다.

0. Scene, camera, renderer 추가!

1. 조명 추가!

2. 구(지구본) 추가!

3. 별 추가!

4. animation 추가!

참 쉽다.

---

덤.

CDN 을 이용해서는 사용이 불가능해 빼버린 기능이 있다. three.js 를 CDN 말고 직접 받아서 사용하면 된다.

바로 OrbitControl 기능이다.

이게 어떤 기능이냐면, 마우스 이동시 화면을 회젼시켜주는 기능이다.

위 코드를 로컬로 가져와서 아래 코드를 추가하면 사용 가능하다.

1. 아래 CDN 을 index.html 에 추가. 

<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

2. setOrbitControl 함수의 주석 해제

3. https://threejs.org/build/three.js 에서 three.js 받아서 추가할것. three.js 는 CDN 을 사용하는 것이 권장되지 않는다.  왜냐고? 니도 몰라. 하하하. 

끝. 

---

덤2. 비슷한 예제이다. 아래 링크에서는 CDN 추가 안해도 orbitControl 이 사용된다. 나도 codepen 에서 갈아탈까...

http://jsfiddle.net/zD2rH/183/

Edit fiddle - JSFiddle

진짜 끝.

---

https://codepen.io/qkevinto/pen/EVGrGq

불러오는 중입니다...