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
Create a website using Spatial Web
Search
Akio Itaya
June 18, 2025
Programming
0
310
Create a website using Spatial Web
visionOS 26 向けのウェブサイトを作ろう!
https://mercari.connpass.com/event/352787/
Akio Itaya
June 18, 2025
Tweet
Share
More Decks by Akio Itaya
See All by Akio Itaya
Porting a visionOS App to Android XR
akkeylab
0
240
How to handle 3D content on Android XR
akkeylab
0
69
How to build visionOS apps using Windows
akkeylab
0
160
How to build visionOS apps using Persona
akkeylab
1
340
Summary - Introducing enterprise APls for visionOS
akkeylab
0
500
Apple Vision Pro trial session
akkeylab
0
300
How to support Privacy Manifest
akkeylab
0
420
Let's make it compatible with visionOS!
akkeylab
0
290
Let's Join the Android community!
akkeylab
0
190
Other Decks in Programming
See All in Programming
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
2k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
720
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
260
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
120
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
490
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
PipeCDのプラグイン化で目指すところ
warashi
1
250
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Site-Speed That Sticks
csswizardry
10
680
Building an army of robots
kneath
306
45k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Unsuck your backbone
ammeep
671
58k
Designing for humans not robots
tammielis
253
25k
Six Lessons from altMBA
skipperchong
28
3.9k
Facilitating Awesome Meetings
lara
54
6.4k
A Tale of Four Properties
chriscoyier
160
23k
Designing for Performance
lara
610
69k
Speed Design
sergeychernyshev
32
1k
Transcript
AKKEY / AKIO ITAYA visionOS 26 ͚ͷΣϒαΠτΛ࡞Ζ͏ʂ Recap of WWDC25
Mercari Spatial Web
جૅฤ
<body> <model src="bird.usdz"> <img src="bird.png"> </model> </body>
<body> <model src="bird.usdz"> <img src="bird.png"> </model> </body> Apple <model> λάͷ༷Λ
ඪ४ԽஂମʢW3CʣʹఏҊத
https://immersive-web.github.io/model-element/
<body> <model src="bird.usdz"> <img src="bird.png"> </model> </body> ඇରԠϒϥβͰ දࣔ͢Δը૾
<body> <model src=“bird.usdz” stagemode="orbit" > <img src="bird.png"> </model> </body> ࠨӈͷճస͕
ՄೳʹͳΔ ·ͣλοϓδΣενϟʔΛՃͯ͠ɺ ΠϕϯτΛݕͨ͠Β֯Λܭࢉͯ͠… ͱ͍࣮͕ͬͨෆཁʂ
<body> <model src=“bird.usdz” stagemode="orbit" id="3d-model"> <img src="bird.png"> </model> <script> const
model = document.getElementById('3d-model'); function turnRight() { const matrix = model.entityTransform; const newMatrix = matrix.rotateAxisAngle(0, 1, 0, 90); model.entityTransform = newMatrix; } </script> </body> ศརͳ໘ɺҰఆͷ੍͕͋Δ
<body> <model src=“bird.usdz” stagemode="orbit" loop autoplay> <img src="bird.png"> </model> </body>
ΞχϝʔγϣϯʹରԠ
<body> <link rel="spatial-backdrop" href="sky.usdz"> <model src=“bird.usdz” stagemode="orbit" loop autoplay> <img
src="bird.png"> </model> </body> Website EnvironmentsʢBETAʣ
Ԡ༻ฤ
<body> <model src="bird.usdz" id="3d-model" stagemode="orbit" loop autoplay> <img src="bird.png" alt="bird
image"> </model> <script> const model = document.getElementById('3d-model'); if (window.HTMLModelElement) { model.ready.then(() => { // ಡΈࠐΈྃ }).catch(() => { // ಡΈࠐΈࣦഊ }); } else { // ඇରԠϒϥβ } </script> </body> <model> αϙʔτͷ༗ແΛ֬ೝ
<body> <model src="bird.usdz" id="3d-model" stagemode="orbit" loop autoplay> <img src="bird.png" alt="bird
image"> </model> <script> const model = document.getElementById('3d-model'); if (window.HTMLModelElement) { model.ready.then(() => { // ಡΈࠐΈྃ }).catch(() => { // ಡΈࠐΈࣦഊ }); } else { // ඇରԠϒϥβ } </script> </body> ಡΈࠐΈεςʔλε औಘՄೳ
<body> <div id="loading"> <div class="spinner"></div> <p>Loading 3D model...</p> </div> <model
src="bird.usdz" id="3d-model" stagemode="orbit" loop autoplay> <img src="bird.png" alt="bird image"> </model> <script> const model = document.getElementById('3d-model'); const loading = document.getElementById('loading'); if (window.HTMLModelElement) { model.ready.then(() => { loading.style.display = 'none'; }).catch(() => { loading.innerText = "Failed to load model."; }); } else { loading.style.display = 'none'; } </script> </body>
࣮ԋ
github.com/AkkeyLab/spatial-web Skydancer
WWDC25 What’s new for the spatial web https://developer.apple.com/videos/play/wwdc2025/237
Thank you !!