【Three.js入門】モダンな3Dフロントエンド技術を習得して周りのエンジニアと差をつけよう！
Three.jsをあなたはご存じですか？Three.jsを学べば「これまでとは全く違う2D→3Dのフロントエンド技術」を扱えるようになります。ありふれたフロントエンドエンジニアで埋もれたくないあなたへ贈るThree.js基礎マスターコース。
Created by Shin Code
What you'll learn
- ThreeJsの基礎と概念が理解できるようになる
- ThreeJsで利用されているクラス・関数についての詳細な解説
- ThreeJsでモダンな3Dウェブサイトが作成できるようになる
- ThreeJsの開発環境構築を学びます
- 3DCG等の分野で利用されている数学的知識を学びます
- ブラウザ上で自由自在に3Dオブジェクトが表現できるようになる
- ThreeJsでの開発の流れを学びます
- シーン、カメラ、レンダリングの関係性を学びます
- ジオメトリの基礎を学びます
- UIデバッグの基礎を学びます
- マテリアル・メッシュの基礎を学びます
- 光源(ライト)の基礎を学びます
- カメラの基礎を学びます
- カメラコントロール制御の基礎を学びます
- 応用としてパーティクル表現方法を学びます
- パーティクルアニメーションを学びます
- 実践としてThreeJsでモダンな3Dウェブサイトを作成します
- よりリアルなジオメトリの表現方法を環境マッピングを利用して学びます
- Viteを使ったThreejs開発環境を構築法を学びます
- スクロール率に応じてカメラや物体の制御方法を学びます
Requirements
- JavaScriptについてなんとなく知っている方。
- 基本的なJavascriptの知識(変数や型宣言など)
- 基本的なプログラミングの文法(if文やfor文など)
- 簡単なHTMLやCSSを書いたことがある方
- ThreeJSで3Dウェブサイトを１から自作してみたい方
- 他のプログラム言語を使ったことがある方
- これからwebglを学んでいきたい方
- 3D表現に興味がある方
Description
周りのフロントエンドエンジニアより一歩先へ進んでみたい「好奇心のある人だけ」を対象にしています。
「2D表現のフロントエンド技術は飽きちゃった・・・」
「Three.jsでモダンな3Dウェブサイトが作れるようになりたい！」
「Three.jsは前から学びたいと思ってたけど、難しいイメージなんだよね・・・」
「手軽に分かりやすくThree.jsを学んでみたい！ 」
「webGLとかOpenGL周辺の知識に興味がある！」
お任せください。
本講座があなたの欲求に答えます。
生ぬるい根性論や精神論ではなく、あなたが求めるThree.jsの技術だけを提供します。
■本コースでは教えないこと
・HTML/CSS/JavaScriptの基本的な文法とルール
・webgl/glsl言語
・Blender等の他3Dソフトの扱いとインポート
・シェーダー言語
Who this course is for:
- Threejsに少しでも興味がある入門者
- モダンな3Dウェブサイトに興味があるJavascript初心者
- 周りのフロントエンドエンジニアと差別化したい方
- アッと驚くポートフォリオを作成してみたい方
- 3D表現に少しでも興味がある好奇心旺盛な方
- ThreeJS公式ドキュメントが難しくて挫折経験のある方
- 英語の教材ではなく、日本語で学びたい方
Instructor
Webエンジニア
![Shin Code](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 4.6 Instructor Rating
- 599 Reviews
- 3,018 Students
- 12 Courses
皆さんはじめまして。Shinと申します。
休みの日はプログラミングばかり触っているちょっと変わった人です。便利なアプリや好奇心をくすぐられるようなアプリを作るのが趣味です。
動画レクチャーは分かりやすいように作成するように心がけています。
どうぞよろしくお願いします。