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
130
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.8k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
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
520
Other Decks in Technology
See All in Technology
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.8k
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.2k
社内お問い合わせBotの仕組みと学び
nish01
1
530
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
4k
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
590
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
1
190
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
170
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
310
Trust as Infrastructure
bcantrill
1
370
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Gamification - CAS2011
davidbonilla
81
5.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimizing for Happiness
mojombo
379
70k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How GitHub (no longer) Works
holman
315
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中