$30 off During Our Annual Pro Sale. View Details »

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

Chinen
December 21, 2022

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

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

Chinen

December 21, 2022
Tweet

More Decks by Chinen

Other Decks in Technology

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