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

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

Transcript

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

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

3. https://www.tam-tam.co.jp/
4. ぷわん

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

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

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

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

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

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

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