div에 aframe 장면을 포함하는 방법

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 class="aframebox"><a-scene></a-scene></div>
2. CSS의 사업부로 버전 0.3.0?

누군가가 나에게 내가 정말 감사하겠습니다이 작업을 수행하는 방법을 알려 주시기 바랍니다 수 있다면
<a-scene canvas="height: 50; width: 50"></a-scene> 0.2.0 information ,
감사합니다.

Answer 1

A 프레임의 embedded 구성 요소는 전체 화면 스타일을 제거하기위한 것으로, 필요에 따라 캔버스의 스타일을 지정하거나 크기를 조정할 수 있습니다. 여기

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

자세한 내용 : https://aframe.io/docs/0.3.0/components/embedded.html

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