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
360
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
Learn CPU architecture with Assembly
akkeylab
1
1.4k
Porting a visionOS App to Android XR
akkeylab
0
1k
How to handle 3D content on Android XR
akkeylab
0
160
How to build visionOS apps using Windows
akkeylab
0
180
How to build visionOS apps using Persona
akkeylab
1
390
Summary - Introducing enterprise APls for visionOS
akkeylab
0
520
Apple Vision Pro trial session
akkeylab
0
320
How to support Privacy Manifest
akkeylab
0
430
Let's make it compatible with visionOS!
akkeylab
0
310
Other Decks in Programming
See All in Programming
チームの境界をブチ抜いていけ
tokai235
0
220
CSC509 Lecture 08
javiergs
PRO
0
250
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
330
iOSでSVG画像を扱う
kishikawakatsumi
0
170
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
110
Ktorで簡単AIアプリケーション
tsukakei
0
100
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
510
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
Cursorハンズオン実践!
eltociear
2
1.2k
Developer Joy - The New Paradigm
hollycummins
1
360
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
Automating Front-end Workflow
addyosmani
1371
200k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
We Have a Design System, Now What?
morganepeng
53
7.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Being A Developer After 40
akosma
91
590k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Typedesign – Prime Four
hannesfritz
42
2.8k
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 !!