Question

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

我无法完成此操作...到目前为止，我能够成功将以下afame场景加载到浏览器中：

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

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

我试过了：
1.将a场景嵌套到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组件旨在删除全屏样式，允许您根据需要设置样式的样式/大小。

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

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

Answer 2

Don McCurdy，谢谢你指点我正确的方向。我终于能够改变场景窗口大小了。
这是完成此任务的代码。

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

如何将一个aframe场景嵌入div中

2 个答案: