three.jsでWebGL 3Dグラフィックスを作る｜実用サンプル集・カメラ制御・OBJ表示・ゲーム例付き

• ホーム
• three.jsでWebGL 3Dグラフィックスを作る｜実用サンプル集・カメラ制御・OBJ表示・ゲーム例付き

three.jsでWebGL 3Dグラフィックスを作る｜実用サンプル集・カメラ制御・OBJ表示・ゲーム例付き

このページでは、JavaScriptライブラリ「three.js」を使ってWebGLで3Dグラフィックスを描画する方法を、実用的なサンプルコードとともに紹介しています。
カメラ制御（OrbitControls・ArcballControls・TransformControls）、マテリアル・テクスチャ・影・水・空・OBJ/MTLファイルの表示、360度パノラマ、迷路・カルーセル・ゲームなど、three.jsの主要機能を網羅。
three.js R145を使用し、モジュール版ではなく従来のJavaScript版で構成しています。
Webサイトの背景やインタラクティブな3D表現を導入したい方におすすめです。

three.js R145は以下からダウンロード可能です。
https://github.com/mrdoob/three.js/tree/r145

R148以降はmodule版のみの提供となっているそうで、Javascript版の最終バージョンはR147のようです。
https://github.com/mrdoob/three.js/tree/r147

WebGL(three.js)

• 基本
• 

  Three.jsでWeb3D(WebGL) ～カメラ制御[OrbitControls]

  Three.jsでOrbitControlsを使ってマウスのドラッグやスワイプ・ピンチイン／アウトでカメラ制御（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～カメラ制御[ArcballControls]

  Three.jsでArcballControlsを使ってマウスのドラッグやスワイプ・ピンチイン／アウトでカメラ制御（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～物体の移動、回転、拡大縮小[TransformControls]

  Three.jsでTransformControlsを使ってドラッグで３Ｄオブジェクトの移動、回転、サイス変更（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～影を表示し影のエッジをぼかす

  Three.jsで影を表示し影のエッジをぼかすThree.jsで影を表示し影のエッジをぼかす（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～様々なジオメトリ（形状）を作る

  様々なジオメトリ（形状）を作る(Three.js[r145]を使用)

• 

  Three.jsでWeb3D(WebGL) ～６種のMaterialの使い方

  ６種のMaterialの使い方（MeshBasicMaterial、MeshNormalMaterial、MeshLambertMaterial、MeshPhongMaterial、MeshToonMaterial、MeshStandardMaterial）（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～テクスチャマッピングを行う

  テクスチャマッピングを行う THREE.TextureLoader().load("ファイル名")（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～バンプ マップ、ディスプレイスメント マップを使う[bumpMap,displacementMap]

  「バンプ マップ(bumpMap)」「ディスプレイスメント マップ(displacementMap)」を使う（Three.js[r145]を使用）

• 応用
• 

  Three.jsでWeb3D(WebGL) ～空を表現[Sky.js]

  Three.jsでSky.jsを使って空を表現する（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～水を表現[Water.js]

  Three.jsでWater.jsを使って水を表現する（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～テキストの表示

  Three.jsでテキスト(文字)を表示する方法をソースコードと実例で解説

• 

  Three.jsでWeb3D(WebGL) ～3Dオブジェクトをグループ化（まとめて管理）する

  3Dオブジェクトをグループ化（まとめて管理）する THREE.Group（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～フォグ(fog,霧)機能を使う

  フォグ(fog,霧)機能を使う(Three.js[r145]を使用)

• 

  Three.jsで「OBJLoader.js」を使ってOBJファイルをロードして表示する

  「OBJLoader.js」を使ってOBJファイルをロードして表示する（Three.js[r145]を使用）

• 

  Three.jsで「OBJLoader.js」でOBJファイルをロードし「MTLLoader.js」でMTLファイル（マテリアルファイル）をロードして適用して表示する

  Three.jsで「OBJLoader.js」を使ってOBJファイルをロードし、「MTLLoader.js」を使ってMTLファイル（マテリアルファイル）をロードして適用して表示する(Three.js[r145]を使用)

• 

  Three.jsで反射マッピング（鏡のように周りのものが映る）

  鏡のように周りのものが映り込むキューブ反射マッピング(Three.js[r145]を使用)

• 

  ガラス玉のように屈折透過

  ガラス玉のように屈折透過するキューブ屈折マッピング(Three.js[r145]を使用)

• 

  3Dメッシュの頂点座標の更新

  3Dメッシュの頂点座標の更新(Three.js[r145]を使用)

• 

  MarchingCubes.jsでメタボールの表現

  Three.jsとマーチンキューブ（MarchingCubes.js）でメタボールを表現する(Three.js[r145]を使用)

• 3DコンテンツをWEBサイトの背景に使う

  Three.jsの3DコンテンツをWEBサイトの背景に使う

• 実例
• 

  Three.jsでWeb3D(WebGL) ～360度写真をパノラマ表示

  360度写真をパノラマ表示する（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～360度写真をパノラマ表示してバーチャル展示会

  360度写真をパノラマ表示してバーチャル展示会（クリックやタップで説明表示）（Three.js[r145]を使用）

• 

  Three.jsでWeb3D(WebGL) ～迷路を作成して３Ｄ表示しマウスボタン長押し（ロングタップ）でカメラを前進後退、左右回転して迷路内をウォークスルー

  迷路を作成して３Ｄ表示しマウスボタン長押し（ロングタップ）でカメラを前進、後退、左右回転して迷路内をウォークスルーする（Three.js[r145]を使用）

• ３Ｄカルーセル其の1

  Webサイトで３Ｄカルーセル其の1(Three.js[r145]を使用)

• ３Ｄカルーセル其の2

  Webサイトで３Ｄカルーセル其の2(Three.js[r145]を使用)

• 

  ３Ｄ地球

  Webサイトで３Ｄ地球(Three.js[r145]を使用)

• エンターテインメント
• 

  ３Ｄバッティングゲーム

  Webサイトで３Ｄバッティングゲーム(Three.js[r145]を使用)

• 

  ３Ｄスロットマシン

  Webサイトで３Ｄスロットマシン ゲーム(Three.js[r145]を使用)

• 

  ３Ｄガチャガチャ

  レンズフレア（Lensflare.js）と反射マッピングを使用してWebサイトで３Ｄガチャガチャ(Three.js[r145]を使用)

• 

  マテリアルの変更とメッシュの表示非表示制御

  Three.jsでマテリアルの変更とメッシュの表示非表示制御

• 

  WEBでドローンの操縦

  Webブラウザ上でドローンの操縦が疑似体験できる3Dサイト

• ３Ｄオブジェクトのクリックとタッチ

  3Dオブジェクトをclickやtouchに応答させる（視覚トレーニングのアプリ）

• モデリングデータの表示

• OBJファイルの表示 ～分譲地

  OBJ,MTLファイルを表示する ～分譲地

• OBJファイルの表示 ～ダイニングキッチン

  OBJ,MTLファイルを表示する ～ダイニングキッチン

• OBJファイルの表示 ～リビング

  OBJ,MTLファイルを表示する ～リビング

• その他

• three.jsを使ったWebGL

  Three.jsを使ってWebで3D表示（WebGL）

• CSS3Dを使って2DのHTMLを3Dに表示する

  Three.jsのCSS3Dを使って3DオブジェクトにHTMLを表示する