How to embed an aframe scene into a div

问题

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>

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?).

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. I also tried to following which I guess is no longer part of version 0.3.0?
<a-scene canvas="height: 50; width: 50"></a-scene> 0.2.0 information

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

回答1:

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>

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

回答2:

Don McCurdy, Thank you for pointing me in the right direction. I was able to finally change the scene window size.
Here is the code to accomplish this.

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

来源：https://stackoverflow.com/questions/40902305/how-to-embed-an-aframe-scene-into-a-div

标签

aframe