강의

멘토링

로드맵

개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 7개

수강생 251명

  • 1분코딩

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 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를 공부했는데 응용이 어려운 분

선수 지식,
필요할까요?

  • 자바스크립트 기초

안녕하세요
입니다.

19,453

수강생

1,246

수강평

1,175

답변

5.0

강의 평점

11

강의

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

커리큘럼

전체

43개 ∙ (3시간 47분)

해당 강의에서 제공:

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

수강평

전체

7개

5.0

7개의 수강평

  • hjux님의 프로필 이미지
    hjux

    수강평 20

    평균 평점 5.0

    5

    100% 수강 후 작성

    I think it's much better to learn it after having some knowledge of Three.js. I'm satisfied because I learned something new along with what I already knew. I also really liked the part where the explanation method and implementation principles were explained in an easy-to-understand way with pictures and visual aids! I listened to the sincere and kind lecture well! ☺

    • studiomeal
      지식공유자

      Thank you Hyungjin-nim- I tried using visual aids such as animations to make it easier to understand the concept, and I'm glad you liked it😊 I hope you create a great piece!

  • orangewebcenter2238님의 프로필 이미지
    orangewebcenter2238

    수강평 46

    평균 평점 4.7

    5

    100% 수강 후 작성

    Thank you for the great class.

    • studiomeal
      지식공유자

      Thank you for your kind words Thomas :)

  • dlsgh24681368님의 프로필 이미지
    dlsgh24681368

    수강평 1

    평균 평점 5.0

    5

    58% 수강 후 작성

    I listened to the new THREE.JS lecture right after I listened to the previous lecture, and it only contains the core content for practical application to projects, so it seems good for those who only want to know how to implement it. On the other hand, those who want to know in detail or those who are new to it may feel difficult to understand as they listen. I listened to the previous lecture and this lecture, and I think it's better because I learned a new way to develop!

    • studiomeal
      지식공유자

      Thank you for leaving a detailed review, Inho :D I wanted to make this lecture suitable for those who are new to Three.js, but also provide new content to those who have taken the previous lecture - I am grateful that you said that listening to it was helpful! ^^

  • ohmymoon님의 프로필 이미지
    ohmymoon

    수강평 5

    평균 평점 5.0

    5

    100% 수강 후 작성

    I was able to learn difficult content easily.

    • studiomeal
      지식공유자

      Thank you for your first class review and kind words, Jeonghoon. 😊 I hope you create great works!

  • jongchanlee2597님의 프로필 이미지
    jongchanlee2597

    수강평 1

    평균 평점 5.0

    5

    30% 수강 후 작성

    ₩88,000

    1분코딩님의 다른 강의

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

    비슷한 강의

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