Thumbnail
개발 · 프로그래밍 프론트엔드

떠먹는 Three.js 대시보드

(4.7)
7개의 수강평 ∙  281명의 수강생

22,000원

지식공유자: 제주코딩베이스캠프
총 26개 수업 (1시간 37분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

Three.js의 기초적인 개념을 학습하고, 이를 응용하여 '나만의 섬 만들기' 미니 프로젝트를 진행합니다. 프로젝트를 진행하면서 쉽고 가볍게 Three.js를 익힐 수 있습니다.

✍️
이런 걸
배워요!
Three.js 기초
3D 인터랙티브 웹 개발

 웹 페이지에 나만의 3D 섬 만들기 🏝️
Three.js로 시작하는 인터랙티브 웹! 

Q&A를 확인해보세요! ✍️

Q. HTML / CSS / JavaScript 를 몰라도 수강할 수 있나요? 

A. Three.js는 웹 브라우저에서 동작하기 때문에 HTML/CSS/JavaScript에 대한 기초 지식을 가지고 계셔야 수업을 이해하시는데 무리가 없습니다. 처음 프로그래밍을 접하시는 경우 30분 요약강좌 시즌1 을 우선 수강하시는 것을 추천드립니다.

Q. Windows / MacOS 상관없이 수강할 수 있나요? 

A. 네, 가능합니다. 수업은 Visual Studio Code와 브라우저(크롬) 환경에서 진행됩니다.

Three.js? 🌐  

  • JavaScript를 이용하여 웹상에 3D 그래픽을 구현할 수 있는 라이브러리입니다.
  • 3차원의 인터랙티브한 웹을 구현하여 매력적인 웹 사이트를 만들 수 있습니다.

이런 분들께 추천합니다 🙆‍♀️

Three.js를 배워보고 싶으신 분

3D 인터랙티브 웹 구현에 관심있는 개발자

눈에 띄는 포트폴리오를 제작하고 싶은 취준생


강의 특징 📖 

  1. 누구나 쉽게 수강할 수 있도록 Three.js의 기초 개념에 대해 다룹니다.
  2. 단계별 실습을 통해 재밌게 Three.js를 익힐 수 있습니다.
  3. 제공되는 학습 자료로 정리된 내용을 확인할 수 있습니다.

학습 내용 📚

섹션 0. Three.js 시작하기

  • 강의 소개
  • 설치 및 경로 설정
  • WebGL 호환성 확인

섹션 1. Three.js 장면 기초

  • 기본 구성 요소 (Scene, Camera, Renderer)
  • 화면 출력 (애니메이션, 반응형)

섹션 2. 3D 객체

  • Geometry, Material, Mesh
  • 손쉬운 조작 OrbitControls
  • [실습] 과일과 나무를 만들어봐요!
  • Group
  • 오브젝트 파일 분리하기

섹션 3. Three.js 장면 심화

  • 빛, 그림자, 텍스쳐
  • 여러 개의 재질 적용하기
  • [실습] 더 실감나는 과일과 나무 만들기

섹션 4. 외부 모델

  • 외부 모델 불러오기

섹션 5. 파이널 프로젝트

  • [실습] 나만의 섬 만들기

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
Three.js 기초를 가볍게 배워보고 싶으신 분
3D 인터랙티브 웹 개발에 관심이 있는 개발자
📚
선수 지식,
필요할까요?
HTML/CSS
JavaScript

안녕하세요
제주코딩베이스캠프 입니다.
제주코딩베이스캠프의 썸네일

🧙‍♂ 안녕하세요. 제주코딩베이스캠프입니다.

제주코딩베이스캠프란?

 

image

제주에서 가장 핫한 개발자들이 모여 작당한 부트캠프! 열정있는 청년들에게 열정만큼 성장할 수 있는 기회를 제공합니다!

제주코딩베이스캠프는 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학융합원 등 기업 지자체와 함께 진행하고 있습니다.


서비스 구축 성공
경험을 통해 이 취업난 시대에 자신감, 자존감, 성취감, 그리고 자립할 수 있는 능력을 배양해 보세요!

으라차차 청춘 화이팅입니다! 😀

 


 

︎ 제주코딩베이스캠프 로드맵

image

︎ 제주코딩베이스캠프 수료증 제도

image

공동 지식공유자: 백경현의 썸네일 이혜영의 썸네일 Hojun Lee의 썸네일
커리큘럼 총 26 개 ˙ 1시간 37분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Three.js 시작하기
강의 소개 미리보기 01:12
학습 자료
실습 예제 코드
설치 및 경로 설정 미리보기 06:22
WebGL 호환성 확인 01:55
섹션 1. Three.js 장면 기초
기본 구성 요소 (Scene, Camera, Renderer) 12:05
화면 출력 (애니메이션, 반응형) 03:31
섹션 2. 3D 객체
Geometry 06:31
Material 06:20
Mesh 04:01
손쉬운 조작 OrbitControls 04:12
[실습] 과일과 나무를 만들어봐요! 11:37
Group 02:22
오브젝트 파일 분리하기 02:52
섹션 3. Three.js 장면 심화
05:42
그림자 02:48
텍스쳐 05:18
여러개의 재질 적용하기 01:16
[실습] 과일과 나무에 생명 불어넣기 06:57
[실습 | 코드제공] 나만의 캐릭터 만들기
섹션 4. 외부 모델
외부 모델 불러오기 02:26
섹션 5. 파이널 프로젝트
[실습] 나만의 섬 만들기 10:27
강의 게시일 : 2023년 06월 14일 (마지막 업데이트일 : 2023년 08월 17일)
수강평 총 7개
수강생분들이 직접 작성하신 수강평입니다.
4.7
7개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Hyungjin Kim thumbnail
5
Three.js 기본을 학습하기에 좋았습니다! 👍
2023-06-24
oh thumbnail
5
재미있고 귀엽고 유익하고 난리났어요 감사합니다
2023-06-26
mooongs thumbnail
4
Three.js 입문 수업으로 좋은 것 같습니다
2023-10-31
장다혜 thumbnail
5
노션으로 강의의 개념과 중요 코드가 정리되어 있는 점이 가장 좋았습니다. 덕분에 강의를 따라가는게 수월했고, 코드치기도 편했어요. 기본 원리를 제대로 익히는게 중요하다고 생각하는데, 이 부분에서 잘 알려주셔서 응용하기 쉬운 강의였습니다.
2023-11-30
테이 thumbnail
5
작업물이 너무 귀여워서 시간 가는 줄 모르고 순식간에 다 수강했어요! Three js를 해보고 싶었는데 이 강의 덕분에 시작할 수 있었어요! 좋은 강의 감사합니다!
2024-03-31