
SVG 마스터
1분코딩
웹 벡터 그래픽 SVG를 기초부터 제대로 익히고, 재미있고 다양한 예제들을 통해 원하는 방향으로 응용할 수 있는 기술을 습득합니다.
초급
SVG, HTML/CSS







신한DS
임직원들도 이 강의를 듣고 있어요!





신한DS
임직원들도 이 강의를 듣고 있어요!
먼저 경험한 수강생들의 후기
5.0
김형진
어느 정도 Three.js를 알고 있는 상태에서 학습하니 훨씬 더 좋은 거 같습니다. 기존에 알고 있는 내용에 이어서 새로운 것을 알게 되어서 만족스럽네요 설명 방식이랑 구현 원리에 대해 그림이나 시각자료로 이해하기 쉽게 돕는 부분도 너무 좋았어요! 정성스럽고 친절한 강의 잘 들었습니다! ☺
5.0
Thomas
멋진 수업 감사합니다.
5.0
윤인호
이전 강의를 듣고 새로운 THREE.JS 강의가 올라오자마자 듣게 되었는데 프로젝트에 실제 적용하기 위한 핵심 내용만 들어있어서 구현하는 방법만 알고 싶은 분들이 듣기에 좋은 것 같습니다. 반대로 상세하게 알고 싶으신 분들이나 처음이신 분들은 듣다 보면 이해하기 어렵다고 느낄 수도 있을 것 같습니다. 앞선 강의를 듣고 이 강의를 들으니 어떻게 개발하면 될지 새로 알게 돼서 더 좋은 것 같아요!
Three.js 핵심 개념
1인칭 3D 웹페이지 구현 원리
제 웹사이트 https://studiomeal.com를 보시고, 많은 분들이 "이런 건 어떻게 만드나요-" 문의를 주셨어요. 그래서 핵심적인 동작을 구현하는 수업을 만들었습니다. 군더더기 없이, 3D 공간을 만들고 동작을 구현하는 데만 집중하는 강의입니다!
고개를 돌리고,
물체를 클릭해서 동작시키고
물리가 적용되는 세계를 만들어요
모바일에서도 잘 동작하는 예제

기존 강의인 Three.js로 시작하는 3D 인터랙티브 웹은 Three.js의 기본 개념들을 충분한 시간을 들여 자세히 다루고, 여러 예제들을 공부할 수 있는 ‘종합 강의’이고요,

이 강의는 Three.js 기초는 핵심적인 것만 빠르게 훑어보고, ‘1인칭 3D 공간 구현 원리’에 집중한 강의입니다.
3D 공간 구현에 집중한 강의이지만, Three.js를 처음 접하는 분들도 이해할 수 있도록 앞부분 섹션에서 핵심적인 기본 내용을 요약해서 다룹니다. 자바스크립트 기초만 이해하고 계시면 수업을 진행하시는 데에는 지장이 없습니다. 무료로 공개된 샘플 강의를 통해, 강의의 난이도를 가늠해 보실 수 있답니다. Three.js에 대해 더 많은 기본기를 제대로 쌓고 싶으신 분들은, 다른 강의인 "Three.js로 시작하는 3D 인터랙티브 웹" 강의도 함께 수강하시는 걸 추천드려요!

1분코딩 Three.js 로드맵에서 "전체 구매 적용" 30% 할인 쿠폰을 받으실 수 있습니다.
(두 강의 중 하나는 이미 듣고 계신 분도, 로드맵 쿠폰으로 수강신청을 하시면 새로 수강하는 강의에 30% 할인이 적용되니 두개의 강의를 모두 수강하실 분은 로드맵에서 수강신청 해주세요!)
이해하기 쉽도록, 이미지와 애니메이션 활용
동작의 구현에 대한 이해가 중요한 수업이기때문에, 말로만 설명하지 않고 이해하기 쉽도록 부분 부분 이미지와 애니메이션 등을 활용했습니다.

