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

Slide 1

Slide 1 text

Three.jsで3Dぷわんを動かす  PWA Night CONFERENCEサイト  2022/12/21　まぁし（知念） 

Slide 2

Slide 2 text

株式会社TAM/TAMTO：フロントエンドエンジニア兼個人事業主   知念昌史 / まぁし Twitter@chocodogmagic  ● 沖縄でリモートワーク/元・美容師  ● 技術コミュニティ運営  ○ PWA Night（東京）/ v-okinawa（沖縄）   ● Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/  アクセシビリティ/SEO/パフォーマンス改善/CMS  ● 最近のハマり：スプラトゥーン3（弓ウデマエS+17）  ● ポケモンスカーレット始めました 

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ぷわん 

Slide 5

Slide 5 text

PWA Nightの公式キャラクター PWAN（ぷわん）  https://conf2022.pwanight.jp/ 

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

はじめての3D対応（モデルデータはもらう）  めちゃくちゃ参考にしたサイトその1  ・three.js doc（公式ドキュメント）  https://threejs.org/docs/#manual/en/introduction/Creating-a-scene 

Slide 8

Slide 8 text

はじめての3D対応（モデルデータはもらう）  めちゃくちゃ参考にしたサイトその2  ・ICS MEDIA Three.js入門サイト  https://ics.media/tutorial-three/       

Slide 9

Slide 9 text

コード紹介  練習用のリポジトリ  https://github.com/chinen-octtn/threeJsSample 

Slide 10

Slide 10 text

3Dモデル動いた！！！  👏 

Slide 11

Slide 11 text

まとめ  ● 光の加減が難しい（すぐ金属っぽくなる）  ● モデルデータを自作できたら実装のイメージがしやすそう  ○ Blenderとか触ってみるといいのかも   ● CSS/JSで動かすか、canvas内で動かすかを考えよう  実装者と確認者ですり合わせが何度も発生するので、  画面上で数値を調整するツールの導入がおすすめ（ただし工数・・・） 

Slide 12

Slide 12 text

ありがとうございました！  Twitter まぁし@chocodogmagic  フォローしてね  平日9:00〜SpacesでWeb情報発信中！   TAMで一緒にお仕事しませんか？  ご依頼・各職種の採用も募集中 