JavascriptのWebGLコンテキストで3Dコンテンツを作る(three.jsを使用)
Javascriptとthree.jsを使用したWebGLコンテキストでの3Dコンテンツ作成サンプル集。 three.jsを活用して、OrbitControlsによるカメラ制御、影の表示方法、テキストの表示、マテリアルの設定、テクスチャマッピング、BUMPマップ、ディスプレイメントマップなど、 さまざまな3Dグラフィックスの実装方法を学ぶことができます。 また、ジオメトリの紹介や360度パノラマ表示のソースコード、3D迷路、OBJとMTLファイルの読み込み、反射マッピング、透過屈折効果、3Dバッティングゲーム、 3Dスロットマシンなどの興味深いサンプルも豊富に提供しています。
WebGL(three.js)
- WebGL(three.js)
-
Three.jsでWeb3D(WebGL) ～カメラ制御[OrbitControls]
Three.jsでOrbitControlsを使ってマウスのドラッグやスワイプ・ピンチイン／アウトでカメラ制御（Three.js[r145]を使用）
-
Three.jsでWeb3D(WebGL) ～影を表示し影のエッジをぼかす
Three.jsで影を表示し影のエッジをぼかすThree.jsで影を表示し影のエッジをぼかす（Three.js[r145]を使用）
-
Three.jsでWeb3D(WebGL) ～テキストの表示
Three.jsでテキスト(文字)を表示する方法をソースコードと実例で解説
-
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) ～様々なジオメトリ（形状）を作る
様々なジオメトリ（形状）を作る(Three.js[r145]を使用)
-
Three.jsでWeb3D(WebGL) ～3Dオブジェクトをグループ化（まとめて管理）する
3Dオブジェクトをグループ化（まとめて管理）する THREE.Group（Three.js[r145]を使用）
-
Three.jsでWeb3D(WebGL) ～フォグ(fog,霧)機能を使う
3フォグ(fog,霧)機能を使う(Three.js[r145]を使用)
-
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]を使用）
-
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]を使用)
-
３Ｄバッティングゲーム
Webサイトで３Ｄバッティングゲーム(Three.js[r145]を使用)
-
３Ｄスロットマシン
Webサイトで３Ｄスロットマシン ゲーム(Three.js[r145]を使用)
-
３Ｄカルーセル其の1
Webサイトで３Ｄカルーセル其の1(Three.js[r145]を使用)
-
３Ｄカルーセル其の2
Webサイトで３Ｄカルーセル其の2(Three.js[r145]を使用)
-
３Ｄ地球
Webサイトで３Ｄ地球(Three.js[r145]を使用)
-
３Ｄガチャガチャ
レンズフレア（Lensflare.js）と反射マッピングを使用してWebサイトで３Ｄガチャガチャ(Three.js[r145]を使用)
-
three.jsを使ったWebGL
Three.jsを使ってWebで3D表示（WebGL）
-
CSS3Dを使って2DのHTMLを3Dに表示する
Three.jsのCSS3Dを使って3DオブジェクトにHTMLを表示する
-
３Ｄオブジェクトのクリックとタッチ
3Dオブジェクトをclickやtouchに応答させる（ビジョントレーニングのアプリ）
-
OBJファイルの表示
OBJ,MTLファイルを表示する