1인칭 3D 웹사이트 구현에 집중한 강의입니다
Three.js의 기본 개념을 요약해서 훑어보고, 바로 1인칭 3D 공간을 구현하는 내용에 집중합니다. 빠른 시간에 직접 나만의 3D 공간을 만들어 보고싶은 분들께 적합해요.
코드를 직접 따라서 작성할 수 있도록, 모든 코드의 시작 버전과 완성 버전을 제공합니다. 중간에 직접 작성하신 코드에 이상이 생겨서 학습 진행에 어려움이 있는 경우, 해당 챕터의 소스코드를 다운로드 받으시면 해당 부분부터 똑같이 학습하실 수 있어요.
강의에서 제공하는 소스코드는 프로젝트에 활용하실 수 있습니다.
강의에서 제공하는 소스코드를 직접 공개하거나 교육용 자료를 만드는 것은 허용하지 않습니다.
자바스크립트 기초에 대한 이해가 있어야 수업을 원활하게 들으실 수 있습니다. 자바스크립트 수업은 아니지만, 중간중간 등장하는 자바스크립트 개념들도 설명드리니 크게 어려움은 없을거예요.
이번 강의는 AI 음성으로 제작 되었기때문에 기존 제 강의랑 느낌이 좀 다를 수 있습니다. 샘플 강의를 체크해 보시고 수강 부탁드려요😊
학습 대상은
누구일까요?
나만의 3D 공간을 만들고 싶은 분
Three.js를 공부했는데 응용이 어려운 분
선수 지식,
필요할까요?
자바스크립트 기초
커리어인증
19,747
명
수강생
1,296
개
수강평
1,175
개
답변
5.0
점
강의 평점
11
개
강의
서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.
개발자/디자이너/콘텐츠크리에이터
페이스북 https://www.facebook.com/1mincoding
전체
43개 ∙ (3시간 47분)
해당 강의에서 제공:
1. Three.js 시작하기
02:03
2. CDN에서 가져오기
04:36
3. NPM과 빌드 툴 사용하기
06:24
4. 소스코드 안내
00:57
6. 기본 장면 만들기
17:27
7. 애니메이션 기본과 카메라 컨트롤
06:23
8. 애니메이션 보정
04:33
10. 스테이지 만들기
08:11
11. 메쉬 객체 모듈
11:33
12. 그림자 처리
02:41
13. 3D 모델 로드 1
04:43
14. 3D 모델 로드 2
07:04
15. 3D 모델 로드 3
02:05
16. 그림자 조정
01:47
17. 이미지 텍스쳐
07:20
19. 카메라 움직임 구현
10:31
20. 물리엔진의 동작 원리
01:21
21. 물리 공간 기본 설정
03:12
22. 메쉬에 물리엔진 적용하기
06:59
23. 물리 객체의 움직임 구현
07:42
24. 물리 객체에 회전 적용하기
04:55
25. 이동 구현 1
02:00
26. 이동 구현 2
10:03
27. 이동 구현 3
06:26
28. 이동 구현 4
04:36
29. 이동 구현 5
02:51
30. Raycaster의 동작 원리
00:58
31. 클릭한 아이템 체크하기
10:51
32. 마커 구현
05:40
33. 램프 끄고 켜기
06:33
34. 로봇청소기 움직임 구현
05:05
전체
10개
5.0
10개의 수강평
수강평 1
∙
평균 평점 5.0
5
이전 강의를 듣고 새로운 THREE.JS 강의가 올라오자마자 듣게 되었는데 프로젝트에 실제 적용하기 위한 핵심 내용만 들어있어서 구현하는 방법만 알고 싶은 분들이 듣기에 좋은 것 같습니다. 반대로 상세하게 알고 싶으신 분들이나 처음이신 분들은 듣다 보면 이해하기 어렵다고 느낄 수도 있을 것 같습니다. 앞선 강의를 듣고 이 강의를 들으니 어떻게 개발하면 될지 새로 알게 돼서 더 좋은 것 같아요!
자세한 수강평 남겨주셔서 감사합니다 인호님 :D 이번 강의는 Three.js를 처음 접하는 분들이 들을 수 있으면서도, 이전 강의를 수강하신 분들께도 새로운 내용을 전해드리고 싶다는 생각이었는데- 이어서 들은게 도움이 되셨다는 말씀을 해주시니 감사하네요! ^^
수강평 1
∙
평균 평점 5.0