A-Frame Design Pattern Dynamic Scene Generation with Scene re-sizing

Question

This example nicely illustrates how to dynamically add an a-scene to the DOM. (https://codepen.io/gftruj/pen/JJoENb). It perfectly compliments a design pattern to support an app that will programmatically build content into a container (like a DIV) passed at run-time to the JavaScript.

However, attempts to adopt the 'embedded' resizing logic (see: https://aframe.io/docs/0.6.0/components/embedded.html ) have not been successful; the scene is not showing; though inspecting the elements in FireFox debug mode shows it's there with attributes changed.

A child canvas element is present, but with width/height and style attributes not reflecting the changes made to the parent a-scene.

Here's the script code adopted from the noted example used in an attempt to resize the 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")

UberMario UberMario · Accepted Answer · 2017-09-07T03:23:33

After playing with this a bit, the solution is to set the a-scene's style attribute and NOT the a-scene's width/height attributes:

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-Frame Design Pattern Dynamic Scene Generation with Scene re-sizing

1 Answers