Aframe A-Frame设计模式动态场景生成及场景大小调整

这个例子很好地说明了如何动态地向DOM添加一个a-scene。 (). 它完美地补充了一种设计模式，支持一种应用程序，该应用程序将以编程方式将内容构建到运行时传递给JavaScript的容器（如DIV）中

然而，尝试采用“嵌入式”大小调整逻辑（见：）并未成功；现场没有显示；虽然在FireFox调试模式下检查元素显示它在那里，属性已更改

存在子画布元素，但其宽度/高度和样式属性不反映对父A场景所做的更改

下面是从尝试调整a-scene大小时使用的著名示例中采用的脚本代码：

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")

---

玩了一会儿后，解决方案是设置a-scene的样式属性，而不是a-scene的宽度/高度属性：

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");