如何将Aframe场景嵌入div [英] How to embed an aframe scene into a div

问题描述

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

I am trying to embed a .OBJ model into an element so that it is confined to a specific width and height, instead of a full page canvas. I'm trying to replicate the "scene" embedded into the header of https://sketchfab.com/. I would like the camera in my scene to pan round the central axis of the model(just like in the example).

我很难做到这一点...到目前为止，我已经能够成功将以下名人场景载入我的浏览器：

I'm having trouble accomplishing this... so far, I am able to successful load the following afame scene into my browser:

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

但是我无法在div或画布内调整场景的大小和范围（我认为画布会更好？）。

But I can't get the scene to be resized and confined within a div or within a canvas (i think canvas would be better?).

我尝试过：

1.将a-场景嵌套到div和size中CSS中的div

I tried:
1. to nest the a-scene into a div and size the div in CSS

< div class = aframebox>< a-scene>< / a-scene>< / div>


2.我还尝试遵循它，我想它不再是0.3.0版的一部分？


< a-scene canvas = height：50; width：50>< / a-scene>
0.2.0信息

如果有人可以让我知道如何做到这一点，我将非常感谢，

谢谢。

If someone could please let me know how to do this I would really appreciate it,
Thank you.

推荐答案

A框架的嵌入式组件旨在删除全屏样式，从而使您可以

A-Frame's embedded component is intended to remove fullscreen styles, allowing you to style/size the canvas as needed.

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

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

More details here: https://aframe.io/docs/0.3.0/components/embedded.html

这篇关于如何将Aframe场景嵌入div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！