[英]How can create a-scene programmatically using aframe
我是js和html的新手,我想进入Aframe。 我想从声明性形式创建场景到使用js创建场景的编程方式:
<!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>
对于这样的事情:
<!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>
似乎不可能正确地做到这一点。 我需要保持场景的静态定义吗?
谢谢你的帮助。
附加到实体的组件会初始化( https://aframe.io/docs/0.8.0/introduction/writing-a-component.html#using-property-data-from-a-lifecycle-handler )。 您的组件只是已注册,但未与任何实体关联,因此init方法将不会运行。 您可以像在JavaScript中一样,以编程方式创建一个场景,使其与其他任何常规DOM组件一样,但要记住要在组件外部创建场景并将场景追加到文档中:
var sceneEl = document.createElement("a-scene");
...
document.body.appendChild(sceneEl);
您还可以静态定义<a-scene>
标记,然后填充场景:
sceneEl = document.querySelector("a-scene");
... create and append scene entities ...
sceneEl.appendChild(yourEntity);
我也建议您将A-Frame版本升级到0.8.0
Glitch上的完整可运行示例: https ://glitch.com/edit/#! / cious-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>
这是我目前写的内容(场景没有出现):
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.