제 14회 FE Devtalk 발표자료 발표자: 전기환 (중앙일보)

1. _
중앙일보 전기환
http://yahao2512.com
https://brunch.co.kr/@yahao2512
https://www.facebook.com/yahao2512
생각보다 쉬운
(feat. three.js)
WebGL
부제 : 인터랙티브에 저널리즘 녹이기

2. 소개
중앙일보 콘텐트랩, JTBC 디지털 뉴스국(겸직) / 전기환
중앙일보와 JTBC 평화의 상징

3. 소개
2016 온라인 저널리즘 어워드 (대상) : 검사의 초상
2017 온라인 저널리즘 어워드 (최우수) : 우리안의 그렌펠
2017 인터넷 선거 보도상 (대상) : 대선 후보를 움직이는 사람들 외 2건
2018 온라인저널리즘 어워드 (스토리텔링 부문) : 그날 판문점
2018 데이터 저널리즘 어워드 (대상) : 우리동네 의회 살림

4. 1. 언론사는 왜 인터렉티브 콘텐츠를 만들까?
2. 어떤 것을 만들었을까?
3. 어떻게 만들었을까?
contents

5. 언론사는 왜
인터랙티브 콘텐츠를 만들까?

6. 언론사는 왜 인터랙티브 콘텐츠를 만들까?
전부 똑같다.

7. 해외 언론사의 인터랙티브 콘텐츠
변화를 시작한 워싱턴포스트와 뉴욕타임스
#인터랙티브뉴스 #3D #간지 #성공적

8. 해외 언론사의 인터랙티브 콘텐츠
NYT 2018 : The Year in Visual Stories and Graphics
#스노우폴 #퓰리처상수상 #데이터저널리즘

9. 해외 언론사의 인터랙티브 콘텐츠
최애 언론사 홍콩 SCMP

10. 그래서 우리는
어떤 것을 만들었을까?

11. 어떤 것을 만들었을까? - Three.js

12. 어떤 것을 만들었을까? - D3.JS 등
중앙일보 디콘랩 2018

13. 어떻게 만들었을까?

14. 어떻게 만들었을까?

15. 어떻게 만들었을까?
3D 문서(?) + 맵핑 이미지

16. 어떻게 만들었을까?
THREE.JS를 이용해서
WebGL을 사용했구먼
멋지구먼. 잘하네 NYT

17. 어떻게 만들었을까?
“잭슨 우리도 이런거 돼요?”
(막 3D 휙휙 돌아가고 그런거)
(다음주까지)

18. 어떻게 만들었을까?
안해봤는디…
도깨비 방망이도 아니고...

19. WebGL

20. WebGL
● 웹브라우저에서 GPU를 사용하는 것
● CPU가 아닌 GPU를 사용하여 화면 렌더링
● 빠르다!
● 안 쓸 이유가 없다.

21. 어떻게 만들었을까?
D3.js 그래프 그리고 CSS3DRenderer 사용

22. 재밌다! 본격적으로 해보자!

23. three.js 시작하자

24. three.js 시작하자

25. three.js 시작하자
친절하게 설명 되어있다.

26. three.js 시작하자
소스 코드도 볼 수 있다

27. three.js 시작하자
zip용량이 무려 250MB!

28. three.js 시작하자

29. three.js 시작하자
꼭 보세요! 강추

30. three.js 시작하자
다 나옵니다

31. three.js 시작하자
three.js만 로드하면 준비 완료 (534KB)

32. three.js 시작하자

33. three.js 시작하자
뭔가 3D 같아진다.

34. three.js 시작하자
goo.gl/8cHti5

35. three.js - 카메라
fov : 시야 (45)
aspect : 종횡비
near : 어디부터 (0.1)
far : 어디까지 (1000)

36. three.js - 카메라
fov : 100 (광각)

37. three.js - 카메라
fov : 20 (망원)

38. three.js - 카메라 컨트롤
카메라맨 or 조종사

39. three.js - 카메라 컨트롤
사실 이거 하나만 써도 괜춘

40. three.js - 카메라 컨트롤
goo.gl/1ErF6k

41. 우쥬 만들어 볼까요?

42. three.js - 우주 만들기
가성비 좋은 우주

43. three.js - 우주 만들기

44. three.js - 우주 만들기
큰 공간을 만들고
그 안에 들어가는 것

45. three.js - 우주 만들기
가성비 ㅇㅈ?

46. 3D 파일 로드

47. three.js - 3D 파일 로드
3D 파일은 문서다
DAE, FBX, OBJ 등

48. three.js - 3D 파일 로드
판문점, 우주는 DAE로 받음

49. three.js - 3D 파일 로드
DAE 파일 로드 방법

50. three.js - 3D 파일 로드
FBX 파일 로드 방법

51. three.js - 3D 파일 로드
바닥 맵핑

52. three.js - 3D 파일 로드

53. three.js - 3D 파일 로드

54. three.js - 3D 파일 로드

55. 응용편 - 모델링 없이 3D 돌리기

56. three.js - 기본 도형 응용
기본 도형 응용

57. three.js - 기본 도형 응용

58. three.js - 기본 도형 응용
입체감이 떨어진다

59. three.js - 기본 도형 응용
안개~

60. three.js - 기본 도형 응용
원근감이 생김

61. three.js - 기본 도형 응용
정육면체 4개, 원기둥 4개

62. news.joins.com/DigitalSpecial/List

63. _
중앙일보 전기환
http://yahao2512.com
https://brunch.co.kr/@yahao2512
https://www.facebook.com/yahao2512
감사합니다.