Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Three.js 3D city model & Netlify deployment

How long will you keep learning only to rotate boxes or spheres? You need to see the forest, not just the trees; if you only see the trees, your thinking won't grow. Escape being a complete beginner and experience the power of Three.js, which can be applied in practice and plays a role in the recently gaining attention field of digital twins. This is at a level applicable to work, not just for simple website spinning. Having the capability to create related models (glb, glTF...) in fields like manufacturing, defense, disaster management, and transportation will upgrade your domain expertise by another level. We also develop Node.js (Express) & Nest.js servers for On-Premises use on personal and company servers. Even with slight modifications to this course, you will be reborn as an IT talent along with creating powerful services. Don't be intimidated, challenge yourselves. It's not that difficult.^^

(5.0) 2 reviews

34 learners

  • greghan
코드분석
3D프로젝트
Three.js
JavaScript

What you will learn!

  • Create, save, and open a city using Three.js. Saving is in binary format. (Size: hundreds of Bytes ~ 2KB level, Readability: impossible)

  • Multilingual support (Korean, English, Japanese, etc.) is also developed with vanilla JavaScript and can be used in other web projects. (Complies with web standards)

  • After development, try creating a build using Vite and a CSS compression script with Gulp, which automatically replaces the compressed min.css in the built index.html. Also, when applied to package.json, the build and Netlify deployment are completed all at once.

  • Development complete and built. After Git commit and Netlify publishing, my own site is complete. Automatic deployment is applied when modified or enhanced.

  • Develop my own simple Node server and a trendy Nest server to run the results On-Premises.

  • Finally, we will explain CSS entirely and optimize the code developed so far.

How can we bring 3D-based models to life in the easiest, most scalable way? 🤔

The answer lies in Three.js . Three.js is the technology that implements digital twins, VR, and many other fields, including city models, manufacturing process models, and disaster models .

In this lecture, we will mostly use Three.js. You will create a 3D service, integrate it with Git, and automatically deploy it to Netlify , and have your own site for free. Of course, if you have a domain, just connect it.

For running on personal and corporate servers. We develop two servers: a Node.js server and a Nest.js server .

If you need multilingual service , try to write your own multilingual module by creating it together rather than injecting a heavy library. It can be applied to all web projects (web-standard compliance) . ( Coding in multiple languages from Section 4 )

Rather than spending time just on basic grammar and follow-through examples, learn backwards from the complete thing. Then modify, improve, and apply it to something that interests you.

Don't just let the instructor code, code it yourself, then it becomes yours and you will improve .

Features of this course

📌 This topic, Three.js, provides a class-oriented implementation development that you must learn.

📌 Manage your sources in Git and integrate with Netlify to provide real-time reflection service on your free site.

📌 You can create and apply lightweight multilingual modules yourself and apply them to other web projects.

📌 We provide Express servers based on Node.js and Nest.js for those who need on-premise operation.

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

  • A great portfolio that is not just for studying grammar or following along, but can be applied in practice and will surprise interviewers.

  • Based on Three.js, but offers a Fullstack Semi course for providing real web services

I recommend this to these people

Anyone who only creates objects with Three.js but is curious about what happens after that?

2/3D are both good, but where and how should I use them? Most of the time, I rotate BoxGeometry, so where can I use them?

Three.js beginner / IT employee

How to save/open Three.js?
How do I toJSON() a new THREE.Scene() object? How do I open and display it afterwards? The size is huge (tens to hundreds of M/GB), otherwise I get a Maximum call error 😰

Three.js Developer / IT Representative

Are you curious about the web from beginning to end?
If Three.js is better, and if not, is there a simple full-stack? What is Node.js and what is Nest.js? Is it easy to implement or understand? Is it possible to implement the web only with ThreeJS? Anyone who is curious

Web-front developer / IT assistant

After class

  • You can use Three.js to extend glb, glTF and other Loader-based objects to create your own solutions.

  • Even if you upload your portfolio to Linkedin and other sites because it supports multiple languages, it will be difficult for you.

  • If you just do full-stack log-in/out processing, you will receive many offers including investments beyond your expectations.

  • Plan Three.js for more than just your homepage, submit your portfolio to a digital twin company, and get a job .

  • Be confident and read the manual a little more to get the basics down. Your salary will go up.

Learn about these things.

Build a virtual 3D city model

-. Build roads. (Basics of city planning)

-. We need electricity, so we build a power plant.

-. Build residential, commercial, industrial complexes and infrastructure facilities.

-. If there is a shortage of electricity or roads during construction, they must be increased.

-. Double-clicking will return it to its initial state nicely.

YouTube video

