このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
-
#01 Three.jsを使ってみよう (02:25) 無料公開中
- 概要
- 公式サイト
- 必要となる知識
- レッスンにおける環境
-
#02 開発の準備を整えよう (02:50) 無料公開中
- 必要なファイルの準備
- Webサーバーの起動
- 動作確認
-
#03 処理の流れを確認しよう (02:58) 無料公開中
- index.htmlの編集
- 処理の流れ
- 用語の説明
-
#04 Scene､Mesh､Cameraを設定しよう (02:55) 無料公開中
- Sceneの設定
- Meshの設定
- Cameraの設定
-
#05 Rendererの設定をしていこう (01:45) 無料公開中
- Rendererの設定
- 動作確認
-
#06 Lightの設定をしていこう (02:43)
- DirectionalLightの設置
- AmbientLightの設置
- 動作確認
-
#07 ヘルパーを設定してみよう (02:35)
- GridHelperの設置
- AxisHelperの設置
- DirectionalLightHelperの設置
- 動作確認
-
#08 アニメーションをさせてみよう (02:44)
- requestAnimationFrame
- 動作確認
-
#09 色の指定方法を見ていこう (02:06)
- 色の指定方法
- THREE.Color()
-
#10 物体を操作してみよう (02:45)
- position
- scale
- rotation
-
#11 物体をグループ化してみよう (02:42)
- THREE.Group()
- 動作確認
-
#12 OrbitControlsを使ってみよう (02:38)
- OrbitControlsの導入
- 動作確認
-
#13 Geometryについて見ていこう (02:59)
- SphereGeometry
- PlaneGeometry
-
#14 Materialについて見ていこう (02:36)
- MeshBasicMaterial
- MeshLambertMaterial
- MeshPhongMaterial
-
#15 影を描画してみよう (03:00)
- 影の設定
- 動作確認
-
#16 テクスチャを貼り付けてみよう (02:41)
- 動画の読み込み
- テクスチャの貼り付け
- 動作確認
-
#17 3Dテキストを描画してみよう (02:32)
- フォントの読み込み
- 3Dテキストの描画
- 動作確認
-
#18 Particlesを描画する準備をしよう (02:58)
- Particlesの仕組み
- テクスチャの読み込み
-
#19 Particlesを完成させよう (02:36)
- Geometryの設定
- Materialの設定
- 動作確認
-
#20 ピッキング処理を実装してみよう (03:00)
- 立方体の生成
-
#21 マウス座標を取得してみよう (02:38)
- イベントの設定
- マウス座標の取得
-
#22 WebGLの座標系に変換しよう (01:52)
- WebGLの座標系に変換
-
#23 Raycasterを使ってみよう (02:39)
- THREE.Raycaster()
- 光線の生成
- 衝突した物体の取得
- 物体の操作
