Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
BEST
Programming

/

Front-end

Three.js 3D tương tác bắt đầu ngay

Chương trình học được xây dựng để dùng Three.js ngay vào thực tế!

(4.6) 27 đánh giá

401 học viên

  • coding11
Interactive Web
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

  • Three.js

  • Phát triển tương tác 3D

  • TweenMax (GSAP)

Việc phát triển sẽ trở nên thú vị hơn khi bạn vượt ra khỏi 2D và xử lý 3D!
Hãy cùng nhau phát triển nội dung ba chiều với Three.js. 🧩

Three.js rất linh hoạt,
Học trước và chuẩn bị 📖

Tôi đã lập kế hoạch cho chương trình giảng dạy bằng cách sử dụng mã nguồn Three.js mà tôi sử dụng trong công việc của mình .
Chúng tôi sẽ giới thiệu Three.js, một công cụ có nhiều ứng dụng từ dịch vụ đến nội dung và trò chơi.
Chúng tôi cũng cung cấp mã nguồn gốc mà bạn có thể sử dụng ngay trong thực tế.

Tôi sẽ chia sẻ một số hình ảnh ví dụ

Trái Đất và Mặt Trăng quay và chuyển động quanh quỹ đạo trong không gian
Không gian trưng bày với đèn treo và khung ảnh
Mô phỏng giá trị Z 3D
Chuyển động camera mượt mà với thư viện GSAP
Phát triển tương tác hình ảnh ngẫu nhiên 3D
Sao chép trang web ở nước ngoài, cuộn và liên kết 3D
Tạo trang giới thiệu nhân vật 3D
Tạo không gian 3D siêu đơn giản

Đối tượng mục tiêu của khóa học/Mục đích của khóa học 🔑

Một trang được tạo thành 3D
Những người muốn làm điều đó

Trong việc phát triển nội dung ba chiều
Dành cho những ai quan tâm

Three.js đang hoạt động
Bất cứ ai muốn sử dụng nó


Nội dung học tập theo từng phần 📚

Phần 1

  • Chỉ cần làm theo Three.js

Phần 2

  • Cơ bản về tương tác Three.js

Mục 3

  • Các hình dạng cơ bản để điều khiển bàn phím

Mục 4

  • Tạo không gian 3D trong 1 phút

Mục 5

  • Không gian, Trái đất và Mặt trăng

Mục 6

  • Phòng trưng bày nghệ thuật tương tác

Mục 7

  • (Độ sâu) các trang sử dụng giá trị Z

Mục 8

  • Phát triển tương tác sử dụng mô hình 3D


Câu hỏi dự kiến ​​Q&A 💬

H. Những người không chuyên ngành cũng có thể tham gia khóa học này không?

Sẽ dễ hơn nếu bạn có kiến ​​thức cơ bản về Javascript, nhưng vì đây là bài giảng bắt đầu từ những kiến ​​thức cơ bản nên ngay cả những người không chuyên cũng có thể nghe dễ dàng. Ngoài ra, tôi sẽ cung cấp cho bạn tất cả các nguồn JS cho các ví dụ để bạn có thể theo dõi.

H. Học Three.js có lợi ích gì?

Khi xử lý các đối tượng ba chiều, chất lượng dịch vụ và nội dung sẽ thay đổi. Ngay cả khi bạn chỉ sử dụng nó làm hình nền cho một dự án cá nhân hoặc danh mục đầu tư, nó chắc chắn sẽ thu hút sự chú ý của mọi người. Bạn có thể tạo ra trang mà bạn chỉ tưởng tượng.

H. Nó có được sử dụng nhiều trong thực tế không?

Công nghệ này đã được sử dụng rộng rãi trong trò chơi và nội dung, và Three.js ngày càng được sử dụng nhiều hơn trong các dịch vụ. (three.js cũng được sử dụng trên trang ứng dụng thẻ Toss Bank)


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

Tôi đã tạo ra rất nhiều nội dung tương tác và trang web bằng Three.js.
Chúng tôi sử dụng Three.js trong mọi thứ, từ trực quan hóa dữ liệu đến trò chơi.
Video bên dưới là video tôi chia sẻ trải nghiệm sử dụng Three.js tại FECONF.

Giới thiệu về một trò chơi được phát triển bằng three.js

Xem các bài giảng khác

Các kịch bản tương tác được sử dụng trong công việc thực tế

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

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

  • Người sẽ áp dụng Three.js ngay vào thực tế.

  • Quan tâm nhiều đến phát triển nội dung đa chiều

  • Người cần portfolio giống các trang web nước ngoài

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

  • javascript cơ bản

  • css cơ bản

Xin chào
Đây là

3,299

Học viên

218

Đánh giá

210

Trả lời

4.6

Xếp hạng

3

Các khóa học

15년 이상 여러 기업과 언론사에서 front-end 개발 및

데이터 시각화, 인터랙티브 사이트 제작을 했습니다.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!

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

Tất cả

57 bài giảng ∙ (4giờ 33phút)

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

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

27 đánh giá

4.6

