Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Avatar for nisshi.dev | にっし

nisshi.dev | にっし

April 08, 2023

More Decks by nisshi.dev | にっし

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

Other Decks in Technology

See All in Technology
型落ちシンクライアント端末のPoEモジュールを自作したかった話
Avatar for Takuto Nagami logica0419
0
380
AI・HPC開発を支えるGPU環境の新しい選択肢 液冷GPUシステム「AquSys」の取り組み
Avatar for GPU UNITE gpuunite_official
0
230
生成 AI の基礎 〜 サンプル実装で学ぶ基本原理
Avatar for Etsuji Nakai enakai00
7
4.6k
同じWAFが、攻撃の“形”は弾く── 正当な“形”の不正は通す
Avatar for kuroneko kuroneko13
0
270
私がブラウザを自作したくなった理由
Avatar for Miyamoto Naoyuki supurazako
1
280
AIで変わるエンジニアの働き方（仮）
Avatar for naoinaoi naoinaoi
0
480
MIXIで活躍できるエンジニアを 若手社員目線で考えてみる
Avatar for MIXI ENGINEERS mixi_engineers
PRO
0
140
AI画像認識を活用したゲーム内決済処理検証の自動化
Avatar for gree_tech gree_tech
PRO
0
360
Kiro Crew で始める マルチエージェント開発
Avatar for Kazuki Miura miu_crescent
PRO
0
170
作って理解するCoding Agent 〜フレームワークに頼らないピュア Python での実装〜
Avatar for Takanobu Nozawa takapy
3
1.1k
dbt in Microsoft Fabric
Avatar for Ryoma Nagata ryomaru0825
0
200
わたしが知り合いゼロの勉強会に 行けるようになるまで
Avatar for R-524 r5ni4
1
220

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
780
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.8k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
It's Worth the Effort
Avatar for 3n 3n
188
29k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
280
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
390

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