シーン・カメラ・レンダラーの最小構成から、ライトと影・テクスチャと PBR・glTF モデルの読み込み・マウス操作・ポストプロセス・公開まで。全20レッスンで「Blender で作ったモデルをブラウザで見せる」ところまで進みます。コードはすべてヘッドレス Chromium で実際に描画し、読み取った値を載せています。
全20レッスンを5つの章に分けています。第1章から順に進めるのがおすすめですが、
気になるところだけ拾い読みしてもかまいません。
※ Three.js は CDN から読み込むため、ブラウザ内では実行できません。コードを HTML ファイルに保存し、python3 -m http.server などのローカルサーバーで開いて試してください。前提は JavaScript コースの内容です。
シーン・カメラ・レンダラーの 3 つで立方体を出し、形（ジオメトリ）と質感（マテリアル）の正体を数字で確かめます。最後は位置・回転・親子の変換と、毎フレーム描き直すループで物を動かします。
ライトを置いて陰影をつけ、影・テクスチャ・PBR マテリアルと環境マップで「それらしく」見せます。真っ黒・影が出ない・色がくすむといった定番のつまずきを、原因から直せるようになります。
glTF（.glb）を読み込み、Blender から書き出すときの設定と、スケール・座標系の合わせ方を押さえます。最後はモデルに入っているアニメーションを再生します。
OrbitControls でマウス操作、レイキャストでクリックした物の特定、lil-gui でパラメータ調整を足します。最後は画面サイズが変わっても崩れないレスポンシブ対応まで進みます。
Bloom のポストプロセスで光らせ、描画コールを減らして軽くし、読み込み中の表示を付けます。最後は公開して、作ったものを人に見せるところまで進みます。