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
160
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
320
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.7k
WWDC2023-Recap-LT
chinen
1
110
Web Push対応状況2023
chinen
0
500
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
130
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.3k
frontend-conf-okinawa-2022
chinen
0
420
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
350
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.5k
Other Decks in Technology
See All in Technology
XPを始める新人に伝えたい近道の鍵
nakasho
1
310
XP matsuri 2024 - 銀河英雄伝説に学ぶ
kawaguti
PRO
3
560
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
4
1.6k
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
390
Strict Concurrencyにしたらdeinitでクラッシュする話
0si43
0
120
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
3
310
Semantic Kernel の Agent 機能試してみた!
okazuki
1
130
HashHub会社案内「なぜ今、パブリックブロックチェーンに賭けるのか」
hashhub
3
75k
I tried the newly introduced certification "Applied Skills" on Microsoft Learn
mappie_kochi
0
130
【shownet.conf_】革新と伝統を融合したファシリティ
shownet
PRO
0
310
令和最新版 Perlコーディングガイド
anatofuz
4
3.5k
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
350
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Code Review Best Practice
trishagee
62
16k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Designing for humans not robots
tammielis
249
25k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Facilitating Awesome Meetings
lara
49
6k
Writing Fast Ruby
sferik
626
60k
Infographics Made Easy
chrislema
239
18k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中