有没有办法将A-Frame集成到Astro中?

问题描述 投票:0回答:1

我使用 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
html aframe astrojs
1个回答
1
投票

经过更多研究,我在 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>
© www.soinside.com 2019 - 2024. All rights reserved.