JavascriptのWebGLコンテキストで3Dコンテンツを作る(three.jsを使用)
HTMLのCanvasタグでWebGLコンテキストを使うとブラウザで3Dコンテンツを表現できますが、これを自力で扱うのはとても大変です。 そこでthree.js(https://threejs.org/ )を使えばJavaScriptの知識だけで簡単にWebで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) ~6種のMaterialの使い方
6種の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) ~迷路を作成して3D表示しマウスボタン長押し(ロングタップ)でカメラを前進後退、左右回転して迷路内をウォークスルー
迷路を作成して3D表示しマウスボタン長押し(ロングタップ)でカメラを前進、後退、左右回転して迷路内をウォークスルーする(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バッティングゲーム
Webサイトで3Dバッティングゲーム(Three.js[r145]を使用)
-
3Dスロットマシン
Webサイトで3Dスロットマシン ゲーム(Three.js[r145]を使用)
-
three.jsを使ったWebGL
Three.jsを使ってWebで3D表示(WebGL)
-
CSS3Dを使って2DのHTMLを3Dに表示する
Three.jsのCSS3Dを使って3DオブジェクトにHTMLを表示する
-
3Dオブジェクトのクリックとタッチ
3Dオブジェクトをclickやtouchに応答させる(ビジョントレーニングのアプリ)
-
OBJファイルの表示
OBJ,MTLファイルを表示する