개발 · 프로그래밍

/

프론트엔드

Three.js 3D 도시모델 & Netlify 배포

언제까지 박스나 구체 뺑뺑이 도는 것만 배우시나요, 숲을 봐야지 나무만 보면 생각이 크지 않습니다. 완전 초보를 탈출하고 실무에 적용할 수 있으며, 최근 주목받고 있는 디지털-트윈에 한 역할을 담당할 Three.js의 파워를 느껴보세요. 홈페이지 뺑뺑이 용도가 아닌 업무 적용 수준입니다. 제조,국방,재난,운송 분야등 관련 모델(glb, glTF..)의 제작 역량을 보유하면 도메인 전문성이 한 층 업그레이드 됩니다. 개인 및 회사 서버에 On-Premises용 Node.js(Express) & Nest.js 각 서버도 개발합니다 본 강의를 조금만 변형 해도 파워풀한 서비스 제작과 더불어 IT 인재로 거듭날 것입니다. 여러분 쫄지 마시고, 도전하세요 그리 어렵지 않습니다.^^

20명 이 수강하고 있어요.

Three.jsJavaScript
Thumbnail

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

이런 걸
배워요!

  • Three.js를 활용한 도시를 만들고, 저장하고 오픈 합니다. 저장은 바이너리 형식입니다.(용량: 수백 Bytes ~ 2KB 수준, 가독성: 불가)

  • 다국어(한글,영문,일본어...)도 바닐라 자바스크립트로 개발하여 다른 웹 프로젝트에도 사용 가능합니다.(웹 표준 규약을 준수합니다)

  • 개발 후 Vite를 활용한 빌드와 Gulp로 css 압축 스크립트 만들어 보며, 압축된 min.css를 빌드된 index.html에 자동 치환해 줍니다. 또한 package.json에 적용하면 한 방에 빌드와 Netlify 배포까지 완료

  • 개발 완성 및 빌드 후 Git 커밋과 Netlify 퍼블리싱 후 나만의 사이트 완성. 수정 보강시 자동 배포 적용됩니다

  • 결과물을 On-Pemises 실행하기 위한 나만의 간단한 Node 서버와 최신 유행인 Nest 서버를 개발합니다.

  • 최종적으로 CSS도 전체를 설명하고, 그 동안 개발한 코드에 대해 최적화를 해봅니다

3D기반 모델을 어떻게 하면 가장 쉽고, 확장 가능하게 생명력을 만들까?🤔

답은 Three.js에 있습니다. 도시 모델, 제조 공정 모델, 재난 모델 등 Digital-Twin, VR 등 많은 분야에서 구현하기 위한 기술이 바로 Three.js 입니다.

본 강의에서 대부분 Three.js만으로 3D 서비스를 만들고 Git과 연동하여 Netlify에 자동 배포되어 나만의 사이트를 무료로 보유하게 될 것입니다. 물론 도메인이 있으면 연결만 하면 됩니다.

개인 및 회사 서버에서 실행하기 위한 Node.js 서버와 Nest.js 서버 두 개를 개발합니다.

다국어 서비스가 필요하다면 무거운 라이브러리 주입보다 같이 만들어 자신의 다국어 모듈을 써보세요. 모든 웹 프로젝트에 적용(웹-표준 준수) 가능합니다 .(섹션 4부터 다국어로 코딩)

기본 문법과 따라하기 예제로만 시간 보내는 것 보다 완성된 것으로 거꾸로 학습하세요. 그리고 내 관심사의 것으로 수정, 개선하고 적용해 보세요.

강사만 코딩하지 않게 직접 손 코딩하세요, 그래야 내 것이 되고 발전합니다.

이 강의의 특징

📌 본 주제인 Three.js는 반드시 배워야 하는 클래스 중심의 구현 개발을 제공합니다

📌 Git에 소스를 관리하고, Netlify와 연동하여 무료 사이트에 실시간 반영 서비스 가능합니다.

📌 너무 가벼운 다국어 모듈을 직접 만들어 적용하고, 다른 웹-프로젝트에 적용 가능합니다.

📌 On-Premises 운영이 필요한 분을 위한 Node.js와 Nest.js 기반 Express 서버를 제공합니다.

💡Three.js + i18n(Internationalization) + Node.js & Nest.js Server & Git/Netlify.

  • 문법 공부,따라하기 용도가 아니고, 실무 적용 가능하며, 면접 심사 위원도 놀랄 멋진 포트폴리오

  • Three.js를 기반으로 하지만, 실제 웹-서비스가 제공되기 위한 Fullstack Semi 과정 제공

이런 분들께 추천해요

Three.js로 객체만 만드는데 그 이후가 궁금하신 분?

2/3D 모두 다 좋은데 이걸 어디에 어떻게 써야 하는지요. 매번 BoxGeometry 회전하는 게 대부분 인데, 어디에 활용하지요?

Three.js 입문자 / IT 사원

Three.js 저장/오픈 방법은 ?
new THREE.Scene() 객체를 toJSON()하면 되나? 이후에 어떻게 오픈하고 보여주지? 용량은 엄청나고(수십~백 M/GB), 아니면 Maximum call 오류 😰

