How can create a-scene programmatically using aframe
Question
I'm new to js and html, I would like to get into Aframe. I want to go from declarative form to create a scene to programmatical way using js to create it :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
<a-scene school-playground>
<a-box position="-1 0 -4.25" rotation="0 45 0" color="red" ></a-box>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
To something like that :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('school-playground', {
init: function () {
var body = document.querySelector('body');
var sceneEl = document.createElement("a-scene");
var body = document.querySelector('body');
sceneEl.setAttribute("embedded", true);
sceneEl.style.height="700px";
sceneEl.style.width="100%";
sceneEl.setAttribute("school-playground", "");
var myBox = document.createElement('a-box');
myBox.setAttribute('position', {x:-1, y:0, z:-4})
myBox.setAttribute('rotation', {x:0,y:45, z:0}
myBox.setAttribute('color', "red");
sceneEl.appendChild(myBox);
body.appendChild(sceneEl);
//I also tried document.body.appendChild(sceneEl);
}
});
</script>
</head>
<body>
</body>
</html>
It doesn't seem possible to do it properly. Do I need to keep the scene statically defined ?
Thanks for your help.
2 answers
solution1
1 2018-04-12 19:20:21
Components initialize when attached to entities ( https://aframe.io/docs/0.8.0/introduction/writing-a-component.html#using-property-data-from-a-lifecycle-handler ). Your component is just registered but not associated to any entity so the init method won't run. You can programmatically create a scene as any other regular DOM component in JavaScript similarly to what you did but remember to do it outside of a component and append the scene to the document:
var sceneEl = document.createElement("a-scene");
...
document.body.appendChild(sceneEl);
You can also define your <a-scene> tag statically and then populate the scene:
sceneEl = document.querySelector("a-scene");
... create and append scene entities ...
sceneEl.appendChild(yourEntity);
I also recommend upgrading your A-Frame version to 0.8.0
Full runnable example on Glitch: https://glitch.com/edit/#!/conscious-way
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
</body>
<script>
var sceneEl = document.createElement('a-scene');
sceneEl.setAttribute('background', {color: 'red'});
var cubeEl = document.createElement('a-box');
cubeEl.setAttribute('color', 'blue');
cubeEl.setAttribute('position', '0 1.5 -2');
sceneEl.appendChild(cubeEl);
document.body.appendChild(sceneEl);
</script>
</html>
solution2
0 2018-04-12 23:39:21
Here's what I write for the moment (the scene does not appear):
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('school-playground', {
/**
* Code within this function will be called when everything in <a-scene> is ready and loaded.
*/
init: function () {
//var body = document.body;
// var sceneEl = document.querySelector('a-scene');
var sceneEl = document.createElement("a-scene");
var body = document.querySelector('body');
sceneEl.setAttribute("embedded", true);
//sceneEl.setAttribute("class", "fullscreen");
sceneEl.style.height="700px";
sceneEl.style.width="100%";
var camera = document.createElement("a-entity");
camera.setAttribute("camera", "userHeight: 1.6");
camera.setAttribute("look-controls", {enabled: true});
camera.setAttribute("wasd-controls", "");
camera.setAttribute("active", true);
sceneEl.appendChild(camera)
//cylinder creation using the necessary attributes
var cylinder = document.createElement('a-cylinder');
cylinder.setAttribute('color', '#FF9500');
cylinder.setAttribute('height', '2');
cylinder.setAttribute('radius', '0.75');
cylinder.setAttribute('position', '3 1 -4');
sceneEl.appendChild(cylinder);
//box creation using the necessary attributes
for (var i =0; i < 50; i++){
var myBox = document.createElement('a-box');
myBox.setAttribute('position', {x:Math.random()* 5-2.5 , y: Math.random()* 5-2.5 ,z : Math.random()* 5-7})
myBox.setAttribute('scale', {x: Math.random() / 1.25, y: Math.random() / 1.25, z: Math.random() / 1.25});
myBox.setAttribute( 'material', {color: '#00bfff'});
myBox.setAttribute('material', {visible: true});
myBox.setAttribute('rotation', {x: 0, y: 0, z: 0});
sceneEl.appendChild(myBox);
}
document.body.appendChild(sceneEl);
}
});
</script>
</head>
<body>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.