three.js-project

# three.js-project Three.js の機能を 1 デモ 1 ファイルで試せる Web 3D 作例集 [![Three.js](https://img.shields.io/badge/Three.js-r147-000000?logo=threedotjs&logoColor=white)](https://threejs.org/) [![three-vrm](https://img.shields.io/badge/three--vrm-0.6.11-1DA1F2)](https://github.com/pixiv/three-vrm) [![lil-gui](https://img.shields.io/badge/lil--gui-0.16-F7DF1E)](https://lil-gui.georgealways.com/) [![Live Demo](https://img.shields.io/badge/Live%20Demo-GitHub%20Pages-222222?logo=github&logoColor=white)](https://akkunlab.github.io/three.js-project/) Ocean Shader デモのスクリーンショット

概要

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