いつまで箱や球体を回転させることばかり学んでいるのですか。森を見ず木ばかり見ても、思考は広がりません。 完全な初心者から脱出し、実務に応用可能で、最近注目されているデジタルツインの一端を担うThree.jsのパワーを体感してください。ホームページでくるくる回す用途ではなく、業務に適用できるレベルです。 製造、国防、災害、輸送分野など、関連モデル（glb, glTFなど）の制作能力を身につければ、ドメイン専門性が一層アップグレードされます。 個人および会社サーバー向けのOn-Premises用Node.js(Express) および Nest.js 各サーバーも開発します。 本講座を少し変形するだけで、パワフルなサービス制作と合わせて、IT人材として生まれ変わることができるでしょう。皆さん、ひるまずに挑戦してください。そんなに難しくありません。^^
Three.jsを活用して都市を作成、保存、開きます。保存はバイナリ形式です。(容量: 数百Bytes～2KB程度、可読性: なし)
多言語(ハングル、英文、日本語など)もバニラJavaScriptで開発しており、他のWebプロジェクトでも使用可能です。(Web標準規約に準拠しています)
開発後、Viteを活用したビルドとGulpでCSS圧縮スクリプトを作成し、圧縮されたmin.cssをビルドされたindex.htmlに自動置換します。また、package.jsonに適用すれば、一発でビルドとNetlifyへのデプロイまで完了します。
開発完了・ビルド後、Gitコミット・Netlifyパブリッシュを経て、自分だけのサイトが完成。 修正・加筆時には自動デプロイが適用されます。
成果物をOn-Premisesで実行するための、自分だけの簡単なNodeサーバーと最新トレンドのNestサーバーを開発します。
最終的に CSSも全てを説明して、これまでに開発したコードについて最適化をしてみます
答えはThree.jsにあります。都市モデル、製造工程モデル、災害モデルなど、Digital-Twin、VRなど多くの分野で実装するための技術がThree.jsです。
本講義ではほとんどThree.jsのみ 3Dサービスを作成し、Gitと連携してNetlifyに自動的に配布され、独自のサイトを無料で保有します。もちろん、ドメインがあれば接続するだけです。
個人および会社のサーバーで実行するため Node.js サーバーと Nest.js サーバーの 2 つを開発します。
多言語サービスが必要な場合は、重いライブラリを注入するのと同じようにして、独自の多言語モジュールを使用してください。すべてのWebプロジェクトに適用（Web標準に準拠）可能です。（セクション4から多言語でコーディング）
基本的な文法に従って、以下の例にのみ時間を費やすよりも完成したものと逆に学習してください。そして私の関心事のものに修正、改善、適用してみてください。
インストラクターだけをコーディングしないように自分で手コーディングしてください。
📌このトピックの Three.js は、学習する必要のあるクラス中心の実装開発を提供します。
📌 Gitにソースを管理し、Netlifyと連動して無料サイトにリアルタイム反映サービス可能です。
📌軽すぎる多言語モジュールを直接作成して適用し、他のWebプロジェクトに適用できます。
📌 On-Premises 運用が必要な方のための Node.js と Nest.js ベースの Express サーバーを提供します。
💡 Three.js + i18n(Internationalization) + Node.js & Nest.js Server & Git/Netlify.
文法勉強、従う用途ではなく、実務適用可能で、面接審査委員も驚くクールなポートフォリオ
Three.jsに基づいていますが、実際のWebサービスを提供するためのFullstack Semiコースを提供します
Three.jsでオブジェクトだけを作ったのですが、それ以降は気になった方？
2/3Dみんな良いですが、これをどこにどのように書くべきでしょうか。毎回BoxGeometry回転するのがほとんどですが、どこに活用しますか？
Three.js入門者/IT社員
Three.jsの保存/オープン方法は？
new THREE.Scene() オブジェクトを toJSON() すればよいですか？その後、どのようにオープンして見せますか？容量は膨大で（数十〜百M / GB）、またはMaximum callエラー😰
Three.js開発者/IT代理店
Webの最初から最後まで気になる？
Three.jsの方が良いとは言えませんが、単純なフルスタックはありませんか？ Node.jsは何ですか、Nest.jsは何ですか？簡単に実装するか、不明ですか？ ThreeJSでのみWeb実装になりますか？気になる方
Web-フロント開発者/コンピュータ室代理店
Three.jsを活用して、glb、glTF、および汎用Loaderベースのオブジェクトを拡大して独自のソリューションを作成できます。
多言語をサポートしてLinkedinなどにポートフォリオを上げても肩に大変です。
フルスタックでログイン/アウト処理するだけで、期待以上の投資を含む多くの提案を受けることができます。
Three.jsをホームページ用途以上に企画し、デジタルツインメーカーにポートフォリオを提出、退職してください
自信を持ってマニュアルをもう少し見て基礎を取ります。あなたの年俸は上昇します。
企画したモデルを保存してオープンしてみてください
-.一生懸命企画して作った都市モデルを保存します
- 保存されたモデルを開き、修正して保存します。
- 。ストレージ容量がThree.jsのScene.toJSONよりも小さすぎます。数百バイト～2KB内外です
Netlifyで実行するのはうまくいきます。
Node & Nestサーバーで開発作品を実行しよう
-.Node.jsとNest.jsの違いは、使いやすいライブラリサポートの違いです。
-.CORS、Swagger程度まで一緒にやってみます。
-.APIレベルのNest.jsはSpring Bootに似ています
シーンをラスターイメージ（Raster image）で抽出した結果です。画像はズームインしても画質が悪くなります。必要に応じてエクスポート機能を提供
ツールバーでオブジェクトボタンを選択した後、ビルなどのマウスオーバー時にツールチップ情報を提供。 （道路、建物＆人員、オブジェクトの状態など）
Windows (11) ベースで説明します。開発はmacOS(12)、window11ともテストしました。
Cursor : 0.49.6 (winSurf: 25% 安い, Vscode: とても安い, cline: Good)
ThreeJS: r176
Node.js：v22。 15 .0 LTS & v22.15.0 (ncu, ncu -u, npm i ; 教育を受けた方は？ 😃 )
Nest.js: v11.1.1 (@nestjs/core)
セクション別進行プログラムの授業資料と授業ノートで提供します。
練習環境
オペレーティングシステムとバージョン（OS）
-.Front-End: Chrome b
rowser サポート OS
-.Back-End：Node対応OS
使用ツール：Git、Netlifyはすべて無料です（Netlify有料もあります）
選手の知識と注意
JavaScriptの基本は必要です。
Three.js入門レベルは必要です。
質問/回答はASAPまたは3日以内を目指しており、現在のカリキュラムのThree.jsバージョンを毎週最新のものにします。完全な改訂ではなく、役に立つ改訂および追加モジュールは、更新後に通知されます。
レッスンや学習資料の著作権は複製、類似レベルの再販売、Git Publicの公開は不可です。つまり、 Git Privateや皆さんの製品に入れて変更、活用、配布などはすべて可能です。
（皆さん製品に使用した場合は販売可能で、売上が多ければ寄付もたくさんしてください。.^^ ）
一部の授業映像は音質が均一でない点、受講の際は参考にお願いします。
学習対象は
誰でしょう？
Three.jsやJSの基礎だけよりも、実務で即応用可能なソースをもとに学習・応用・発展させたい方
3Dはあらゆる分野に応用可能で、最近流行しているメタバース、デジタルツイン、AR、VR、ML、DLなどの可視化分野で差別化を図りたいエンジニア
一般的な FEツールだけではもう差別化が難しいと感じている方
前提知識、
必要でしょうか？
JS、Three.jsの基礎があると良いです。無くても大変ですが、不可能ではありません。リバースエンジニアリング（逆行工学）方式として、既にレベルの高い完成モジュールを逆に解釈・理解する方法論もあります。
キャリア認証
長い間、技術の変化に対応しながら過ごしてきた経験が多くありますので、今では私が持つ技術と経験を初級・中級者の方々に微力ながら提供し、皆さんが迅速に成長できるよう共に歩んでいきたいと考えています。
-. モノレポ（Turbo: "^2.3.4"）、FCM（Firebase Cloud Message）、WebHook、Redis、MQTT
-. MUI-X、Material-UIなどNext & ReactエコシステムのUI
-.OCR(Naver)、RIMS、Popbill、SNSログイン（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、Daum & Naverマップ
-.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
IAM-Guardian – SGC + ML + AI + Graphプラットフォーム
IAM-MES – 個別・バッチ・連続製造を業種別に統合したフルスタックプラットフォーム
IAM-ERP – AI会計ERP · 証憑自動仕訳 · ロック台帳
IAM-FREE-BI – ショッピングモール・中小企業向け無料ブラウザBI
IAM-SPC – メタデータベースの汎用SPC · Edge＋中央 · IATF 16949
IAM-VeloMap – AIベースのLidar後処理自動化ソリューション（+Guardian統合）
-.シティ・ワウ（City-Wow）: 国土・国防・公共分野および病院・製造企業などの3Dシミュレーションおよび
リアルタイムモニタリングサービス ('23.10 ~ 現在; Three, Vanila.js)
-.씨유(SeeU): 業種別ビデオチャットサービス（病院、製造業など）（Google Meet + クロマキー、STT & TTSチャット）
('23.02〜23.10; WebRTC、WebSocket、Vue3 & Pinia、Quasar、Node、MySQL)
-.サーベイ・ワウ（Survey-Wow）: Googleフォーム、MSフォーム、Naverフォームのアンケート結果を簡単に分析し
データ分析を共有するWebサービス ('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パターンのチャートソリューション
(文在寅政権の雇用ダッシュボードを青瓦台に納品、モンゴル財政管理国家プロジェクトに納品。多言語対応)
-.(株)カジュアル・インサイト（Casual-Insights） CTO
-.元KISTI研究員
-.元LG-CNS Oracle Modeler、DBA &主任研究員
-.元極東（現代）石油情報処理室社員
**. データダム多次元可視化-.総合紹介（必須）：https://youtu.be/noZ9H7wftsI
-.消費商圏-I（必須：百貨店店舗POSデータ－一般製造流通業者）：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/
全体
35件 ∙ (17時間 32分)
講座資料:
1. 全体講義の紹介
28:04
2. 講義目標と成果
11:32
3. 講義準備と初期設定
11:50
4. プロジェクトフォルダの設定
02:40
5. 基本に従ってください
06:15
全体
2件
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう！
期間限定セール、あと5日日で終了
￥165,000
21%
￥26,231
![[リニューアル] コーディング自律学習 ZeroChoのJavaScript入門講義サムネイル](https://cdn.inflearn.com/public/courses/327126/cover/edca2ab2-47b4-45b7-92c6-5bb00fd125eb/327126.jpg?w=420)
![[一日10分|Web Project] HTML/JS/CSSで自分だけの心理テストサイトを作る講義サムネイル](https://cdn.inflearn.com/public/courses/326568/cover/046cf2ee-87e8-4f8b-b000-5a19ce34a1bf?w=420)
