Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Nobuyoshi
December 04, 2021

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

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

成果物

地球:
https://codepen.io/uemuragame5683/pen/YzWGEKv

月見:
https://codepen.io/uemuragame5683/details/ExXLWYR

フォント:
https://codepen.io/uemuragame5683/pen/wvexbMo

ハロウィン:
https://codepen.io/uemuragame5683/pen/NWvvZXW

Nobuyoshi

December 04, 2021
Tweet

More Decks by Nobuyoshi

Other Decks in Programming

Transcript

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

  2. 自己紹介 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/
  3. 目次 ・Three.jsについて ・成果物 ・Three.jsの基礎 ・Three.jsのオススメのクラス / ライブラリを紹介

  4. Three.jsについて

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


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

    しておりました。
 

  7. 成果物

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

  9. 成果物 FontLoader ハロウィン

  10. Three.jsの基礎

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


  12. 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>
  13. レンダラー作成 const width = 950 , height = 500; const

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

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


  15. カメラを作成 //カメラを作成 const camera = new THREE.PerspectiveCamera(画角,アスペク ト比,ニア(near),ファー(far); 画角・・・視点からの角度
 アスペクト比・・・縦横の比率

    ニア(near)・・・区間の開始距離
 ファー(far)・・・区間の終了距離 次に、カメラを作成します。カメラを作成しないとフロントには反映されません。 カメラを作成するためのコードは以下になります。

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


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


    ・設定したジオメトリ・マテリアルをメッシュのクラスに引数として渡す。
 ・設定したメッシュをシーンに渡す。

  18. メッシュを作成(コード) 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);
  19. 光源設定 const directionalLight = new THREE.DirectionalLight(0xffffff); scene.add(directionalLight); const pointLight =

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

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

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

    マウスホイール ・パン: 右ボタンでドラッグ
  22. FontLoader FontLoaderとはフォントを読み込む クラスであり、FontLoaderにフォント の素材データを格納し、格納先を指 定すればと3D状にフォントを出力す る事ができます。

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

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

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


  26. Thank YOU!