Three.jsで3Dぷわんを動かす / PWA Night vol.46

PWA Night vol.46のLT資料です。

Transcript

1. Three.jsで3Dぷわんを動かす

   PWA Night CONFERENCEサイト

   2022/12/21　まぁし（知念）

   

   View Slide

2. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主
   

   知念 昌史 / まぁし Twitter@chocodogmagic

   ● 沖縄でリモートワーク/元・美容師

   ● 技術コミュニティ運営

   ○ PWA Night（東京）/ v-okinawa（沖縄）
   

   ● Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/

   アクセシビリティ/SEO/パフォーマンス改善/CMS

   ● 最近のハマり：スプラトゥーン3（弓ウデマエS+17）

   ● ポケモン スカーレット始めました

   

   View Slide

3. https://www.tam-tam.co.jp/
   

   View Slide

4. ぷわん

   

   View Slide

5. PWA Nightの公式キャラクター PWAN（ぷわん）

   https://conf2022.pwanight.jp/

   

   View Slide

6. View Slide

7. はじめての3D対応（モデルデータはもらう）

   めちゃくちゃ参考にしたサイトその1

   ・three.js doc（公式ドキュメント）

   https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

   

   View Slide

8. はじめての3D対応（モデルデータはもらう）

   めちゃくちゃ参考にしたサイトその2

   ・ICS MEDIA Three.js入門サイト

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

   

   

   

   

   View Slide

9. コード紹介

   練習用のリポジトリ

   https://github.com/chinen-octtn/threeJsSample

   

   View Slide

10. 3Dモデル動いた！！！

    👏

    

    View Slide

11. まとめ

    ● 光の加減が難しい（すぐ金属っぽくなる）

    ● モデルデータを自作できたら実装のイメージがしやすそう

    ○ Blenderとか触ってみるといいのかも 

    ● CSS/JSで動かすか、canvas内で動かすかを考えよう

    実装者と確認者ですり合わせが何度も発生するので、

    画面上で数値を調整するツールの導入がおすすめ（ただし工数・・・）

    

    View Slide

12. ありがとうございました！

    Twitter まぁし@chocodogmagic

    フォローしてね

    平日9:00〜SpacesでWeb情報発信中！
    

    TAMで一緒にお仕事しませんか？

    ご依頼・各職種の採用も募集中

    

    View Slide