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

/

Front-end

Three.js mô hình thành phố 3D & triển khai Netlify

Bạn sẽ học cách làm hộp hoặc khối cầu xoay tròn đến bao giờ? Phải nhìn cả khu rừng chứ nếu chỉ nhìn cây thì tư duy sẽ không phát triển lớn được. Hãy thoát khỏi trình độ sơ cấp hoàn toàn và có thể áp dụng vào thực tế, cảm nhận sức mạnh của Three.js, công cụ có thể đóng vai trò trong Digital Twin đang được chú ý gần đây. Đây là cấp độ ứng dụng vào công việc chứ không chỉ dùng để quay vòng trên website. Nếu bạn sở hữu năng lực chế tạo các mô hình liên quan (glb, glTF...) trong các lĩnh vực sản xuất, quốc phòng, thiên tai, vận tải..., chuyên môn trong lĩnh vực của bạn sẽ được nâng cấp thêm một bậc. Chúng tôi cũng phát triển các server Node.js (Express) & Nest.js riêng biệt cho mục đích On-Premises trên server cá nhân và công ty. Chỉ cần thay đổi một chút từ khóa học này, bạn sẽ có thể tạo ra những dịch vụ mạnh mẽ và trở thành một nhân tài IT. Các bạn đừng sợ, hãy thử thách bản thân, nó không khó đến vậy đâu.^^

(5.0) 2 đánh giá

35 học viên

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

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

  • Tạo, lưu và mở một thành phố sử dụng Three.js. Việc lưu trữ ở định dạng nhị phân. (Dung lượng: mức vài trăm Bytes ~ 2KB, Khả năng đọc: không thể)

  • 다국어(tiếng Hàn, tiếng Anh, tiếng Nhật...) cũng được phát triển bằng vanilla JavaScript nên có thể sử dụng được trong các dự án web khác. (tuân thủ các tiêu chuẩn web)

  • Sau khi phát triển, thử nghiệm build bằng Vite và tạo script nén css với Gulp, đồng thời tự động thay thế file min.css đã nén vào file index.html đã build. Ngoài ra, khi áp dụng vào package.json, chỉ một lệnh là hoàn tất build và deploy lên Netlify.

  • Sau khi hoàn thành phát triển và build, commit lên Git và publish lên Netlify, trang web của riêng tôi đã hoàn thành. Khi sửa đổi hoặc bổ sung, việc tự động triển khai sẽ được áp dụng.

  • Phát triển máy chủ Node đơn giản của riêng tôi và máy chủ Nest đang thịnh hành nhất hiện nay để chạy kết quả On-Pemises.

  • Cuối cùng, sẽ giải thích toàn bộ về CSS và tối ưu code đã phát triển trong thời gian qua.

Làm thế nào chúng ta có thể hiện thực hóa các mô hình 3D theo cách dễ dàng và có khả năng mở rộng nhất có thể? 🤔

Câu trả lời nằm ở Three.js . Three.js là công nghệ triển khai bản sao kỹ thuật số, VR và nhiều lĩnh vực khác, bao gồm mô hình thành phố, mô hình quy trình sản xuất và mô hình thảm họa .

Trong bài giảng này, chúng ta sẽ chủ yếu sử dụng Three.js. Bạn sẽ tạo một dịch vụ 3D, tích hợp nó với Git, tự động triển khai nó lên Netlify và có trang web riêng miễn phí. Tất nhiên, nếu bạn có tên miền, bạn có thể kết nối nó.

Để chạy trên máy chủ cá nhân và doanh nghiệp. Chúng tôi phát triển hai máy chủ: máy chủ Node.js và máy chủ Nest.js.

Nếu bạn cần dịch vụ đa ngôn ngữ, hãy thử viết mô-đun đa ngôn ngữ của riêng bạn thay vì đưa vào một thư viện nặng . Áp dụng cho tất cả các dự án web (tuân thủ tiêu chuẩn web) . ( Mã hóa nhiều ngôn ngữ từ Mục 4 )

Thay vì dành thời gian chỉ để học ngữ pháp cơ bản và các ví dụ thực tế, hãy học ngược lại từ toàn bộ văn bản. Và sau đó cố gắng sửa đổi, cải thiện và áp dụng vào những gì bạn quan tâm.

Đừng chỉ để người hướng dẫn viết mã, hãy tự mình viết mã, khi đó nó sẽ là của bạn và bạn sẽ tiến bộ .

Các tính năng của khóa học này

📌 Chủ đề này, Three.js, cung cấp phương pháp phát triển triển khai theo hướng lớp mà bạn phải học.

📌 Quản lý nguồn của bạn trong Git và tích hợp với Netlify để cung cấp dịch vụ phản ánh thời gian thực trên trang web miễn phí của bạn.

📌 Bạn có thể tự tạo và áp dụng các mô-đun đa ngôn ngữ nhẹ và áp dụng chúng vào các dự án web khác.