27 đánh giá

  • 우디님의 프로필 이미지
    우디

    Đánh giá 2

    ∙

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    7% đã tham gia

    코딩일레븐 강의 정말 잘 만들어졌네요! 예제랑 설명이 잘 설명되어서 직접 해보면서 이해가 쏙쏙 됩니다. Three.js 강의가 많지 않은데, 이렇게 새로운 걸 배울 수 있어서 좋았어요. 다음 강의도 기대됩니다!

    • 코딩일레븐
      Giảng viên

      수강평 감사드립니다! 요즘엔 그래도 three.js 강의나 관련 글이 많아진 것 같아요. 그만큼 관심도 많아진 것 같습니다. 다양하게 활용 가능하니 이번기회에 친해져 보세요. 다음 강의는... 네. 언젠간.

  • THE NALCH님의 프로필 이미지
    THE NALCH

    Đánh giá 3

    ∙

    Đánh giá trung bình 5.0

    5

    77% đã tham gia

    오래기다렸습니다!! 왜 이제서야 오픈하시나요!!

    • 코딩일레븐
      Giảng viên

      으헉 감사합니다 첫 수강평이네요! 늦어도 너무 늦었죠. 죄송하고 기다려주셔서 감사합니다 :)

  • 소나무님의 프로필 이미지
    소나무

    Đánh giá 2

    ∙

    Đánh giá trung bình 5.0

    5

    91% đã tham gia

    신기하고 재미있어서, 구매 후 하루 만에 완강했습니다. 3D 기능 구현을 해야 하는 업무가 있어서, 구글링 하다가 알게 되었어요. 3D 구현 방법이 막막했는데, 강의를 계속 보다 보니 구현 방법을 알게 됩니다. 각각의 강의를 보다 보니 신기하기도 하고, 재미있어서 어제 6시에 결제하고, 지금 시간 새벽 4시까지 봤습니다. 세심한 강의 해 주셔서 감사합니다. ^^

    • 코딩일레븐
      Giảng viên

      three.js 생각보다 어렵지 않죠? ^^ 이 강의가 도움이 된 것 같아서 다행입니다. 수강평 감사드립니다.

  • seol2ya님의 프로필 이미지
    seol2ya

    Đánh giá 17

    ∙

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • KT C님의 프로필 이미지
      KT C

      Đánh giá 13

      ∙

      Đánh giá trung bình 5.0

      5

      77% đã tham gia

      업무에 도움이 많이 됐습니다. 감사합니다.

      2.298.364 ₫

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

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

      인터랙티브 개발 실무 끝장내기 [역량 강화편]

      코딩일레븐

      실무에서 사용하는 인터랙티브 JS, CSS 노하우를 아낌없이 공개합니다.

      초급

      초급

      인터랙티브 웹, JavaScript

      인터랙티브 개발 실무 끝장내기 [역량 강화편]

      코딩일레븐

      몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

      코딩일레븐

      짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다.

      초급

      초급

      인터랙티브 웹, JavaScript

      몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

      코딩일레븐

      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로 1인칭 3D 웹사이트 만들기강의 썸네일

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

      1분코딩

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

      초급

      초급

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

      Three.js로 1인칭 3D 웹사이트 만들기강의 썸네일

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

      1분코딩

      Three.js로 시작하는 3D 인터랙티브 웹강의 썸네일

      Three.js로 시작하는 3D 인터랙티브 웹

      1분코딩

      웹에서 3D를 구현할 수 있는 자바스크립트 라이브러리, three.js의 핵심 개념들을 익히고 응용 예제까지 만들어 보면서 3D 웹 개발에 대한 감을 익혀봅니다.

      초급

      초급

      인터랙티브 웹, Blender, Three.js

      Three.js로 시작하는 3D 인터랙티브 웹강의 썸네일

      Three.js로 시작하는 3D 인터랙티브 웹

      1분코딩

      인터랙티브 웹 개발 제대로 시작하기강의 썸네일

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

      1분코딩

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

      초급

      초급

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

      인터랙티브 웹 개발 제대로 시작하기강의 썸네일

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

      1분코딩

      실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)

      J.영

      HTML5와 CSS3를 활용하여 웹사이트(한화캐미컬/솔루션)를 제작 실습과정으로, PC 모드 레이아웃과 반응형 페이지 제작을 완벽히 이해하고, 활용할 수 있는 실전! 웹페이지 제작 ! Step by Step!의 Basic Course 강좌입니다. (강의 완성 파일 첨부!)

      초급

      초급

      HTML/CSS, 반응형 웹, jQuery

      실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)

      J.영

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

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

      영코디 킴쌤

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

      초급

      초급

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

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

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

      영코디 킴쌤

      실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)

      J.영

      [웹사이트제작 Step By Step] 3단계 강의로, 대방산업 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고있는 화려한 인터렉티브 웹을 그대로 제작 구현해 보는 과정으로 화려한 만큼, 난이도가 있는 강의입니다.

      초급

      초급

      HTML/CSS, 반응형 웹, jQuery

      실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)

      J.영

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

      깡코딩

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

      초급

      초급

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

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

      깡코딩