Three.js 개발자 / IT 대리

웹의 처음부터 끝까지 궁금해?
Three.js면 더 좋고 아니어도, 간단한 풀-스택 없나? Node.js는 뭐고, Nest.js는 뭐야? 간단하게 구현하거나 알 수 없을까? ThreeJS로만 웹 구현이 되나? 궁금해 하시는 분

웹-프론트 개발자 / 전산실 대리

수강 후에는

  • Three.js를 활용해서 glb,glTF 및 제반 Loader 기반 객체를 확대하여 나만의 솔루션을 만들 수 있어요

  • 다국어를 지원해서 Linkedin등에 포트폴리오를 올려도 어깨에 힘들어 갑니다

  • 풀-스택으로 로그인/아웃 처리만 하면, 기대 이상의 투자 포함한 많은 제안을 받을 수 있을 겁니다

  • Three.js를 홈페이지 용도 이상으로 기획하시고, 디지털-트윈 업체에 포트포리오를 제출,이직 하세요

  • 자신감을 가지시고 매뉴얼을 조금만 더 봐서 기초를 챙기세요. 여러분의 연봉은 상승 할 것입니다.

이런 내용을 배워요.

가상의 3D 도시 모델 구축을 해보세요

-.도로를 건설 합니다.(도시 계획의 기본)

-.전기가 필요하니 발전소를 건설 합니다

-.주거,상가,산업단지 및 인프라 시설을 짓습니다

-.건설 중 전기나 도로가 부족하면 증설해야 합니다

-.더블-클릭시 초기 상태로 멋지게 돌아갑니다

유투브 영상

제공되는 도시 모델을 기반으로 해보세요

-.제공 모델별로 처음부터 시뮬레이션 신축 및 증.개축을 합니다.

-.건물별 정보(사용자 정보)를 보여 줍니다.

-.다국어로 데이터를 제외한 모든 정보가 즉시 해당 언어로 정보가 바뀝니다.

모델 저장 및 오픈

기획한 모델을 저장하고 오픈 해보세요

-.열심히 기획하여 만든 도시 모델을 저장합니다

-.저장된 모델을 열고 수정 및 저장합니다

-.저장 용량이 Three.js의 Scene.toJSON 보다 너무 작습니다. 수백 Byte ~ 2KB 내외입니다

유투브 영상

Netlify에서 실행이 잘 되지요, 그럼 이제

Node & Nest 서버에서 개발 작품을 실행해 보세요

-.Node.js와 Nest.js 차이는 사용하기 쉬운 Library 지원 차이입니다.

-.CORS, Swagger 정도까지 같이 해봅니다.

-.API 수준의 Nest.js는 스프링 부트와 유사합니다

이미지 추출

Scene을 래스터 이미지 (Raster image)로 추출한 결과 입니다. 이미지는 확대/축소할 경우 화질이 좋지 않습니다. 필요한 경우를 위해 익스포트 기능 제공

tipBuilding

툴바에서 객체 버튼 선택 후 빌딩 등 마우스 오버시 툴팁 정보 제공.(도로, 건물 & 인원, 객체 상태 등)

수강 전 참고 사항

실습 환경 (24.10.19 기준: 매주 최신 버전 개정 Sync 후 공지 됩니다)

  • Windows (11) 기준으로 설명 합니다. 개발은 macOS(12), window11 모두 테스트 하였습니다.

  • vscode : v1.94.2

  • ThreeJS: r169

  • Node.js : v20.18.0 LTS & v22.8.0 (ncu, ncu -u, npm i ; 교육 받으신 분들은 ? 😃)

  • Nest.js : v10.4.5 (@nestjs/common)

학습 자료

  • 섹션별 진행 프로그램의 수업 자료 및 수업 노트에서 제공합니다.

선수 지식 및 유의 사항

  • 실습 환경

    • 운영 체제 및 버전(OS)


      -.Front-End : Chrome b

      rowser 지원 OS
      -.Back-End : Node 지원 OS

  • 사용 도구: Git, Netlify 모두 무료 입니다.(Netlify 유료도 있습니다)

  • 선수 지식 및 유의 사항

    • 자바스크립트 기본은 필요합니다.

    • Three.js 입문 수준은 필요합니다.

    • 질문/답변은 ASAP이나 3일 이내를 목표로 하며, 현재 커리큘럼의 Three.js 버전을 매주 최신으로 맞춰 드릴 겁니다. 완전한 개정이 아닌 도움이 될 개정 및 추가 모듈은 업데이트 후 공지 될 것입니다.

    • 강의 및 학습 자료 저작권은 복제, 유사 수준의 재 판매 및 Git Public 공개는 불허 합니다. 즉 Git Private 및 여러분들의 제품에 넣어서 변경, 활용, 배포 등은 모두 가능합니다.
      (여러분 제품에 사용한 경우 판매 가능하고, 매출이 많으면 기부도 많이 하세요..^^)

  • 일부 수업 영상은 음질이 균일하지 않은 점, 수강 시 참고 부탁드립니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Three.js 및 JS 기초만 하는 것 보다, 실무에 바로 적용 가능한 소스를 기반으로 학습하고 적용 발전하고 싶으신 분

  • 3D는 모든 분야에 적용 가능하며, 최근 유행중인 Metabus, Digital Twin, AR, VR, ML, DL 등의 시각화 분야로 차별화를 원하는 엔지니어

  • 일반적인 FE(Front-End)툴 만으로는 더 이상 차별화가 어렵다고 느끼시는 분

