
Build a First-person View 3D Website with Three.js
studiomeal
In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.
Cơ bản
Three.js, Interactive Web, 3d

눈에 띄는 포트폴리오 웹사이트 제작
독특한 UI의 웹사이트 개발
CSS 3D를 자유자재로 다루기
자바스크립트 기본기를 확실히 다지기
첫 시작부터 라이브러리 없이 하나하나
직접 구현해서 만드는 인터랙티브 웹 강의입니다. 🧩
본 강의는 처음부터 끝까지 라이브러리없이 바닥부터 구현합니다. 실무에서는 생산성이 중요하기에 좋은 라이브러리를 찾아 잘 쓰는 것 또한 중요하지만, 잘 하는 개발자가 되기 위해서는 원천 기술과 구현 원리에 대한 이해가 중요합니다.
첫 시작부터 하나하나 직접 구현하는 방식으로 공부하면 남들과 차별화된 고급 인터랙티브 엔지니어로 성장할 수 있습니다. 눈에 보이는 동작은 같아도, 바닥부터 직접 만드는 법을 훈련한 개발자는 숙련도부터 다릅니다.
"해외 웹 어워드 사이트에서 자주 볼 수 있는 화려한 웹사이트들처럼,
창의적인 UI 인터랙션을 구현하는 과정을 직접 보고 배우고 싶어요."
"창의력이 넘치는 디자이너인데, 코딩 스킬이 따라가질 못해요.
몸값 높고 귀한 진정한 개자이너가 되고싶어요."
"CSS, JS 열심히 공부했지만 항상 비슷한 내용과 예제만 만들어봤어요.
라이브러리를 활용하는 법 말고 동작 원리를 이해하고 싶어요."
2023년 6월, 추가 보강 영상들이 업데이트 되었습니다. 처음 강의를 출시하고 시간이 꽤 흘렀기 때문에, 현재 시점에서 업데이트나 보강이 필요하다고 판단되는 내용을 추가했습니다. 추가된 영상들은 아래 그림처럼 제목에 [2023] 이라는 말머리가 붙어있어요😊
👌 기초부터 진행하는 수업은 아닙니다. CSS와 JS의 기초는 알고 있어야 학습을 원활하게 진행하실 수 있습니다.
👌 기초 정리가 필요하시다면, 제 유튜브의 CSS 레이아웃 / 자바스크립트 기초 정리 영상으로 공부하신 후 이어서 본 강의를 학습하시면 좋습니다.
👌 최종적으로 만드는 3D 스크롤 웹사이트의 소스코드를 제공합니다.
"Oh!" 감탄사가 나오는 역동적인 인터랙티브 웹사이트를 만들어요.
1분코딩님의 인터랙티브 웹 사이트를 만들어보는
강의들로 구성된 로드맵입니다.이 강의 포함
학습 대상은
누구일까요?
크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분들
남들과 다른 독특한 포트폴리오 웹사이트를 만들고 싶은 분들
개자이너, 디발자에 대한 로망을 갖고 계신 분들
평소 1분코딩과 스튜디오밀의 강의가 좋았던 분들
선수 지식,
필요할까요?
CSS 기초
자바스크립트 기초
19,484
명
수강생
1,257
개
수강평
1,175
개
답변
5.0
점
강의 평점
11
개
강의
서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.
개발자/디자이너/콘텐츠크리에이터
페이스북 https://www.facebook.com/1mincoding
전체
70개 ∙ (11시간 14분)
해당 강의에서 제공:
1. 준비 하기
08:56
2. Transform
15:52
3. Transition
10:01
4. Animation 1
09:42
5. Animation 2
05:44
6. Animation 3
14:58
7. CSS 3D 1
14:01
8. CSS 3D 2
15:28
9. CSS 3D 3
17:49
전체
318개
5.0
318개의 수강평
수강평 3
∙
평균 평점 5.0
5
As expected, it is as expected... I learned it after listening to the live JavaScript lecture and followed along to Inflearn. As I felt during the live lecture, the teacher explains it well so that even beginners can understand it, and above all, it is great to see the detailed efforts made to help students understand. I will just trust the teacher and follow him when it comes to interactive web :) I will try to become an interactive web master once. Hehe
Thank you for your kind words! I will make many good lectures to help you study in the future :) Thank you.
수강평 1
∙
평균 평점 5.0
5
Oh, I love it! I understand it so well and after taking the basic JavaScript class, I can't help but exclaim "Eureka!"
I'm glad it helped you :) Thank you for your kind words.
수강평 3
∙
평균 평점 5.0
5
The lecture was so fun and informative ^.^~ It was good to be able to learn how to actually use this kind of grammar (such as attribute selectors and objects in CSS) while making various examples with JavaScript. In particular, it was much easier and better to understand because he didn't just explain it by looking at the code, but also drew pictures (perspective part) and explained the 3D part (card flipping, last example) with a camera and paper. And when learning about flex, I remember the Odeng skewers and Odeng... I think I'll never forget it ㅎㅎ I highly recommend it to those who have just finished JavaScript and are thinking about interactive web or what they can do with JavaScript! I think it would be great if there were various classes that link interactive web or backend in the future. I really enjoyed the great lecture. Thank you!!
I can really feel that you have studied the lectures thoroughly and thoroughly^^ Thank you so much for your detailed and good review! I will continue to make useful classes in the future :)
수강평 8
∙
평균 평점 5.0
5
I have taken a UI-related course at another institution. At the time, I focused more on jQuery than JavaScript, so I thought JavaScript would be difficult, but after taking the course, I was surprised to find out that it was possible to do it with just JavaScript. I was also very satisfied with the fact that the functions and properties of CSS3 were organized more systematically. I also really liked the fact that they reviewed it in the middle of the lecture so that I wouldn't forget it. I was really satisfied. If you release another course, I think I'll take it right away! ㅎㅎ
You really looked into the class! Thank you for the detailed review and kind words😊
수강평 2
∙
평균 평점 5.0
5
This is the best lecture for interaction, not front/backend!! In many schools, they skip js and only teach you how to use jquery, but this lecture explains in detail how pure js works, so I feel like my knowledge of the original technology is gradually accumulating!! The instructor's voice is so good and the examples are fun, so I listened without realizing the time!! After listening to the lecture, I am working without libraries in my field!!
I am glad that you got help! Thank you for your kind words :) If you understand the source technology well, it will be of great help when choosing or utilizing libraries^^
₩55,000