Question

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

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

存在子画布元素，但宽度/高度和样式属性不反映对父 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")

Answer 1

稍微玩一下后，解决方法是设置 a-scene 的样式属性，而不是 a-scene ＆＃39;宽度/高度属性：

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

具有场景重新调整大小的A帧设计模式动态场景生成

1 个答案: