BEST

Web tương tác 3D bắt đầu với Three.js

Name: Web tương tác 3D bắt đầu với Three.js
Price: 165000 KRW

Cảm nhận về quá trình phát triển web 3D bằng cách tìm hiểu các khái niệm cốt lõi của three.js, một thư viện JavaScript có thể triển khai 3D trên web và tạo các ví dụ ứng dụng.

(5.0) 102 đánh giá

1,837 học viên

studiomeal

Interactive Web

Blender

Three.js

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

Triển khai web 3D bằng thư viện WebGL ba.js
Phát triển web tương tác 3D bằng cách sử dụng JavaScript vanilla

Có thể triển khai trên web với three.js
Hãy cùng tạo ứng dụng web 3D! 🤳

_{Hãy cùng tạo ra trò chơi bước đệm của riêng mình từ một bộ phim truyền hình nổi tiếng.}

_{Tạo chuyển động chân thực với công cụ vật lý.}

_{Hãy tạo hiệu ứng hạt bằng cách sử dụng tọa độ của một điểm.}

_{Hình ảnh 3D phản ứng với thao tác cuộn
Hãy tạo một trang ứng dụng.}

Cập nhật nội dung bổ sung!

Hãy triển khai một chuyển động trong đó nhân vật di chuyển tự do trong không gian 3D.

Bắt đầu với three.js
Web tương tác 3D ✨

Ở Hàn Quốc, chưa có nhiều trang web được xây dựng bằng 3.js, nhưng với sự phát triển gần đây của metaverse, VR và AR, nhu cầu về nội dung 3D đang ngày càng tăng. Tuy nhiên, tôi nhận thấy còn thiếu đáng kể tài liệu dễ tiếp cận cho người mới bắt đầu, đó là lý do tại sao tôi lên kế hoạch cho khóa học này.

Ứng dụng hoạt hình đồ họa máy tính 3D trong trình duyệt web
Thư viện JS được sử dụng để tạo và thể hiện

Xem trước nội dung học tập theo từng phần 📚

Phần 0: Tìm hiểu three.js là gì và cách sử dụng cơ bản. Chúng ta cũng sẽ học cách sử dụng Webpack!

Phần 1 cung cấp tổng quan về các yếu tố cơ bản và giúp bạn tạo nên một cảnh 3D.

Phần 2: Tìm hiểu về các công cụ giúp phát triển three.js dễ dàng hơn.

Phần 3 Tìm hiểu về phép biến đổi, bao gồm phép tịnh tiến, phép chia tỷ lệ và phép quay.

Phần 4 : Tìm hiểu về hình học, mô tả các hình dạng.

Mục 5 Bạn có thể sử dụng nhiều thao tác máy ảnh khác nhau chỉ bằng các nút điều khiển máy ảnh đơn giản.

Phần 6 Tìm hiểu về các vật liệu khác nhau đại diện cho vật chất.

Phần 7 Tìm hiểu về các loại ánh sáng và nguồn sáng khác nhau.

Phần 8 Tìm hiểu cách phát hiện tiếng nhấp chuột.

Hãy cùng tạo ra nhiều ví dụ thực tế bằng cách sử dụng những kiến thức đã học ở Phần 9-13 .

Những người như thế này sẽ thích nó 🙌

Một trang web 3D ấn tượng
Các nhà phát triển/nhà thiết kế muốn sáng tạo

Trên web, chẳng hạn như metaverse/VR
Bất kỳ ai muốn triển khai 3D

Khác biệt so với các nhà phát triển khác
Các nhà phát triển muốn có vũ khí

Hãy cùng nhau viết mã từng bước một 👨‍💻

_{Tạo nhân vật 3D của riêng bạn bằng Blender.}

_{Hãy áp dụng hoạt ảnh vào nhân vật 3D mà chúng ta đã tạo.}

Điều gì làm cho khóa học này trở nên độc đáo?

Bài giảng giúp bạn hiểu và áp dụng nhiều ví dụ khác nhau để tạo ra tác phẩm của riêng mình.
Một khóa học nơi bạn có thể học và xây dựng kỹ năng của mình bằng cách cùng nhau lập trình từng bước.
Khóa học tìm hiểu các khái niệm 3D giúp bạn trở thành nhà phát triển xuất sắc.
Một khóa học không chỉ bao gồm 3D đơn giản mà còn cả phần mềm mô hình hóa như Blender !

🛤 Nhận phiếu giảm giá 30% cho lộ trình lập trình Three.js trong 1 phút.

