Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Three.jsで3Dぷわんを動かす / PWA Night vol.46
Search
Chinen
December 21, 2022
Technology
0
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
PWA Night vol.46のLT資料です。
Chinen
December 21, 2022
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
100
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.5k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
150
Web Push対応状況2023
chinen
0
560
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
200
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
frontend-conf-okinawa-2022
chinen
0
500
Other Decks in Technology
See All in Technology
シンプルな設定ファイルで実現する AWS IAM Identity Center のユーザー管理と開発チームへの委譲 / Delegating AWS IAM Identity Center User Management with a Simple DSL
yamaguchitk333
3
560
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
NW運用の工夫と発明
recuraki
1
760
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
AIに実況させる / AI Streamer
motemen
3
1.4k
Cloud Run を解剖して コンテナ監視を考える / Breaking Down Cloud Run to Rethink Container Monitoring
aoto
PRO
0
110
iOS/Androidで無限循環Carousel表現を考えてみる
fumiyasac0921
0
130
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Houtou.pm #1
papix
0
660
Contract One Dev Group 紹介資料
sansan33
PRO
0
6k
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
10
5.1k
継続戦闘能⼒
sansantech
PRO
0
220
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.4k
The Language of Interfaces
destraynor
158
25k
A Tale of Four Properties
chriscoyier
159
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Designing Experiences People Love
moore
142
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Designing for Performance
lara
608
69k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
Transcript
Three.jsで3Dぷわんを動かす PWA Night CONFERENCEサイト 2022/12/21 まぁし(知念)
株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし Twitter@chocodogmagic •
沖縄でリモートワーク/元・美容師 • 技術コミュニティ運営 ◦ PWA Night(東京)/ v-okinawa(沖縄) • Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/ アクセシビリティ/SEO/パフォーマンス改善/CMS • 最近のハマり:スプラトゥーン3(弓ウデマエS+17) • ポケモン スカーレット始めました
https://www.tam-tam.co.jp/
ぷわん
PWA Nightの公式キャラクター PWAN(ぷわん) https://conf2022.pwanight.jp/
None
はじめての3D対応(モデルデータはもらう) めちゃくちゃ参考にしたサイトその1 ・three.js doc(公式ドキュメント) https://threejs.org/docs/#manual/en/introduction/Creating-a-scene
はじめての3D対応(モデルデータはもらう) めちゃくちゃ参考にしたサイトその2 ・ICS MEDIA Three.js入門サイト https://ics.media/tutorial-three/
コード紹介 練習用のリポジトリ https://github.com/chinen-octtn/threeJsSample
3Dモデル動いた!!! 👏
まとめ • 光の加減が難しい(すぐ金属っぽくなる) • モデルデータを自作できたら実装のイメージがしやすそう ◦ Blenderとか触ってみるといいのかも • CSS/JSで動かすか、canvas内で動かすかを考えよう
実装者と確認者ですり合わせが何度も発生するので、 画面上で数値を調整するツールの導入がおすすめ(ただし工数・・・)
ありがとうございました! Twitter まぁし@chocodogmagic フォローしてね 平日9:00〜SpacesでWeb情報発信中! TAMで一緒にお仕事しませんか? ご依頼・各職種の採用も募集中