Шаблон дизайна A-Frame Генерация динамической сцены с изменением размера сцены

Этот пример прекрасно иллюстрирует, как динамически добавлять сцену в DOM. (https://codepen.io/gftruj/pen/JJoENb). Он идеально дополняет шаблон проектирования для поддержки приложения, которое будет программно встраивать контент в контейнер (например, DIV), передаваемый во время выполнения в JavaScript.

Однако попытки применить «встроенную» логику изменения размера (см .: https://aframe.io/docs/0.6.0/components/embedded.html) не увенчались успехом; сцена не отображается; хотя проверка элементов в режиме отладки FireFox показывает, что они есть с измененными атрибутами.

Дочерний элемент canvas присутствует, но атрибуты ширины / высоты и стиля не отражают изменений, внесенных в родительский 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
person UberMario    schedule 07.09.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Немного поиграв с этим, решение состоит в том, чтобы установить атрибут стиля 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");
person UberMario    schedule 07.09.2017