Bạn có thể nhận được phiếu giảm giá 30% cho "Mua trọn gói" từ Lộ trình Lập trình 1 phút Three.js. (Ngay cả khi bạn đã tham gia một trong hai khóa học, nếu bạn sử dụng phiếu giảm giá lộ trình để đăng ký khóa học mới, mức giảm giá 30% sẽ được áp dụng cho khóa học mới. Nếu bạn quan tâm đến việc tham gia cả hai khóa học, vui lòng đăng ký thông qua lộ trình !)
➡ Đi tới Lộ trình

Tôi sẽ trả lời những câu hỏi mà bạn mong đợi 🙏

H. Đây có phải là khóa học mà ngay cả người mới bắt đầu cũng có thể tham gia không?

Bất kỳ ai có kiến thức cơ bản về JavaScript đều có thể làm được điều này. Mặc dù đây không phải là khóa học JavaScript, tôi sẽ giải thích các khái niệm JavaScript xuất hiện xuyên suốt khóa học, nên bạn sẽ không gặp nhiều khó khăn.

H. Nội dung bài học được trình bày ở mức độ nào?

Để biết thêm thông tin chi tiết, vui lòng tham khảo chương trình học. Trò chơi bước đệm là ví dụ cuối cùng và đầy thử thách nhất. Hãy coi đây như việc học nội dung cần thiết để tạo một ứng dụng web 3D ở cấp độ đó.

H. Với những gì tôi đã học trên lớp, tôi có thể triển khai được trang web 3D mà tôi mong muốn không?

Tùy thuộc vào loại trang web bạn muốn tạo, chương trình giảng dạy sẽ bao gồm nội dung cốt lõi của three.js, do đó, bạn chắc chắn sẽ có thể tạo ra thứ gì đó hoàn toàn khác so với những gì bạn đã làm trước khi học nó.

H. Tôi có thể mong đợi tiến bộ đến mức nào sau khi tham gia khóa học này?

Sau khi hoàn thành khóa học, bạn sẽ có thể phát triển các trang web 3D. 3D là một công nghệ độc đáo, và việc tự mình triển khai nó sẽ giúp bạn nổi bật với tư cách là một lập trình viên trên thị trường việc làm. Khả năng tạo ra các trang web 3D và sở hữu một portfolio như vậy sẽ là một vũ khí lợi hại cho một lập trình viên hoặc nhà thiết kế.

Giới thiệu Người chia sẻ kiến thức ✒️

_{Tôi thấy xấu hổ khi phải nói điều này, nhưng... Tôi là một người hướng dẫn có hơn 800 lượt đánh giá ⭐ với điểm trung bình là 5 sao 😅}

Xin chào! Tôi là 1 Minute Coding , một nhà thiết kế, lập trình viên và người sáng tạo nội dung, hiện đang điều hành Studio Mill tại Jeju. Trang web Studio Mill của tôi cũng được xây dựng bằng three.js!

Khóa học này không chỉ đơn thuần hướng dẫn bạn tạo ra các đối tượng đơn giản. Bằng cách tạo ra các ví dụ thực tế , bạn sẽ có được sự hiểu biết vững chắc về cách sử dụng 3.js hiệu quả. Hơn nữa, chương trình học còn bao gồm hướng dẫn về cách tạo mô hình hình dạng mong muốn bằng Blender, một phần mềm mô hình 3D , cho phép bạn đạt được kết quả mong muốn.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

Bất cứ ai muốn tạo một trang web 3D
Bất kỳ ai muốn tạo một trang web portfolio nổi bật
Những người cần tạo nội dung 3D hoạt động trên web

Cần biết trước khi bắt đầu?

Khái niệm cơ bản về JavaScript

Xin chào
Đây là

19,374

Học viên

1,236

Đánh giá

1,175

Trả lời

5.0

Xếp hạng

Các khóa học

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

개발자/디자이너/콘텐츠크리에이터
웹사이트 https://studiomeal.com
유튜브 https://youtube.com/c/1분코딩
페이스북 https://www.facebook.com/1mincoding

Chương trình giảng dạy

Tất cả

161 bài giảng ∙ (18giờ 39phút)

Tài liệu khóa học:

Tài liệu bài giảng

Phần 1. Bắt đầu three.js

7 bài giảng ∙ (46phút)

Phần 2. Tìm hiểu three.js cơ bản

14 bài giảng ∙ (1giờ 38phút)

8. Tải mã nguồn
9. Tìm hiểu thành phần cảnh cơ bản
06:45
10. Tạo cảnh cơ bản - Renderer
11:06
11. Tạo cảnh cơ bản - Camera
07:40
12. Tạo cảnh cơ bản - Mesh
05:57
13. Máy ảnh trực giao (Orthographic Camera)
07:18
14. Lên cấu trúc code
04:15
15. Xử lý thay đổi kích thước cửa sổ trình duyệt
08:26
16. Thiết lập màu nền, độ trong suốt
05:31
17. Ánh sáng (Chiếu sáng, Light)
04:45
18. Animation cơ bản
08:44
19. Chỉnh hiệu năng diễn hoạt
15:40
20. Sương mù (Fog)
07:11
21. Hoạt hình sử dụng thư viện
05:30

