Question

我是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>

似乎不可能正确地做到这一点。我是否需要静态定义场景？

感谢您的帮助。

Answer 1

组件在附加到实体（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/#!/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>

Answer 2

这是我现在写的（场景没有出现）：

<!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>

如何使用aframe以编程方式创建场景

2 个答案: