Create a website using Spatial Web

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

جૅฤ

<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 !!

Create a website using Spatial Web

Create a website using Spatial Web

Akio Itaya

More Decks by Akio Itaya

Other Decks in Programming

Featured

Transcript

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

جૅฤ

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

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

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

<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

Ԡ༻ฤ

<body> <model src="bird.usdz" id="3d-model" stagemode="orbit" loop autoplay> <img src="bird.png" alt="bird

<body> <model src="bird.usdz" id="3d-model" stagemode="orbit" loop autoplay> <img src="bird.png" alt="bird

<body> <div id="loading"> <div class="spinner"></div> <p>Loading 3D model...</p> </div> <model

࣮ԋ

github.com/AkkeyLab/spatial-web  Skydancer

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

Thank you !!