本文详解在 astro 框架中集成 a-frame 的关键步骤，重点解决因脚本加载机制差异导致的空白页问题，通过添加 is:inline 属性确保 a-frame 运行时正确初始化。
本文详解在 astro 框架中集成 a-frame 的关键步骤，重点解决因脚本加载机制差异导致的空白页问题，通过添加 is:inline 属性确保 a-frame 运行时正确初始化。
Astro 默认会对 <script> 标签进行静态优化（如预加载、延迟执行或服务端剥离），而 A-Frame 依赖于 DOM 就绪后立即注册自定义元素并初始化 WebGL 上下文。若直接引入 A-Frame 脚本而不显式声明执行时机，Astro 可能将其异步化或移除，导致 <a-scene> 无法解析、页面卡在白屏或加载状态——这正是你遇到“loading screen，nothing was happening”的根本原因。</script>
✅ 正确做法是：强制 Astro 内联注入 A-Frame 脚本，使用 is:inline 指令确保脚本在 HTML 渲染时同步执行，不被优化或延迟：
--- // index.astro --- <script src="https://aframe.io/releases/1.5.0/aframe.min.js" is:inline></script><a-scene xr-mode-ui="enabled: false"><a-sky src="/space2.png" rotation="0 0 0" transparent="true"></a-sky><a-entity camera look-controls="enabled: false" wasd-controls="enabled: false"></a-entity></a-scene>
⚠️ 注意事项：
- src="/space2.png" 使用根相对路径（而非 public/space2.png），因 Astro 会自动将 public/ 下资源映射至 /；
- transparent="true" 是标准布尔属性写法（非 enabled:true）；
- 若需动态控制场景（如旋转天空盒），建议搭配 <script is:inline> 块操作 DOM，例如：<pre class="brush:php;toolbar:false;"><script is:inline> document.addEventListener('DOMContentLoaded', () => { const sky = document.getElementById('backgroundRotation'); if (sky) sky.setAttribute('rotation', '0 10 0'); }); </script>
- 不推荐使用 npx astro add aframe —— A-Frame 是客户端库，非 Astro 集成（integration），无服务端逻辑，无需适配器。
? 总结：Astro 与 A-Frame 完全兼容，核心在于理解 Astro 的脚本处理策略。is:inline 是打通二者的关键开关；它绕过 Astro 的默认脚本优化，让 A-Frame 在浏览器中按预期启动。完成此配置后，你的 360° 背景即可在 Astro 页面中稳定渲染，并为后续实现跨页平滑过渡（如配合 Astro’s prefetch 或自定义动画）打下坚实基础。
