Inflearn brand logo image
Inflearn brand logo image

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

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

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

이런 걸 배울 수 있어요

  • Three.js 핵심 개념

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

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

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

고개를 돌리고,

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

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

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

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

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

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

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

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

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

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

로드맵 바로 가기

강의의 특징

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

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

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

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

수강 전 참고 사항

학습 자료

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

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

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

선수 지식 및 유의사항

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

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

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

선수 지식,
필요할까요?

  • 자바스크립트 기초

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

19,190

수강생

1,211

수강평

1,175

답변

5.0

강의 평점

11

강의

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

더보기

커리큘럼

전체

43개 ∙ (3시간 47분)

해당 강의에서 제공:

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

수강평

전체

6개

5.0

6개의 수강평

  • 문정훈님의 프로필 이미지
    문정훈

    수강평 5

    평균 평점 5.0

    5

    100% 수강 후 작성

    어려운 내용을 쉽게 배울 수 있었습니다.

    • 1분코딩
      지식공유자

      첫 수강평과 좋은 말씀 감사드립니다 정훈님😊 멋진 작품 만드시길 바라겠습니다!

  • Thomas님의 프로필 이미지
    Thomas

    수강평 46

    평균 평점 4.7

    5

    100% 수강 후 작성

    멋진 수업 감사합니다.

    • 1분코딩
      지식공유자

      좋은 말씀 감사합니다 Thomas님 :)

  • 윤인호님의 프로필 이미지
    윤인호

    수강평 1

    평균 평점 5.0

    5

    58% 수강 후 작성

    이전 강의를 듣고 새로운 THREE.JS 강의가 올라오자마자 듣게 되었는데 프로젝트에 실제 적용하기 위한 핵심 내용만 들어있어서 구현하는 방법만 알고 싶은 분들이 듣기에 좋은 것 같습니다. 반대로 상세하게 알고 싶으신 분들이나 처음이신 분들은 듣다 보면 이해하기 어렵다고 느낄 수도 있을 것 같습니다. 앞선 강의를 듣고 이 강의를 들으니 어떻게 개발하면 될지 새로 알게 돼서 더 좋은 것 같아요!

    • 1분코딩
      지식공유자

      자세한 수강평 남겨주셔서 감사합니다 인호님 :D 이번 강의는 Three.js를 처음 접하는 분들이 들을 수 있으면서도, 이전 강의를 수강하신 분들께도 새로운 내용을 전해드리고 싶다는 생각이었는데- 이어서 들은게 도움이 되셨다는 말씀을 해주시니 감사하네요! ^^

  • 티라미수님의 프로필 이미지
    티라미수

    수강평 16

    평균 평점 5.0

    5

    60% 수강 후 작성

    3시간분량이라 이거 먼저 듣고있는데 조금 어려워요 ㅎㅎ 이거 듣고 이론 강의 들어야 겠네요 그래도 재밌어요

    • Hyungjin님의 프로필 이미지
      Hyungjin

      수강평 20

      평균 평점 5.0

      5

      100% 수강 후 작성

      어느 정도 Three.js를 알고 있는 상태에서 학습하니 훨씬 더 좋은 거 같습니다. 기존에 알고 있는 내용에 이어서 새로운 것을 알게 되어서 만족스럽네요 설명 방식이랑 구현 원리에 대해 그림이나 시각자료로 이해하기 쉽게 돕는 부분도 너무 좋았어요! 정성스럽고 친절한 강의 잘 들었습니다! ☺

      • 1분코딩
        지식공유자

        감사합니다 형진님- 개념을 이해하기 쉽도록 애니메이션 등의 시각 자료들을 사용해보았는데, 좋게 느끼셨다니 저도 좋네요😊 멋진 작품 만드시길!

    1분코딩님의 다른 강의

    지식공유자님의 다른 강의를 만나보세요!

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!

    연관 로드맵

    강의가 포함된 로드맵으로 학습해 보세요!

    ₩61,600

    30%

    ₩88,000