如何将帧场景嵌入到 div 中答案

【问题标题】：How to embed an aframe scene into a div如何将帧场景嵌入到 div 中
【发布时间】：2016-12-02 07:35:22
【问题描述】：

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

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

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

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

我试过了：
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

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

【问题讨论】：

标签： aframe

【解决方案1】：

A-Frame 的embedded 组件旨在移除全屏样式，允许您根据需要设置画布的样式/大小。

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

【讨论】：

【解决方案2】：

唐·麦柯迪，感谢您为我指明正确的方向。我终于能够改变场景窗口的大小。
这是完成此操作的代码。

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

【讨论】：