Phần 3. 개발을 편리하게 해주는 도구들

4 bài giảng ∙ (19phút)

22. Tải xuống mã nguồn
23. Chúc mừng, Grid Helper
06:40
24. Kiểm tra số khung hình mỗi giây (FPS)
03:07
25. Điều khiển GUI
09:20

Phần 4. Chuyển đổi

5 bài giảng ∙ (24phút)

Phần 5. Hình học(hình dạng)

6 bài giảng ∙ (45phút)

Phần 6. Điều khiển camera

8 bài giảng ∙ (42phút)

Phần 7. Chất liệu

17 bài giảng ∙ (1giờ 29phút)

Phần 8. Light (Đèn)

8 bài giảng ∙ (43phút)

Phần 9. Raycaster(nhận diện click)

7 bài giảng ∙ (52phút)

Phần 10. Cách tạo mô hình nhân vật 3D và sử dụng trong three.js

22 bài giảng ∙ (2giờ 12phút)

Phần 11. Xử lý công cụ vật lý

14 bài giảng ∙ (2giờ 5phút)

Phần 12. Particle

10 bài giảng ∙ (59phút)

Phần 13. Ví dụ - Trang đích 3D dựa trên cuộn trang

5 bài giảng ∙ (43phút)

Phần 14. Ví dụ - Trò chơi nhảy cầu đá

22 bài giảng ∙ (3giờ 8phút)

Phần 15. Lời kết

1 bài giảng ∙ (3phút)

Phần 16. [Nội dung bổ sung] Sử dụng nhiều Scene đồng thời

6 bài giảng ∙ (1giờ 8phút)

Phần 17. [Nội dung bổ sung] Nhân vật di chuyển trong không gian 3D (Động tác kiểu "Nhật ký quan sát của Chunsik")

5 bài giảng ∙ (38phút)

Ngày đăng:

Cập nhật lần cuối:

Đánh giá

Tất cả

102 đánh giá

5.0

102 đánh giá

이정우
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
95% đã tham gia
안그래도 이미 구독되있는 1분코딩님이 이렇게 따끈따끈하고 질좋은 강의를 올려주셔서 감사합니다. 1분코딩님 덕분에 우리나라 프론트엔드 개발자분들이 three.js을 기본으로 사용하는 날도 머지 않았네요 ㅎㅎ
- 1분코딩
  Giảng viên
  와- 꿈같은 이야기네요! 좋은 말씀 넘 감사합니다 정우님- 공부 화이팅 하시고요😊
육영서
Đánh giá 5
∙
Đánh giá trung bình 5.0
5
99% đã tham gia
Three.js의 기본을 알 수 있는 정말 멋진 강의입니다. 해외의 3D 웹 등에서 어떻게 구현하지? 라고 생각했던 것들의 원리를 정리해서 쉽게 알려주시고, three.js 뿐만 아니라 블렌더 사용 방법과 웹에서 물리가 적용되는 방식, 인터랙션에 대한 간단한 이해까지 더해져서 저에게 이 수업은 1+1 그 이상이었습니다. 간결한 설명들과 멋진 예제들로 좋은 강의를 만들어주신 선생님께 정말 감사합니다!
- 1분코딩
  Giảng viên
  넘 감사합니다 영서님🥲 강의를 출시하고 나면, 첫 수강평이 달리기까지 항상 많이 긴장이 되거든요.. 제딴엔 열심히 만들었지만, 보시는 분들께는 어떨지를 알 수가 없어서.. 힘나는 말씀 감사드리고, 앞으로도 같이 재밌게 공부해요!
김김
Đánh giá 7
∙
Đánh giá trung bình 5.0
5
29% đã tham gia
평소에 배우고 싶었던 분야라서 항상 공부 해야겠다고 생각만 하고 문서를 봐도 어떻게 시작할지 몰라 까마득했는데, 하나하나 세세히 같이 따라할 수 있어서 좋았습니다!
- 1분코딩
  Giảng viên
  공부 화이팅입니다 김김님! 감사합니다^^
임수진
Đánh giá 9
∙
Đánh giá trung bình 4.8
5
100% đã tham gia
좋아요오오오오
- 1분코딩
  Giảng viên
  감사합니다 수진님!
