Create a website using Spatial Web

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

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