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
170
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
53
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2k
MTDDC Meetup TOKYO 2023
chinen
2
350
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.8k
WWDC2023-Recap-LT
chinen
1
130
Web Push対応状況2023
chinen
0
530
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
160
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.4k
frontend-conf-okinawa-2022
chinen
0
460
Other Decks in Technology
See All in Technology
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
480
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
MLOps の現場から
asei
6
640
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
150
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
530
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
180
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
230
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
530
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
120
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The Cult of Friendly URLs
andyhume
78
6.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Fireside Chat
paigeccino
34
3.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Optimizing for Happiness
mojombo
376
70k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
How STYLIGHT went responsive
nonsquared
95
5.2k
Music & Morning Musume
bryan
46
6.2k
Writing Fast Ruby
sferik
628
61k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中