【Three.js入門】モダンな3Dフロントエンド技術を習得して周りのエンジニアと差をつけよう！

Three.jsをあなたはご存じですか？Three.jsを学べば「これまでとは全く違う2D→3Dのフロントエンド技術」を扱えるようになります。ありふれたフロントエンドエンジニアで埋もれたくないあなたへ贈るThree.js基礎マスターコース。

24,000円で購入

Course curriculum

1. 本講座の学び方
1. VSCodeのインストール
2. Three.jsをインストールしてみよう
3. 開発用プロジェクトを作成しよう
4. Three.jsをVSCodeに読み込ませよう
5. きちんとThree.jsが使えるのか確認してみよう
6. 【補足】npmを用いたThree.js開発環境構築(Vite編)
1. Three.jsって何？
2. シーン、カメラ、レンダラーの概念を理解しよう
3. Three.jsにおける座標軸の取り扱い
1. はじめに
2. シーンを作成してみよう
3. カメラを作成してみよう
4. 【追加】次の動画での修正点
5. レンダラーを作成してみよう
6. 背景の設定をしよう
7. ジオメトリ（3Dオブジェクト）を作成してみよう
8. マテリアル（材質）を追加してみよう
9. メッシュして組み合わせてみよう
10. ブラウザにレンダリングしてみよう
11. 平行光源を設置してみよう
12. ※ポイント光源が光らない場合
13. ポイント光源を設置してみよう
14. ポイント光源の場所を特定してみよう
15. ポイント光源を動かしてみよう
16. マウスで動かせるようにしてみよう
17. ※OrbitControlsがうまく動かない場合
18. 地球のテクスチャを追加してみよう
19. オブジェクトの画質が悪いときの対象法
20. ページ読み込みが完了したらレンダリングするように設定しよう
21. ブラウザのリサイズに対応させてみよう
1. ジオメトリを理解しよう
2. コーディングの下準備をしよう
3. 直方体(BoxGeometry)
4. 球体(SphereGeometry)
5. 平面(PlaneGeometry)
6. ドーナツ型(TorusGeometry)
7. バッファジオメトリ(BufferGeometry)：その1
8. バッファジオメトリ(BufferGeometry)：その2
9. 三角形を50個生成してみよう
1. UIデバッグって何？
2. lil.GUIをセットアップしてみよう
3. UIデバッグで物体を動かしてみよう
4. UIデバッグでtrueかfalseの判定をしてみよう
5. UIデバッグで色を変更してみよう
6. UIデバッグをフォルダーに分割してみよう
1. マテリアルとメッシュの関係
2. マテリアルを学ぶ下準備をしよう
3. 練習として3つのジオメトリを作成してみよう
4. 練習としてアニメーションさせてみよう
5. MeshNormalMaterial
6. 光を追加してみよう
7. MeshBasicMaterial
8. MeshStandardMaterial
9. MeshPhongMaterial
1. はじめに
2. 周囲光(AmbientLight)
3. 平行光源(DirectionalLight)
4. 半球光源(HemisphereLight)
5. ポイント光源(PointLight)
6. RectAreaLight
7. SpotLight
8. SpotLigthHelper
9. ヘルパー光源
10. RectAreaHelper
1. はじめに
2. カメラの種類
3. PerspectiveCamera
4. OrthographicCamera
1. カメラ制御の種類
2. カメラ制御のコーディングの下準備をしよう
3. カメラを実際にコントロールしてみよう
4. カメラをオブジェクトの裏側まで制御してあげよう
5. OrbitControls
6. カメラを滑らかに動かすためには
1. パーティクルとは？
2. パーティクルのセットアップ
3. 球体のパーティクルを作ってみよう
4. カスタムジオメトリでパーティクルを作ってみよう
5. 空間いっぱいにパーティクルを描画させよう
6. パーティクルにテクスチャを付けてみよう
7. テクスチャのエッジを修正してみよう
8. パーティクルにカラフルな色を付けてあげよう
9. 【追加】パーティクルアニメーションを実装してみよう
10. 【追加】パーティクルアニメーションの数式の理解を深めよう
11. 【追加】パーティクルアニメーションで波形を表現してみよう
1. 本セクションの完成品デモ
2. より実践的なThree.js環境開発構築
3. package.jsonに必要なモジュールをインストールしてみよう
4. HTMLで雛形を作ろう
5. CSSを適用してスタイルを調整しよう(説明のみ)
6. Three.jsの不可欠な3要素を追加しよう
7. ジオメトリを4つ作成して描画しよう
8. 平行光源を設置してみよう
9. ブラウザのリサイズに対応させてみよう
10. UIデバッグを実装してみよう
11. ジオメトリを回転させてみよう
12. マウスホイールを実装してみよう
13. マウスホイールでジオメトリを全体を回転させてみよう
14. 回転操作の数学的な意味を理解してみよう
15. カーソル位置を取得するには？
16. カーソル位置とカメラ制御を組み合わせてみよう
17. パーティクルを追加しよう
1. 完成品デモを確認しよう
2. viteを使って環境開発構築をしよう
3. HTMLの雛形から作成しよう
4. CSSを適用してスタイルを調整しよう(説明のみ)
5. Three.jsにおける共通実装(コピペ用)
6. Three.jsにおける共通実装をコーディングで練習しよう
7. シーンに背景を追加してみよう
8. ジオメトリを作成しよう
9. スクロールアニメーション実装の流れを確認しよう
10. スクロールアニメーションを実装してみよう
11. ページのスクロール率を計算してみよう
12. スクロール率に応じてアニメーションを実行してみよう
13. 線形補間を実装して意味を理解しよう
14. 線形補間の式を実際に使ってみよう
15. 残りの3つのアニメーションを実装しよう
1. Vercelを利用して無料でデプロイ(公開)をしてみよう
1. 【追加】CubeCameraとenvMapでよりリアルなオブジェクトを表現しよう
1. sin関数とcos関数とは
2. Three.jsで物体を回転させるためには
3. アスペクト比とは
1. ボーナスレクチャー

About this course

24,000円
124回のレッスン
8.5時間の動画コンテンツ

Discover your potential, starting today

Enroll today

ShinCode_Camp

【Three.js入門】モダンな3Dフロントエンド技術を習得して周りのエンジニアと差をつけよう！

Course curriculum

はじめに

Three.js開発環境構築

Three.jsの基礎・原理

まずは簡単にThree.jsに触れてみよう

ジオメトリの基礎

UIデバッグの基礎

マテリアル・メッシュの基礎

光源の基礎

カメラの基礎

カメラコントロール(制御)の基礎

【応用編】パーティクルを作ってみよう

【実践編】Three.jsでモダン3Dウェブサイトを作ってみよう

【実践編2】スクロールに応じてアニメーションする3Dウェブサイトを作ってみよう

【追加教材】作成したウェブサイトをデプロイして公開してみよう

【追加教材】背景を反射するリアルなオブジェクトの作り方

【補足教材】Three.jsで使う数学的知識

ボーナスレクチャー

About this course

Discover your potential, starting today