Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Web×3DのUI表現を模索してみる話

Avatar for nisshi.dev | にっし nisshi.dev | にっし
April 08, 2023
Technology
0
130

 Web×3DのUI表現を模索してみる話

Avatar for nisshi.dev | にっし

nisshi.dev | にっし

April 08, 2023
Tweet

More Decks by nisshi.dev | にっし

See All by nisshi.dev | にっし
高専ロボコンから始まった私のもの創り
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
62
WebXRとは何か
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
36
nisshi.dev 自己紹介スライド v0.1
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
59
「孤独からの解放」 を目指してShareBrowseを開発している話
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
260
Code_for_Yamaguchiの今までとこれから
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
1k
自己実現ピッチ
Avatar for nisshi.dev | にっし nishidayoshikatsu
1
88
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
Avatar for nisshi.dev | にっし nishidayoshikatsu
1
850

Other Decks in Technology

See All in Technology
AI駆動開発の実践とその未来
Avatar for Ikko Eltociear Ashimine eltociear
0
110
ExpoのインダストリーブースでみたAWSが見せる製造業の未来
Avatar for 濱田孝治 hamadakoji
0
140
シニアソフトウェアエンジニアになるためには
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
3
170
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
Avatar for 1ft-seabass 1ftseabass
PRO
0
390
LLM-Readyなデータ基盤を高速に構築するためのアジャイルデータモデリングの実例
Avatar for Kashira kashira
0
260
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
Avatar for maimyyym maimyyym
2
1.7k
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
300
AWSセキュリティアップデートとAWSを育てる話
Avatar for cm-usuda-keisuke cmusudakeisuke
0
290
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.4k
Challenging Hardware Contests with Zephyr and Lessons Learned
Avatar for misoji engineer iotengineer22
0
230
マイクロサービスへの5年間 ぶっちゃけ何をしてどうなったか
Avatar for Tomohiro Hashidate joker1007
8
5k
AIの長期記憶と短期記憶の違いについてAgentCoreを例に深掘ってみた
Avatar for やくも yakumo
4
380

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
710
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.5k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
Side Projects
Avatar for Sacha Greif sachag
455
43k

Transcript

  1. None

  2. アジェンダ Splineについて web×3DのUI表現一覧 まとめ 自己紹介 Web上で動作する3Dモデルを Splineというサービスで作って みる Reactで読み込み、実際のWeb ページに表示してみる

    話すこと

  3. 自己紹介 -その1- nisshi.dev | にっし ＠nsd244 「孤独からの解放を目指し、デジタル上に新しい体 験価値をweb×3Dの技術で創造する🔥」をテーマに もの創りしているwebエンジニア サービス開発やOSS活動やコミュニティ運営をして

    いる 「好きで生きる」 「おもしろ駆動開発」

  4. Splineとは Web用に簡単に3DCGを作成することができるサービス（Web・Desktopアプリ対応） 出典：https://spline.design/

  5. Splineとは 基本的にはWeb出力用のサービスのため、Blenderの代わりではない 出典：https://spline.design/

  6. なぜSplineか 公式がReact対応ライブラリを用意してくれてる！簡単！ 出典：https://github.com/splinetool/react-spline

  7. Web×3DのUI表現一覧 -3Dテキスト- https://my.spline.design/web3dslide-72ecdaff609510c9a2ef73bbe637e3b3/ 既存の表現をよりリッチにする アニメーションがあると、ワクワクする表現になる ただ、逆に見にくくなってしまう場面もあるのでここぞというポイントで出すのが大 事

  8. Web×3DのUI表現一覧 -3Dルーム- https://my.spline.design/miniroomcopy-afc3c56277ee1cf31f638fb790c6fee5/ 空間をwebページでよりリッチに再現 もしアニメーションがあれば、商品や利用例などがわかりやすくなる 自己表現がよりカッコよくできる

  9. Web×3DのUI表現一覧 -webページ組み込み- https://deploy-preview-4--nisshi-dev.netlify.app/

  10. まとめ 既存のWebサイトでのUI表現をよりリッチにできる！ ここぞという場面で使うのがおすすめ！ めちゃ簡単にWeb出力ができるSplineはいいぞ 後日、この3D表現を盛り込んだポートフォリオサイトを公 開予定...！！

  11. None