Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介うえむー

自己紹介 Name：うえむー　フロントエンドエンジニア Job Skill：html / css / scss /
javascript / jQuery / gulp.js /php etc... Private Skill：next.js / React.js / nuxt.js / micro cms / go etc... Hobby：プログラミング学習・ゴルフ・ボードゲーム・麻雀 SNS・ブログサイト Twitter:：https://twitter.com/uemuragame5683 ブログサイト：https://nu-blogsite.net/ ポートフォリオサイト：https://uemu-engineer.com/

目次・Three.jsについて・成果物・Three.jsの基礎・Three.jsのオススメのクラス / ライブラリを紹介

Three.jsについて

Three.jsとは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。    ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。    Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 

Three.jsを学習するためにはどうすればいいの？当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわかわからず、公式ドキュメントを見ると英文ばかりで何をどうすればいいのかわからない状態だったので、池田泰延さんの技術ブログをみてThree.jsを学習してました。  https://ics.media/tutorial-three/  ある程度基礎を学んだら公式ドキュメントで様々なクラス / 型を利用して勉強
しておりました。   

成果物

成果物月見 PV数　733 月・地球・太陽 PV数　1445

成果物 FontLoader ハロウィン

Three.jsの基礎

Three.jsの基礎・HTMLファイル作成、CDNを導入  ・レンダラーを作成  ・シーンを作成  ・カメラを作成  ・メッシュを作成  ・光源設定 

HTMLファイル作成、CDNを導入 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/ 110/three.min.js"></script> <script src="js/index.js"></script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>

レンダラー作成 const width = 950 , height = 500; const
renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas') }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); 最初に、レンダリングするためにレンダラーを作成する必要があります。クラスに「canvas」変数と3Dのコンテンツを出力したい要素を設定します。 

シーンを作成 // シーンを作成 const scene = new THREE.Scene(); 次に、メッシュをセットするためのシーン(ステージ)を用意します。 

カメラを作成 //カメラを作成 const camera = new THREE.PerspectiveCamera(画角,アスペクト比,ニア(near),ファー(far); 画角・・・視点からの角度  アスペクト比・・・縦横の比率
ニア(near)・・・区間の開始距離  ファー(far)・・・区間の終了距離次に、カメラを作成します。カメラを作成しないとフロントには反映されません。カメラを作成するためのコードは以下になります。 

メッシュ作成次にメッシュを作成していきます。  メッシュは正方形・ドーナツ型などいろんな形状があります。 

メッシュを作成(作業工程) ジオメトリ作成  ・ジオメトリ(形状)を設定する(箱型、三角錐、円型、ドーナッツなど)  ・ジオメトリ(形状)の幅・奥行き・高さを設定する    マテリアル作成  ・マテリアル(質感)を設定する  ・マテリアルのハイライト・カラー色を設定する    メッシュを設定・シーンに加える。 
・設定したジオメトリ・マテリアルをメッシュのクラスに引数として渡す。  ・設定したメッシュをシーンに渡す。 

メッシュを作成(コード) const geometry = new THREE.BoxGeometry(400, 400, 400); const material
= new THREE.MeshNormalMaterial({color: 0xFFFFFF}); const box = new THREE.Mesh(geometry, material); scene.add(box);

光源設定 const directionalLight = new THREE.DirectionalLight(0xffffff); scene.add(directionalLight); const pointLight =
new THREE.PointLight(0xffffff, 1, 10000); scene.add(pointLight); 最後は光源設定です。光源設定をするとメッシュがより立体的に見えます。設定するのに時間がかかりました。 

Three.jsの便利なクラス/ライブラリを紹介

OrbitControls OrbitControlsというのは、要素・属性を指定するだけでカメラをグリグリ動かせることができる便利なクラスです。 OrbitControlsの機能・オービット（回転）: 左ボタンでドラッグ・ズーム(ピンチアウト・ピンチイン):
マウスホイール・パン: 右ボタンでドラッグ

FontLoader FontLoaderとはフォントを読み込むクラスであり、FontLoaderにフォントの素材データを格納し、格納先を指定すればと3D状にフォントを出力する事ができます。

CubeTextureLoader CubeTextureLoaderというのは、以下のような上下左右の計6枚の画像を用意し、CubeTextureLoaderのクラス/型を利用して実装することでキューブ状な3Dコンテンツができたり、応用化としてガラス玉のようなものができます。

dat.GUI dat.GUIはJavascriptリアルタイムでパラメーター調整するライブラリです。このプラグインを読み込んで、パラメータの設定を行うだけでスライダーや数値入力ができるフォーム画面ができあがります。

まとめ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリである。    基礎を抑えればWebサイト上に3Dのコンテンツを表示できる。    Three.jsのクラス/ライブラリは3桁ぐらいある。 

Thank YOU!

Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

Nobuyoshi

More Decks by Nobuyoshi

Other Decks in Programming

Featured

Transcript