如何将 community/third-party 组件安装到我的 A-Frame 场景中?

How do I install a community/third-party component into my A-Frame scene?

我想使用来自 aframe-extras https://github.com/donmccurdy/aframe-extras/tree/master/src/shadows

shadow 这样的组件

如何在我的 A-Frame 场景中使用或安装外部组件?

<html>
  <head>
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box color="red" position="0 0 -4"></a-box>
    </a-scene>
  </body>
</html>

通常,GitHub 上发布的 A-Frame 组件遵循相同的模板。在这种情况下,影子组件的 JS 文件位于 https://github.com/donmccurdy/aframe-extras/blob/master/dist/aframe-extras.shadows.js ... 根 dist/ 文件夹中。

要从我们的场景外部包含 JS 文件,我们可以只使用几个允许 CORS 的 CDN 服务:rawgit.comunpkg.com。 aframe

之后 <head> 中的脚本标记
<html>
  <head>
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
    <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.shadows.js"></script>
    <!-- or <script src="https://unpkg.com/aframe-extras/dist/aframe-extras.shadow.js"></script>
  </head>
</html>

然后只需使用 HTML

中的组件
<a-scene>
  <a-box color="red" position="0 0 -4" shadow="cast: true; receive: true"></a-box>
  <a-light shadow-light="cast-shadow: true"></a-light>
</a-scene>

所以只需两步:为组件添加脚本标签,使用组件。