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

Transcript

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

   View Slide

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/
   

   View Slide

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

   View Slide

4. Three.jsについて
   

   View Slide

5. Three.jsとは？
   Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラ
   リです。

   

   ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技
   術が必要になりJavascriptのコード量が膨大になっていきます。

   

   Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsの
   クラスを利用することで気軽に3Dのコンテンツを表示することができます。

   

   View Slide

6. Three.jsを学習するためにはどうすればいいの？
   当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわかわか
   らず、公式ドキュメントを見ると英文ばかりで何をどうすればいいのかわからな
   い状態だったので、池田 泰延さんの技術ブログをみてThree.jsを学習してまし
   た。

   https://ics.media/tutorial-three/

   ある程度基礎を学んだら公式ドキュメントで様々なクラス / 型を利用して勉強
   しておりました。

   

   

   View Slide

7. 成果物
   

   View Slide

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

   View Slide

9. 成果物
   FontLoader
   ハロウィン
   

   View Slide

10. Three.jsの基礎
    

    View Slide

11. Three.jsの基礎
    ・HTMLファイル作成、CDNを導入

    ・レンダラーを作成

    ・シーンを作成

    ・カメラを作成

    ・メッシュを作成

    ・光源設定

    

    View Slide

12. HTMLファイル作成、CDNを導入
    
    
    
    
    src="https://cdnjs.cloudflare.com/ajax/libs/three.js/
    110/three.min.js">
    
    
    
    
    
    
    

    View Slide

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のコンテンツを出力したい要素を設定します。

    

    View Slide

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

    

    View Slide

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

    アスペクト比・・・縦横の比率
    ニア(near)・・・区間の開始距離

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

    

    View Slide

16. メッシュ作成
    次にメッシュを作成していきます。

    メッシュは正方形・ドーナツ型などいろんな形状があります。

    

    View Slide

17. メッシュを作成(作業工程)
    ジオメトリ作成

    ・ジオメトリ(形状)を設定する(箱型、三角錐、円型、ドーナッツなど)

    ・ジオメトリ(形状)の幅・奥行き・高さを設定する

    

    マテリアル作成

    ・マテリアル(質感)を設定する

    ・マテリアルのハイライト・カラー色を設定する

    

    メッシュを設定・シーンに加える。

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

    ・設定したメッシュをシーンに渡す。

    

    View Slide

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);
    

    View Slide

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

    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. まとめ
    Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラ
    リである。

    

    基礎を抑えればWebサイト上に3Dのコンテンツを表示できる。

    

    Three.jsのクラス/ライブラリは3桁ぐらいある。

    

    View Slide

26. Thank YOU!
    

    View Slide