📌 Chúng tôi cung cấp máy chủ Express dựa trên Node.js và Nest.js cho những ai cần vận hành tại chỗ.

💡 Three.js + i18n (Quốc tế hóa) + Node.js & Nest.js Server & Git/Netlify.

  • Một danh mục đầu tư tuyệt vời không chỉ để học ngữ pháp hoặc theo dõi mà còn có thể áp dụng vào thực tế và sẽ gây bất ngờ cho người phỏng vấn.

  • Dựa trên Three.js, nhưng cung cấp khóa học Fullstack Semi để cung cấp các dịch vụ web thực tế

Tôi giới thiệu điều này cho những người này

Có ai chỉ tạo đối tượng bằng Three.js nhưng tò mò về những gì xảy ra sau đó không?

2/3D đều tốt, nhưng tôi nên sử dụng chúng ở đâu và như thế nào? Hầu hết thời gian, BoxGeometry đều được xoay, nhưng tôi có thể sử dụng nó ở đâu?

Người mới bắt đầu sử dụng Three.js / Nhân viên CNTT

Làm thế nào để lưu/mở Three.js?
Tôi có thể chỉ cần toJSON() tạo một đối tượng THREE.Scene() mới không? Làm sao để tôi có thể mở và hiển thị nó sau? Dung lượng rất lớn (hàng chục đến hàng trăm M/GB), nếu không thì đây là lỗi cuộc gọi tối đa 😰

Nhà phát triển Three.js / Đại diện CNTT

Bạn có tò mò về web từ đầu đến cuối không?
Three.js có lẽ tốt hơn, nhưng nếu không thì có một full-stack đơn giản nào không? Node.js là gì và Nest.js là gì? Có dễ thực hiện hay khó hiểu? Có phải việc triển khai web chỉ có thể thực hiện được bằng ThreeJS không? Dành cho những ai tò mò

Nhà phát triển web-front / Trợ lý CNTT

Sau giờ học

  • Bạn có thể sử dụng Three.js để mở rộng glb, glTF và các đối tượng dựa trên Loader khác để tạo ra giải pháp của riêng bạn.

  • Ngay cả khi bạn tải danh mục đầu tư của mình lên Linkedin và các trang web khác vì nó hỗ trợ nhiều ngôn ngữ, thì bạn vẫn sẽ gặp khó khăn.

  • Nếu bạn chỉ thực hiện xử lý đăng nhập/đăng xuất đầy đủ, bạn sẽ nhận được nhiều ưu đãi bao gồm cả khoản đầu tư vượt quá mong đợi của bạn.

  • Hãy lập kế hoạch cho Three.js không chỉ dành cho trang chủ của bạn, gửi hồ sơ năng lực của bạn tới một công ty kỹ thuật số và nhận việc .

  • Hãy tự tin và đọc hướng dẫn thêm một chút để nắm được những điều cơ bản. Lương của bạn sẽ tăng.

Tìm hiểu về những điều này.

Xây dựng mô hình thành phố ảo 3D

-. Xây dựng đường sá. (Cơ sở của quy hoạch đô thị)

-. Chúng ta cần điện nên chúng ta phải xây dựng nhà máy điện.

-. Xây dựng các khu dân cư, thương mại, công nghiệp và cơ sở hạ tầng.

-. Nếu thiếu điện hoặc đường trong quá trình thi công thì phải tăng thêm.

-. Nhấp đúp sẽ đưa nó trở về trạng thái ban đầu một cách hoàn hảo.

Video trên YouTube

Hãy thử các mô hình thành phố được cung cấp

-. Chúng tôi thực hiện xây dựng mô phỏng và mở rộng/cải tạo ngay từ đầu cho mỗi mô hình được cung cấp.

-. Hiển thị thông tin cụ thể về tòa nhà (thông tin người dùng).

-. Mọi thông tin ngoại trừ dữ liệu bằng nhiều ngôn ngữ sẽ được chuyển đổi ngay lập tức sang ngôn ngữ đó.

Lưu và mở mô hình

Lưu và mở mô hình đã lập kế hoạch.

-. Lưu mô hình thành phố mà bạn đã cẩn thận lên kế hoạch và tạo ra.

- Mở, chỉnh sửa và lưu các mô hình đã lưu.

-. Dung lượng lưu trữ quá nhỏ so với Scene.toJSON của Three.js. Khoảng vài trăm byte ~ 2KB.

Video trên YouTube

Nó đang chạy tốt trên Netlify , vì vậy bây giờ

Chạy các phát triển của bạn trên máy chủ Node & Nest

-.Sự khác biệt giữa Node.js và Nest.js là sự khác biệt về hỗ trợ thư viện để dễ sử dụng.

-. Chúng tôi sẽ cố gắng thực hiện những việc giống như CORS và Swagger.

-. Ở cấp độ API, Nest.js tương tự như Spring Boot.

