3D モデルの読み込み・光源・カメラ・アニメーションを JavaScript で操作できます。行列計算やシェーダ言語の知識なしに、数行で立方体を表示できます。
技術用語
294
three.js
スリージェイエス
体験区分：触った
推奨読者レベル：Level 3-4
何をしてくれるか
どこで出会うか
AI に「ブラウザで動く 3D デモを作って」と頼むと、Claude や ChatGPT は冒頭で `import * as THREE from 'three'` と書き始めます。3D 可視化コードの先頭で目にする場面が多いです。
Before / After
2026.04·ready
「three.js を Claude に書かせたら、ブラウザで動く 3D デモが 10 分で出ました。」
three.jsの見方
295
この用語の見どころ
1
役割
WebGL の複雑な低レベル処理を包んで 3D 描画を簡潔にします。
2
うれしさ
AI が生成したコードがそのまま動く確率が高い定番ライブラリです。
3
注意点
3D 全般の学習コストは残るため、座標やカメラ概念の理解が必要です。
4
どこで役立つか
3D データ可視化・製品デモ・インタラクティブな説明 UI で使われます。
5
はじめに
WebGL より先に three.js から入るのが現代的な学習順序です。
6
深掘り先
WebGL、React Three Fiber、Babylon.js
非エンジニアのつまずき
- ブラウザで 3D が動くと知って驚きました。
- AI に任せれば動きますがブラックボックス化しやすいです。
私のコメント
- 第一印象:Unity を使わなくても 3D が作れるんだと驚きました。
- 良い点:表現の幅が非常に広く、使いこなせれば高品質なものができます。
- ダメな点:ブラックボックス化しやすく手を加えると途端に難しくなります。
- 誰向けか:3D 可視化・デジタルツイン用途を目指す人向けです。
開発フローでの位置
要件整理
ライブラリ導入
AI に生成依頼
動作確認
連携
関連用語
F-14·term_tool
バイブコーディング図鑑