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
140
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 2023
chinen
1
300
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.5k
WWDC2023-Recap-LT
chinen
1
100
Web Push対応状況2023
chinen
0
470
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.3k
frontend-conf-okinawa-2022
chinen
0
380
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
330
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.4k
Other Decks in Technology
See All in Technology
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
380
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
AWSでRAGを作る法方
sonoda_mj
1
140
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
Featured
See All Featured
Code Review Best Practice
trishagee
58
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Infographics Made Easy
chrislema
238
18k
Docker and Python
trallard
37
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Producing Creativity
orderedlist
PRO
340
39k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Making Projects Easy
brettharned
111
5.7k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Facilitating Awesome Meetings
lara
46
5.8k
How GitHub (no longer) Works
holman
305
140k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中