Trích xuất hình ảnh

Đây là kết quả của việc trích xuất cảnh dưới dạng hình ảnh raster. Chất lượng hình ảnh kém khi phóng to hoặc thu nhỏ. Cung cấp chức năng xuất khẩu nếu cần

mẹoXây dựng

Cung cấp thông tin chú giải công cụ khi chọn nút đối tượng trên thanh công cụ và di chuột qua tòa nhà, v.v. (đường, tòa nhà & người, trạng thái đối tượng, v.v.)

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành (tính đến ngày 25.05.18)

  1. Giải thích này dựa trên Windows (11). Quá trình phát triển đã được thử nghiệm trên cả macOS (12) và Windows 11.

  2. Con trỏ: 0.49.6 (winSurf: rẻ hơn 25%, Vscode: rất rẻ, cline: Tốt)

  3. ThreeJS: r176

  4. Node.js: v22. 15.0 LTS & v22.15.0 (ncu, ncu -u, npm i ; Có ai đã được đào tạo chưa? 😃 )

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

Tài liệu học tập

  • Được cung cấp trong tài liệu bài học và ghi chú lớp học của chương trình tiến độ theo từng phần.

Kiến thức và ghi chú của người chơi

  • Môi trường thực hành

    • Hệ điều hành và Phiên bản (OS)


      -.Mặt trước: Chrome b

      Rowser hỗ trợ hệ điều hành
      -.Back-End: Hệ điều hành được Node hỗ trợ

  • Công cụ được sử dụng: Git và Netlify đều miễn phí (cũng có phiên bản trả phí của Netlify)

  • Kiến thức và ghi chú của người chơi

    • Cần có kiến ​​thức cơ bản về JavaScript.

    • Yêu cầu có kiến ​​thức cơ bản về Three.js.

    • Chúng tôi đặt mục tiêu trả lời các câu hỏi/câu trả lời sớm nhất có thể hoặc trong vòng 3 ngày và chúng tôi sẽ cập nhật phiên bản Three.js của chương trình giảng dạy hiện tại hàng tuần . Bất kỳ bản sửa đổi hoặc mô-đun bổ sung nào có thể hữu ích nhưng không phải là bản sửa đổi hoàn chỉnh sẽ được thông báo sau khi cập nhật.

    • Bản quyền của các bài giảng và tài liệu học tập nghiêm cấm việc sao chép, bán lại ở mức độ tương tự và tiết lộ cho Git Public . Nói cách khác, bạn có thể thay đổi, sử dụng và phân phối nó bằng cách đưa nó vào Git Private và các sản phẩm của bạn .
      ( Nếu bạn sử dụng nó trong sản phẩm của mình, bạn có thể bán nó, và nếu bạn bán được nhiều, bạn có thể quyên góp được nhiều..^^ )

  • Xin lưu ý rằng một số video lớp học có chất lượng âm thanh không đồng đều khi tham gia lớp học.

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

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

  • Thay vì chỉ học nền tảng Three.js và JS, người muốn học, áp dụng và phát triển dựa trên mã nguồn ứng dụng thực tế.

  • 3D có thể áp dụng cho mọi lĩnh vực, và kỹ sư muốn tạo sự khác biệt trong các lĩnh vực trực quan hóa đang thịnh hành gần đây như Metabus, Digital Twin, AR, VR, ML, DL

  • Những người cảm thấy khó tạo ra sự khác biệt nữa chỉ bằng các công cụ FE (Front-End) thông thường

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

  • Nên có nền tảng JS, Three.js. Nếu không có sẽ vất vả, nhưng không bất khả thi. Cũng có phương pháp là phân tích và hiểu ngược các module hoàn chỉnh sẵn có theo kỹ thuật đảo ngược (reverse engineering pattern).

Xin chào
Đây là

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

기술 스택

-.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 행안부 공공 데이터 포상

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

Tất cả

35 bài giảng ∙ (17giờ 32phú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ả

2 đánh giá

5.0

2 đánh giá

  • greghan님의 프로필 이미지
    greghan

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    44% đã tham gia

    Mức độ sản phẩm đầy đủ. Ngoài ra, JS ngăn chặn rò rỉ bộ nhớ do kéo và thả thật đáng kinh ngạc và sự thay đổi trong suy nghĩ về việc lưu và mở các mô hình cũng là một trải nghiệm. Ồ, có thể tạo tin nhắn chúc mừng của riêng tôi và sử dụng nó ở bất kỳ đâu trên web hơi khó khăn nhưng chắc chắn là thiết thực...

    • outflearn님의 프로필 이미지
      outflearn

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      37% đã tham gia

      • greghan
        Giảng viên

        Cảm ơn bạn, dạo này mình bận quá nên chưa edit lại được. Tôi sẽ đặt nó phù hợp với Tết Nguyên đán này

    4.148.995 ₫

    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!