如何将帧场景嵌入 div

Question

我正在尝试将 .OBJ 模型嵌入到一个元素中，以便将其限制为特定的宽度和高度，而不是整个页面 canvas。我正在尝试复制嵌入到 https://sketchfab.com/ 的 header 中的 "scene"。我希望我的场景中的相机围绕模型的中心轴平移（就像在示例中一样）。

我在完成此操作时遇到了问题...到目前为止，我能够将以下著名场景成功加载到我的浏览器中：

<a-scene>
  <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
</a-scene>

但我无法调整场景大小并将其限制在 div 或 canvas 内（我认为 canvas 会更好？）。

我试过了：
1. 将 a-scene 嵌套到 div 中，并在 CSS

中调整 div 的大小

<div class="aframebox"><a-scene></a-scene></div>
2. 我也尝试过以下我猜它不再是版本 0.3.0 的一部分？
<a-scene canvas="height: 50; width: 50"></a-scene> 0.2.0 information

如果有人可以让我知道如何做到这一点，我将不胜感激，
谢谢。

Answer 1

A-Frame 的 embedded 组件旨在删除全屏样式，允许您根据需要 style/size canvas。

<a-scene embedded></a-scene>

此处有更多详细信息：https://aframe.io/docs/0.3.0/components/embedded.html

Answer 2

唐·麦柯迪，谢谢你给我指明了正确的方向。我终于能够改变场景 window 的大小。
这是完成此操作的代码。

HTML:

<a-scene class="aframebox" embedded>

    <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
    <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

    <a-sky color="#ECECEC"></a-sky>
    <a-entity position="0 0 3.8">
        <a-camera></a-camera>
    </a-entity>
</a-scene>

CSS:

.aframebox {
height: 500px;
width: 500px;
}

如何将帧场景嵌入 div

How to embed an aframe scene into a div

aframe