이현우
Đánh giá 4
∙
Đánh giá trung bình 5.0
5
100% đã tham gia
너무 좋은강의 잘들었습니다. !! 덕분에 재밌는거 많이 해볼수 있을거같네요!!
- 1분코딩
  Giảng viên
  감사합니다 현우님! 재밌는거 많이 만들어보시면 공부도 많이 될거예요! ㅎㅎ

3.467.728 ₫

Khóa học khác của studiomeal

Hãy khám phá các khóa học khác của giảng viên!

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

Basic

Web Animations API, JavaScript, HTML/CSS

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

Basic

HTML/CSS, JavaScript, 인터랙티브 웹

인터랙티브 웹 개발 제대로 시작하기

1분코딩

CSS Flex와 Grid 제대로 익히기

1분코딩

현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다.

Basic

HTML/CSS, Flex

CSS Flex와 Grid 제대로 익히기

1분코딩

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

2D 그래픽의 독보적 강자 PixiJS의 기본을 익히고, AI 코드 에디터 Cursor를 이용해 빠르고 효율적으로 개발하는 방법도 배워봅니다.

Beginner

pixijs, cursor, webgl

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

인터랙티브 웹 프로젝트는, CSS와 자바스크립트를 이용해 창의적인 인터랙션이 있는 예제를 하나씩 만들어보는 시리즈입니다.

Intermediate

HTML/CSS, JavaScript, 인터랙티브 웹

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

애플 웹사이트 인터랙션 클론!

1분코딩

애플 웹사이트에 자주 등장하는 고급 인터랙션 효과들을 처음부터 직접 개발하는 방법을 배울 수 있습니다.

Intermediate

인터랙티브 웹, 클론코딩, JavaScript

애플 웹사이트 인터랙션 클론!

1분코딩

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

1분코딩

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

Basic

인터랙티브 웹, Three.js, 3d

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

1분코딩

(English) Build a First-person View 3D Website with Three.js

1분코딩

In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

Basic

Three.js, 인터랙티브 웹, 3d

(English) Build a First-person View 3D Website with Three.js

1분코딩

BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론

1분코딩

SNS에서 인기리에 공유되고 있는 BBC의 "코로나19가 바꿀 사무실의 미래" 인터랙티브 페이지의 핵심 기능을 똑같이 만들어 봅니다.

Basic

인터랙티브 웹, 클론코딩

BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론

1분코딩

SVG 마스터

1분코딩

웹 벡터 그래픽 SVG를 기초부터 제대로 익히고, 재미있고 다양한 예제들을 통해 원하는 방향으로 응용할 수 있는 기술을 습득합니다.

Basic

SVG, HTML/CSS

SVG 마스터

1분코딩

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Three.js 3D 인터랙티브 바로 시작하기

코딩일레븐

실무에서 Three.js를 바로 사용할 수 있도록 커리큘럼을 구성했습니다!

Basic

인터랙티브 웹, Three.js

Three.js 3D 인터랙티브 바로 시작하기

코딩일레븐

모던 웹 인터렉티브 CSS3 [PART3/3]

영코디 킴쌤

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

Beginner

HTML/CSS, 웹 디자인, css3

모던 웹 인터렉티브 CSS3 [PART3/3]

영코디 킴쌤

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

Basic

HTML/CSS, JavaScript, 인터랙티브 웹

인터랙티브 웹 개발 제대로 시작하기

1분코딩

실전! 웹사이트제작! Step by Step! (뮤자인_반응형웹)

J.영

[웹사이트제작 Step By Step] 3단계 강의로, 뮤자인(https://musign.net) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다^^

Basic

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! (뮤자인_반응형웹)

J.영

XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!

LIZ.B

실무에서 하자! 스크롤에 대응하는 반응형 웹 포트폴리오 #제일엔지니어링

Basic

반응형 웹, 인터랙티브 웹, XD

XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!

LIZ.B

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

Basic

HTML/CSS, 반응형 웹, 인터랙티브 웹

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

Basic

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

Web tương tác 3D bắt đầu với Three.js

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

Cập nhật nội dung bổ sung!

Bắt đầu với three.js Web tương tác 3D ✨

Xem trước nội dung học tập theo từng phần 📚

Những người như thế này sẽ thích nó 🙌

Hãy cùng nhau viết mã từng bước một 👨‍💻

🛤 Nhận phiếu giảm giá 30% cho lộ trình lập trình Three.js trong 1 phút.

Giới thiệu Người chia sẻ kiến thức ✒️

Khuyến nghị cho những người này

Xin chàoĐây là .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Chương trình giảng dạy

Đánh giá

Khóa học khác của studiomeal

Khóa học tương tự

Bắt đầu với three.js
Web tương tác 3D ✨

Khuyến nghị cho
những người này

Xin chào
Đây là