我使用 a-frame 创建了一个具有 360 度背景的网站。由于我想在不同页面之间进行平滑过渡,因此我尝试在 Astro-Framework 中重写代码,但遇到了一些困难。
有没有办法在astro中使用a-frame?
整个 asto 文件系统已经设置完毕,所以我想我可以简单地将之前的 html 添加到
index.astro
文件中。
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene xr-mode-ui="enabled: false">
<a-sky id="backgroundRotation" src="public/space2.png" rotation ="0 0 0" transparent="enabled:true"></a-sky>
<a-entity camera look-controls="enabled: false" wasd-controls="enabled: false"></a-entity>
</a-scene>
</body>
但是我遇到了加载屏幕。什么都没发生。
我浏览了文档并找到了关于如何将其他框架集成到 Astro 中的指南。但A-frame并没有被列为官方集成,所以我进一步搜索。在 a-frame 文档上有一个关于如何使用 npm 安装 aframe 的指南,所以我在终端中尝试了这个:
npx astro add aframe
⚠ aframe is not an official Astro package. Use at your own risk!
√ Continue? ... yes
✖ aframe doesn't appear to be an integration or an adapter. Find our official integrations at https://astro.build/integrations
经过更多研究,我在 a-frame git 上找到了问题的解决方案。由于某种原因,脚本标签内部必须有一个 is:inline。
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js" is:inline></script>
</head>
<body>
<a-scene xr-mode-ui="enabled: false">
<a-sky id="backgroundRotation" src="public/space2.png" rotation ="0 0 0" transparent="enabled:true"></a-sky>
<a-entity camera look-controls="enabled: false" wasd-controls="enabled: false"></a-entity>
</a-scene>
</body>