Try out the city models provided

-. We perform simulation construction and expansion/remodeling from the beginning for each provided model.

-. Shows building-specific information (user information).

-. All information except data in multiple languages will be instantly converted to that language.

Save and open model

Save and open the planned model.

-. Save the city model you've carefully planned and created.

- Open, edit and save saved models.

-. The storage capacity is much smaller than Three.js' Scene.toJSON. It is around several hundred bytes ~ 2KB.

YouTube video

It's running fine on Netlify , so now

Run your developments on Node & Nest servers

-.The difference between Node.js and Nest.js is the difference in library support for ease of use.

-. We will try to do things like CORS and Swagger.

-. At the API level, Nest.js is similar to Spring Boot.

Image Extraction

This is the result of extracting the scene as a raster image. The image quality is not good when enlarged/reduced. An export function is provided for cases where necessary.

tipBuilding

Provides tooltip information when selecting an object button on the toolbar and hovering the mouse over a building, etc. (roads, buildings & people, object status, etc.)

Things to note before taking the class

Practice environment (as of 25.05.18)

  1. This explanation is based on Windows (11). Development was tested on both macOS (12) and Windows 11.

  2. Cursor : 0.49.6 (winSurf: 25% cheaper, Vscode: very cheap, cline: Good)

  3. ThreeJS: r176

  4. Node.js : v22. 15 .0 LTS & v22. 15.0 (ncu, ncu -u, npm i ; Anyone who has been trained? 😃 )

  5. Nest.js: v11.1.1 (@nestjs/core)

Learning Materials

  • Provided in the lesson materials and class notes of the section-by-section progress program.

Player Knowledge and Notes

  • Practice environment

    • Operating System and Version (OS)


      -.Front-End : Chrome b

      rowser support OS
      -.Back-End: Node supported OS

  • Tools used: Git and Netlify are both free (there is also a paid version of Netlify)

  • Player Knowledge and Notes

    • Basic JavaScript knowledge is required.

    • Beginner level knowledge of Three.js is required.

    • Questions/Answers are targeted to be answered ASAP or within 3 days, and the Three.js version of the current curriculum will be updated weekly . Any revisions or additional modules that are helpful, but not complete revisions, will be announced after the update.

    • The copyright of lectures and learning materials does not allow copying, reselling at a similar level, or making public on Git Public . In other words, you can change, use, and distribute them by including them in Git Private and your own products .
      ( If you use it in your products, you can sell it, and if you make a lot of sales, you can donate a lot..^^ )

  • Please note that some class videos have uneven sound quality when taking the class.

Recommended for
these people

Who is this course right for?

  • Rather than just doing Three.js and JS basics, those who want to learn, apply, and develop based on source code directly applicable to real-world projects.

  • 3D is applicable to all fields, and an engineer who wants to differentiate in visualization fields such as the recently trending Metabus, Digital Twin, AR, VR, ML, DL, etc.

  • Those feeling typical FE tools make differentiation hard anymore.

Need to know before starting?

  • A foundation in JS, Three.js is beneficial. If you don't have one, it will be challenging, but not impossible. There is also a methodology involving reverse engineering, where you interpret and understand high-quality finished modules by working backward.

Hello
This is

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

기술 스택

-.Mono-Repo (Turbo: "^2.3.4"), FCM(Firebase Cloud Message), WebHook, Redis, MQTT

-. MUI-X, Material-UI 등 Next & React 생태계 UI

-.OCR(Naver), RIMS, Popbill, SNS Login(Google,Naver,Kakao)

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

D3, Three (WebGL), C2i: 청와대 납품 BI 차트, 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, PostgreSQL, 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 행안부 공공 데이터 포상

Curriculum

All

35 lectures ∙ (17hr 32min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • GregHan님의 프로필 이미지
    GregHan

    Reviews 2

    Average Rating 5.0

    5

    44% enrolled

    완전한 제품 수준입니다. 거기에 드래그 앤 드롭의 메모리 누수를 방지하는 JS도 놀라웠고,모델 저장, 오픈에 대한 발상의 전환도 경력이 느껴집니다. 나의 토스트 메시지를 만들 수 있고 모든 웹에 사용 가능한 것은 와우, 조금은 어렵긴 해도 실무용은 확실합니다...

    • 박현민님의 프로필 이미지
      박현민

      Reviews 1

      Average Rating 5.0

      5

      37% enrolled

      • GregHan
        Instructor

        감사합니다 최근 일이 많아서 버젼 개정을 못했습니다만 이번 구정에 맞춰 놓겠습니다

    $152.90

    Similar courses

    Explore other courses in the same field!