如何将社区/第三方组件安装到我的 A-Frame 场景中？答案

【问题标题】：How do I install a community/third-party component into my A-Frame scene?如何将社区/第三方组件安装到我的 A-Frame 场景中？
【发布时间】：2017-02-21 22:56:19
【问题描述】：

我想使用像 shadow 这样的组件，来自 aframe-extras https://github.com/donmccurdy/aframe-extras/tree/master/src/shadows

如何在我的 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>

【问题讨论】：

标签： aframe

【解决方案1】：

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

要在场景外部包含 JS 文件，我们可以只使用几个允许 CORS 的 CDN 服务：rawgit.com 或 unpkg.com。脚本标签在<head>之后的aframe

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

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

【讨论】：