A-Frame 设计模式动态场景生成与场景调整大小答案

【问题标题】：A-Frame Design Pattern Dynamic Scene Generation with Scene re-sizingA-Frame 设计模式动态场景生成与场景调整大小
【发布时间】：2017-09-07 02:45:31
【问题描述】：

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

但是，尝试采用“嵌入式”大小调整逻辑（参见：https://aframe.io/docs/0.6.0/components/embedded.html）并未成功；场景未显示；尽管在 FireFox 调试模式下检查元素显示它的属性已更改。

存在子 canvas 元素，但其宽度/高度和样式属性未反映对父 a-scene 所做的更改。

这是从上述示例中采用的脚本代码，用于尝试调整 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")

【问题讨论】：

标签： aframe

【解决方案1】：

玩了一会儿之后，解决方案是设置 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");

【讨论】：