인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

프론트엔드

Three.js로 1인칭 3D 웹사이트 만들기

데스크탑과 모바일에서 모두 동작하는 1인칭 3D 웹사이트를 만들어 보는 강의입니다.

(5.0) 수강평 6개

수강생 202명

인터랙티브 웹Three.js3dJavaScript포트폴리오
Thumbnail

초급자를 위해 준비한
[프론트엔드, Three.js] 강의입니다.

이런 걸 배울 수 있어요

  • Three.js 핵심 개념

  • 1인칭 3D 웹페이지 구현 원리

1인칭 시점의 3D 웹페이지를 만드는 강의입니다.
(Mine*raft같은 게임의 동작을 생각하시면 됩니다😊)

제 웹사이트 https://studiomeal.com를 보시고, 많은 분들이 "이런 건 어떻게 만드나요-" 문의를 주셨어요. 그래서 핵심적인 동작을 구현하는 수업을 만들었습니다. 군더더기 없이, 3D 공간을 만들고 동작을 구현하는 데만 집중하는 강의입니다!

feat1

고개를 돌리고,

feat2

물체를 클릭해서 동작시키고

feat3

물리가 적용되는 세계를 만들어요

IMB_8YOi93

모바일에서도 잘 동작하는 예제

🤔이전에 출시한 "Three.js로 시작하는 3D 인터랙티브 웹" 강의와 무엇이 다른가요?

01

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

02

이 강의는 Three.js 기초는 핵심적인 것만 빠르게 훑어보고, ‘1인칭 3D 공간 구현 원리’에 집중한 강의입니다.

🐣Three.js가 처음인데, 이 강의를 바로 들을 수 있나요?

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

🛤1분코딩 Three.js 로드맵에서 30% 할인쿠폰을 받으세요

1

1분코딩 Three.js 로드맵에서 "전체 구매 적용" 30% 할인 쿠폰을 받으실 수 있습니다.
(두 강의 중 하나는 이미 듣고 계신 분도, 로드맵 쿠폰으로 수강신청을 하시면 새로 수강하는 강의에 30% 할인이 적용되니 두개의 강의를 모두 수강하실 분은 로드맵에서 수강신청 해주세요!)

➡ 로드맵 바로 가기

강의의 특징

애니메이션설명high

이해하기 쉽도록, 이미지와 애니메이션 활용

동작의 구현에 대한 이해가 중요한 수업이기때문에, 말로만 설명하지 않고 이해하기 쉽도록 부분 부분 이미지와 애니메이션 등을 활용했습니다.

yesno

1인칭 3D 웹사이트 구현에 집중한 강의입니다

Three.js의 기본 개념을 요약해서 훑어보고, 바로 1인칭 3D 공간을 구현하는 내용에 집중합니다. 빠른 시간에 직접 나만의 3D 공간을 만들어 보고싶은 분들께 적합해요.

수강 전 참고 사항

학습 자료

  • 코드를 직접 따라서 작성할 수 있도록, 모든 코드의 시작 버전과 완성 버전을 제공합니다. 중간에 직접 작성하신 코드에 이상이 생겨서 학습 진행에 어려움이 있는 경우, 해당 챕터의 소스코드를 다운로드 받으시면 해당 부분부터 똑같이 학습하실 수 있어요.

  • 강의에서 제공하는 소스코드는 프로젝트에 활용하실 수 있습니다.

  • 강의에서 제공하는 소스코드를 직접 공개하거나 교육용 자료를 만드는 것은 허용하지 않습니다.

선수 지식 및 유의사항

  • 자바스크립트 기초에 대한 이해가 있어야 수업을 원활하게 들으실 수 있습니다. 자바스크립트 수업은 아니지만, 중간중간 등장하는 자바스크립트 개념들도 설명드리니 크게 어려움은 없을거예요.

  • 이번 강의는 AI 음성으로 제작 되었기때문에 기존 제 강의랑 느낌이 좀 다를 수 있습니다. 샘플 강의를 체크해 보시고 수강 부탁드려요😊

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 나만의 3D 공간을 만들고 싶은 분

  • Three.js를 공부했는데 응용이 어려운 분

선수 지식,
필요할까요?

  • 자바스크립트 기초

안녕하세요
입니다.

18,846

명

수강생

1,159

개

수강평

1,173

개

답변

5.0

점

강의 평점

11

개

강의

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
인프런 강의를 만들 때는 언제나 "지루하지 않고 재밌으면서도 유익한 강의"를 만드는 것을 목표로 합니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

커리큘럼

전체

43개 ∙ (3시간 48분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!