README.md

three.js-project

Three.js の機能を 1 デモ 1 ファイルで試せる Web 3D 作例集

概要

Web 上で 3D CG を描画する JavaScript ライブラリ Three.js の作例集です。基本の立方体描画からライト・シャドウ、テクスチャ・スカイボックス、サウンド、VRM モデルの表示まで、機能ごとに 25 本のデモを収録しています。各デモは 1 つの HTML ファイルで完結し、ビルドやバンドラは不要です。

特徴

• 1 デモ = 1 ファイル — examples/*.html がそれぞれ自己完結。ライブラリは CDN から読み込むため、npm install もビルドも不要
• VRM 対応 — three-vrm による VRM モデルの表示、影付き表示、lil-gui で表情（BlendShape）を切り替えるビューア
• サウンド・動画・スカイボックス — Audio / PositionalAudio、VideoTexture、3 方式のスカイボックス（パノラマ球・6 面キューブマップ・HDR）を比較できる

デモ

ライブデモ: https://akkunlab.github.io/three.js-project/

サムネイルをクリックすると各デモが開きます。

Base	Resize	GUI
Shape	Merge Geometries	Rainbow Box
Light	Shadow	Particles
Stars	Text	Orbit Controls
First-person Controls	Plane Texture	Video Texture
Skybox	6-sided Skybox	HDR Skybox
Ocean Shader	Audio	Positional Audio
VRM Loader	three-vrm	three-vrm Shadow
three-vrm Viewer

• Audio / Positional Audio / Video Texture は、ブラウザの自動再生制限のため画面中央の Play ボタンを押すと開始します
• VRM Loader は Three.js 本体の旧 VRMLoader（r138 で削除済み）を使うため現在は動作しません。VRM 表示は three-vrm 系のデモを参照してください

技術スタック

領域	技術
3D	Three.js r147（three-vrm 系は r141）。ES Modules + Import Maps で CDN から読み込み
VRM	@pixiv/three-vrm 0.6.11
GUI / polyfill	lil-gui 0.16 / es-module-shims 1.3.6

セットアップ

ライブラリは CDN から取得するためインストールは不要です。ES Modules は file:// では動かないので、静的サーバーを経由して開きます。

git clone https://github.com/Akkunlab/three.js-project.git
cd three.js-project
python3 -m http.server 8000

http://localhost:8000/examples/base.html のように examples/ 配下の HTML を開きます。

構成

examples/             各デモ（1 HTML = 1 デモ）
  assets/css/         共通スタイル（余白リセット、Play ボタン）
  assets/models/      VRM モデル
  assets/ogg/         BGM
  assets/textures/    テクスチャ・スカイボックス画像・HDR
  assets/videos/      動画テクスチャ用の MP4
images/               README 用サムネイル（examples_<デモ名>.png）

使用素材

• 3D モデル: アリシア・ソリッド
• BGM: 弥生の空に（甘茶の音楽工房）
• 動画: Big Buck Bunny
• スカイボックス: Fantasy Skybox FREE / AllSky Free / Skybox Series Free / aosystem SKYBOX