如何使 HTML 网格的 a-frame 部分占据父 div 的宽度？

Question

我已经开始尝试 A-Frame，并且我使用他们的模型查看器示例作为起点。我试图让这个模型查看器成为 html 网站的一部分，它会成为网格的一小部分：

<body>
    <div class="container">
      <div class="text-part">
        Some text here
      </div>
      <div class="a-frame">
        <a-scene
          renderer="colorManagement: true;"
          info-message="htmlSrc: #messageText"
          model-viewer="gltfModel: #triceratops; title: Triceratops"
        >
          <a-assets>
            <!--
      Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
      Model author: https://sketchfab.com/VapTor
      Model license: Sketcfab Standard
    -->
            <a-asset-item
              id="triceratops"
              src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
              response-type="arraybuffer"
              crossorigin="anonymous"
            ></a-asset-item>

            <a-asset-item
              id="reticle"
              src="https://cdn.aframe.io/examples/ar/models/reticle/reticle.gltf"
              response-type="arraybuffer"
              crossorigin="anonymous"
            ></a-asset-item>

            <img
              id="shadow"
              src="https://cdn.glitch.com/20600112-c04b-492c-8190-8a5ccc06f37d%2Fshadow.png?v=1606338852399"
            />
            <a-asset-item id="messageText" src="message.html"></a-asset-item>
          </a-assets>
        </a-scene>
      </div>
    </div>
  </body>

在 css 中，我已将容器设置为具有以下样式：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

但是，这并没有像预期的那样工作，因为模型查看器仍然占用整个页面并且不是容器的一部分。我该如何解决这个问题并让模型查看器占用父 div 元素给定宽度的 space。这是我编辑的 example 的代码。

Answer 1

如果您想在某些自定义布局中嵌入场景，可以使用 embedded component:

<div class="a-frame">
  <a-scene embedded>
    <!-- scene -->
  </a-scene>
</div>

喜欢in this fiddle（网格布局）。

如何使 HTML 网格的 a-frame 部分占据父 div 的宽度？

How to make an a-frame part of an HTML grid and take up the width of the parent div?

html

javascript

css

aframe