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
120
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
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.1k
WWDC2023-Recap-LT
chinen
1
86
Web Push対応状況2023
chinen
0
430
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
350
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
310
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.4k
Other Decks in Technology
See All in Technology
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
140
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
960
M&A戦略を支えるデータマネジメント (MIDAS Tech Study #16 GENDA Komiyama)
kommy339
0
100
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
450
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
590
Cloud Service Mesh に触れ合う
phaya72
1
180
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.2k
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
150
Grafana x PagerDuty Better Together
jacopen
1
250
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
400
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
400
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
KATA
mclloyd
16
12k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Statistics for Hackers
jakevdp
790
220k
Automating Front-end Workflow
addyosmani
1357
200k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How STYLIGHT went responsive
nonsquared
92
4.8k
A designer walks into a library…
pauljervisheath
201
23k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中