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
230
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
140
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.9k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2.1k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
590
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.6k
frontend-conf-okinawa-2022
chinen
0
530
Other Decks in Technology
See All in Technology
20251027_マルチエージェントとは
almondo_event
1
440
Kubernetes self-healing of your workload
hwchiu
0
550
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
1
580
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
720
組織全員で向き合うAI Readyなデータ利活用
gappy50
1
660
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
460
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
SOTA競争から人間を超える画像認識へ
shinya7y
0
550
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
230
RemoteFunctionを使ったコロケーション
mkazutaka
1
120
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
430
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Mobile First: as difficult as doing things right
swwweet
225
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中