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

Create a website using Spatial Web

Avatar for Akio Itaya Akio Itaya
June 18, 2025
Programming
440
0

Create a website using Spatial Web

visionOS 26 向けのウェブサイトを作ろう！
https://mercari.connpass.com/event/352787/

Avatar for Akio Itaya

Akio Itaya

June 18, 2025

More Decks by Akio Itaya

See All by Akio Itaya
Building a Meta Ray-Ban display app
Avatar for Akio Itaya akkeylab
0
190
What If Your App Could Debug Itself?
Avatar for Akio Itaya akkeylab
0
92
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
200
Bringing Spatial Web to E-Commerce
Avatar for Akio Itaya akkeylab
0
110
Learn CPU architecture with Assembly
Avatar for Akio Itaya akkeylab
1
2.2k
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
1.2k
How to handle 3D content on Android XR
Avatar for Akio Itaya akkeylab
0
260
How to build visionOS apps using Windows
Avatar for Akio Itaya akkeylab
0
240
How to build visionOS apps using Persona
Avatar for Akio Itaya akkeylab
1
510

Other Decks in Programming

See All in Programming
이 함수, 실패하면 어떻게 되나요? null부터 Rich Errors까지, Kotlin 에러 처리 15년
Avatar for TaeHee Lee haeti2
0
130
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
9.9k
Seeing Through Serverless: Observability for AWS Lambda with ADOT and CloudWatch Application Signals
Avatar for shiro seike seike460
PRO
1
120
Building an Out-of-Order CPU
Avatar for Latte72 latte72
0
650
高専キャリア LT 発表内容
Avatar for Crysta1221 crysta1221
6
5.5k
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
Avatar for Shota Nemoto shorty5121
0
810
ハーネス設計入門 〜プロンプト、コンテキストの次〜
Avatar for kinopee kinopeee
53
35k
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
9
3.7k
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
0
170
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
110
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
130
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
Avatar for akase244 akase244
0
110

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
270
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
920
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
570
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.7k
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
260
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
300
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k

Transcript

  1. AKKEY / AKIO ITAYA visionOS 26 ޲͚ͷ΢ΣϒαΠτΛ࡞Ζ͏ʂ Recap of WWDC25

    Mercari Spatial Web

  2. جૅฤ

  3. <body> <model src="bird.usdz"> <img src="bird.png"> </model> </body>

  4. <body> <model src="bird.usdz"> <img src="bird.png"> </model> </body> Apple͸ <model> λάͷ࢓༷Λ


    ඪ४ԽஂମʢW3CʣʹఏҊத

  5. https://immersive-web.github.io/model-element/

  6. <body> <model src="bird.usdz"> <img src="bird.png"> </model> </body> ඇରԠϒϥ΢βͰ
 දࣔ͢Δը૾

  7. <body> <model src=“bird.usdz” stagemode="orbit" > <img src="bird.png"> </model> </body> ࠨӈ΁ͷճస͕


    ՄೳʹͳΔ ·ͣ͸λοϓδΣενϟʔΛ௥Ճͯ͠ɺ
 ΠϕϯτΛݕ஌ͨ͠Β֯౓Λܭࢉͯ͠…
 ͱ͍࣮ͬͨ૷͕ෆཁʂ

  8. <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> ศརͳ൓໘ɺҰఆͷ੍໿͕͋Δ

  9. <body> <model src=“bird.usdz” stagemode="orbit" loop autoplay> <img src="bird.png"> </model> </body>

    Ξχϝʔγϣϯʹ΋ରԠ

  10. <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ʣ

  11. Ԡ༻ฤ

  12. <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> αϙʔτͷ༗ແΛ֬ೝ

  13. <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> ಡΈࠐΈεςʔλε ΋औಘՄೳ

  14. <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>

  15. ࣮ԋ

  16. github.com/AkkeyLab/spatial-web
 Skydancer

  17. WWDC25 What’s new for the spatial web https://developer.apple.com/videos/play/wwdc2025/237

  18. Thank you !!