2016-12-01 8 views
1

要素に.OBJモデルを埋め込み、フルページキャンバスではなく特定の幅と高さに限定しようとしています。私はhttps://sketchfab.com/のヘッダーに埋め込まれた "シーン"を複製しようとしています。シーンのカメラがモデルの中心軸の周りをパンするようにしたいと思います(例のように)。divにaframeシーンを埋め込む方法

私は自分のブラウザにafameシーン以下、この達成...これまでのところ、私は成功した負荷にできる午前トラブルを抱えている:

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

しかし、私はシーンのサイズを変更することができませんdiv内またはキャンバス内に閉じ込められている(私はキャンバスが良いと思う?)。


は、私が試した:巣へ
1. A-シーンをDIVとサイズ、私はの一部ではなくなったと思い、私はまた、次のように試してみました

<div class="aframebox"><a-scene></a-scene></div>
2. CSSでdiv要素にバージョン0.3.0?
<a-scene canvas="height: 50; width: 50"></a-scene> 0.2.0 information


誰かが、私はそれを本当に感謝し、私はこれを行う方法を教えてください可能性がある場合、
ありがとうございました。

答えて

2

Aフレームのembeddedコンポーネントは、フルスクリーンスタイルを削除することを目的としており、必要に応じてキャンバスをスタイル/サイズ変更することができます。ここ

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

詳細:https://aframe.io/docs/0.3.0/components/embedded.html

1

ドン・マッカーディ、 は正しい方向に私を指してくれてありがとう。私は最終的にシーンウィンドウのサイズを変更することができました。
これを達成するためのコードは次のとおりです。

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; 
} 
関連する問題