선수 지식,
필요할까요?

  • JS, Three.js 기초가 있으면 좋아요. 없다면 고생스럽지만 불가능하지 않습니다. 리버스 엔지니어링 패턴인 역공학 방식으로 이미 수준있는 완성 모듈을 역으로 해석 및 이해하는 방법론도 있습니다.

안녕하세요
GregHan입니다.

오랜 시간 동안 기술 변화에 맞추면서 보낸 시간이 많아, 이제 보유한 기술과 경험을 초,중급분들께 미약하지만 제 기술을 제공해서 빠르게 성장하는데 함께하고 싶습니다.

기술 스택

-.Js, Vue/Nuxt (VueX, Pinia), AngularJS, React/Next (Redux,Zustand,Recoil), Svelt,

D3, Three (WebGL), Chart, echarts, Vuetify, Quasar, Telerick(Progress)

IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...

-.Leaflet.js, Cesium.js, 다음 & 네이버 지도

-.WebRTC & WebSocket, MQTT, Silverlight(C#) & ASP.Net

-.Node, Nest, Spring Boot, Docker, Git, pm2

-.AWS, Azure, nCloud(Naver)

-.Oracle, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase

-.Python, Numpy/Scipy, Jupyter, Django(DRF: Django Rest Framework)/Flask,

-.TensorFlow, Keras, ScikitRun, LangChain

솔루션

-.씨티-와우(City-Wow): 국토,국방,공공 및 병원,제조기업 등 3D 시뮬레이션 및

실시간 모니터링 서비스 ('23.10 ~ 현재; Three, Vanila.js)

-.씨유(SeeU): 업종별 화상 채팅 서비스(병원, 제조..)(구글-밋 + 크로마키, STT & TTS Chatting)

('23.02 ~ 23.10; WebRTC, WebSocket, Vue3 & Pinia, Quasar, Node, MySQL)
-.서베이-와우(Survey-Wow): 구글-폼, MS-폼 , 네이버-폼 설문 결과를 간단하게 분석하고

공유하는 데이터 분석 웹 서비스 ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)

-.데이터-와우(Data-Wow): xls, json,csv , API 연동 등 공공 데이터 자동 분석 시각화

('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - 행안부 공공데이터 포상
-.DDMV(Data-Dam Multi-Dimensional Vis-): 데이터-댐 다차원 탐색적 시각화 분석서비스

('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - 인천시 공공데이터 포상
-.씨투아이(C2i: Chart Inteiiligence Insights) 차트 컴포넌트: 차트 갤러리 메뉴

BI 기반 차트 (with D3.js): '15.04 ~ 현재 ; D3.js(v3.3 ~ v7.9) 기반의 BI 패턴의 차트 솔루션

(문재인 정부 일 자리 대시보드 청와대 납품, 몽골 재정관리 국책 프로젝트 남품. 다국어 지원)

 

Data Mart & Warehouse, ROLAP, BI, 시각화, 클라우드 인프라 등 다양한 기술 스택과

업무 분석, Oracle(v6.3 ~ ) 모델링 & 튜닝 분야에 대한 전문 정보 및 경험 보유.

 

-.(주)캐주얼-인사이트 (Casual-Insights) CTO

-.전 KISTI 연구원

-.전 LG-CNS Oracle Modeler, DBA & 선임 연구원

-.전 극동(현대) 정유 전산실 사원

**. 데이터 댐 다차원 시각화-.종합 소개(필수) : https://youtu.be/noZ9H7wftsI

-.소비상권-I(필수 : 백화점 매장 포스 데이터 - 일반 제조 유통업체) : https://youtu.be/ArL-Pv3U-40 -.소비/상권-II (한국 KDX, 식신 데이터 제공): https://youtu.be/Wcpu29gI53Y

-.보건의료 (한국 KDX, 온누리H&C 데이터 제공): https://youtu.be/I8WBqAFp9L4-

.공공 데이터 (경기 화성 시청 공공 데이터 제공) : https://youtu.be/2QCw_6aeRVE

*.D3 & ThreeJS 차트 갤러리 :https://gregory-han.github.io/chart/

*.포상이력

1999.08 한겨레신문 & UTC 벤처21 본상 수상.(상금 5천만원)
2000.10 ㈜소프트다임 대통령상 수상 (PowerSi OLAP)
2002.11 한국 e-비즈니스대상 산업자원부 장관상 수상
2020.08 인천시 공공 데이터 포상
2022.12 행안부 공공 데이터 포상

커리큘럼

전체

35개 ∙ (17시간 32분)

수업 자료

가 제공되는 강의입니다.

  • 프로젝트 폴더 구성

    02:40

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!