如何以 DRY 方式复制 aframe-room-component?

How do you duplicate an aframe-room-component in a DRY fashion?

我正在尝试使用 aframe-room-component 创建许多建筑物。是否有比我当前使用的方法更干的方法来复制 rw-room 实体(字面上只是添加多个 rw-room。

我研究过在 index.js 中编写一个组件,但我对合并 aframe-room-component 感到困惑。

<rw-room outside="true" position="0 0 -10" material="color: #866; side: double">
        <rw-ceiling></rw-ceiling>
        <rw-floor></rw-floor>
        <rw-wall position="4 0 0"></rw-wall>
        <rw-wall position="4 0 4"></rw-wall>
        <rw-wall position="0 0 4"></rw-wall>
        <rw-wall position="0 0 0">
            <rw-doorhole id="holeA"></rw-doorhole>
            <rw-doorlink from="#holeA" to="#holeB" position="2.5 0 0"></rw-doorlink>
        </rw-wall>
      </rw-room>
      <rw-room outside="true" side="double" position="4 0 -2" material="color: #866; side: double">
          <rw-wall position=" 1 0  1"  side="double" material="color:#877; side: double">
              <rw-doorhole id="holeB"></rw-doorhole>
          </rw-wall>
      </rw-room>

      <rw-room outside="true" position="-3 0 -10" rotation="0 180 0" material="color: #866; side: double">
          <rw-ceiling></rw-ceiling>
          <rw-floor></rw-floor>
          <rw-wall position="4 0 0"></rw-wall>
          <rw-wall position="4 0 4"></rw-wall>
          <rw-wall position="0 0 4"></rw-wall>
          <rw-wall position="0 0 0">
              <rw-doorhole id="holeC"></rw-doorhole>
              <rw-doorlink from="#holeC" to="#holeD" position="2.5 0 0"></rw-doorlink>
          </rw-wall>
        </rw-room>
        <rw-room outside="true" side="double" position="4 0 -2" material="color: #866; side: double">
            <rw-wall position=" 1 0  1"  side="double" material="color:#877; side: double">
                <rw-doorhole id="holeD"></rw-doorhole>
            </rw-wall>
        </rw-room>

希望这足够清楚,提前谢谢你!

有像:

  • A-Frame 模板组件https://www.npmjs.com/package/aframe-template- 组件。
  • 或者有一个组件以字符串形式转储到 innerHTML 中,使用正则表达式或字符串替换构建模板。可以选择通过 <template> 标签定义字符串。