개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 6개

수강생 177명

인터랙티브 웹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를 공부했는데 응용이 어려운 분

선수 지식,
필요할까요?

  • 자바스크립트 기초

안녕하세요
1분코딩입니다.

서울에서 웹 개발자/디자이너로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다 :)
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.

커리큘럼

전체

43개 ∙ (3시간 48분)

수업 자료

가 제공되는 강의입니다.

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

수강평

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