Aフレームデザインパターンシーンリサイジングを使用した動的シーン生成

Question

この例では、aシーンをDOMに動的に追加する方法を示しています。 （https://codepen.io/gftruj/pen/JJoENb）。実行時にJavaScriptに渡されるコンテナ（DIVなど）にプログラムでコンテンツを構築するアプリケーションをサポートするためのデザインパターンを完全に補完します。

しかし、 '埋め込み'サイズ変更ロジック（https://aframe.io/docs/0.6.0/components/embedded.html参照）を採用しようとする試みは成功していません。シーンは表示されません。 FireFoxデバッグモードの要素を調べても、属性が変更されていることがわかります。

子キャンバス要素が存在するが、幅/高さとスタイルで、親シーンに加えられた変更を反映していない属性。ここ

がシーンサイズを変更する試みにおいて使用留意例から採用したスクリプトコードは次のとおりこれをビットを再生した後

var body = document.body; 
var scene = document.createElement("a-scene"); 

//comment out following 3 lines to see box 
scene.setAttribute("embedded",true); 
scene.setAttribute("height","300"); 
scene.setAttribute("width","50%"); 


var camera = document.createElement("a-entity"); 
    camera.setAttribute("camera", "userHeight: 1.6"); 
    camera.setAttribute("look-controls", ""); 
    camera.setAttribute("wasd-controls", ""); 

var box = document.createElement("a-box"); 
    box.setAttribute("width", 1); 
    box.setAttribute("height", 1); 
    box.setAttribute("depth", 1); 
    box.setAttribute("color", "#0cf"); 
    box.setAttribute("position", "0 1 -3"); 

scene.appendChild(camera); 
scene.appendChild(box); 
body.appendChild(scene); 
box.setAttribute("rotation","0 45 45") 

Answer 1

を、溶液がシーンを設定しますのスタイル属性とNOT シーンの幅/高さ属性：

var body = document.body; 
var scene = document.createElement("a-scene"); 

scene.setAttribute("embedded",true); 
scene.style.height="300px"; 
scene.style.width="50%"; 


var camera = document.createElement("a-entity"); 
    camera.setAttribute("camera", "userHeight: 1.6"); 
    camera.setAttribute("look-controls", ""); 
    camera.setAttribute("wasd-controls", ""); 

var box = document.createElement("a-box"); 
    box.setAttribute("width", 1); 
    box.setAttribute("height", 1); 
    box.setAttribute("depth", 1); 
    box.setAttribute("color", "#0cf"); 
    box.setAttribute("position", "0 1 -3"); 

scene.appendChild(camera); 
scene.appendChild(box); 
body.appendChild(scene); 
box.setAttribute("rotation","0 45 45"); 

を