Javascript 如何使用框架以编程方式创建场景_Javascript_Html_Aframe_Virtual Reality_Programmatically

Javascript 如何使用框架以编程方式创建场景

javascript html aframe

Javascript 如何使用框架以编程方式创建场景,javascript,html,aframe,virtual-reality,programmatically,Javascript,Html,Aframe,Virtual Reality,Programmatically,我不熟悉js和html，我想进入一个框架。我想从声明式创建场景转变为使用js以编程方式创建场景： <!DOCTYPE html> <html> <head> <title>JavaScript - A-Frame School</title> <meta name="description" content="JavaScript - A-Frame School"> <script sr

我不熟悉js和html，我想进入一个框架。我想从声明式创建场景转变为使用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>


JavaScript-A-Frame学校

对这样的事情：

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


JavaScript-A-Frame学校
A框架注册组件（“学校-操场”{
init：函数（）{
var body=document.querySelector（'body'）；
var sceneEl=document.createElement（“a-scene”）；
var body=document.querySelector（'body'）；
setAttribute（“嵌入式”，true）；
sceneEl.style.height=“700px”；
sceneEl.style.width=“100%”；
sceneEl.setAttribute（“学校操场”，”）；
var myBox=document.createElement（'a-box'）；
setAttribute（'position'，{x:-1，y:0，z:-4}）
setAttribute（'rotation'，{x:0，y:45，z:0}
setAttribute（'color'，'red'）；
sceneEl.appendChild（myBox）；
附肢儿童（sceneEl）；
//我还尝试了document.body.appendChild（sceneEl）；
}
});

似乎不可能正确执行。是否需要静态定义场景

感谢您的帮助。

组件在连接到实体时初始化（）。您的组件刚刚注册，但未与任何实体关联，因此init方法将不会运行。您可以通过编程方式在JavaScript中创建一个场景，作为任何其他常规DOM组件，类似于您所做的操作，但请记住在组件外部创建场景，并将场景附加到文档中：

 var sceneEl = document.createElement("a-scene");
 ...
 document.body.appendChild(sceneEl);

您还可以定义



你好，WebVR！-A-Frame
var sceneEl=document.createElement（'a-scene'）；
setAttribute（'background'，{color:'red'}）；
var cubeEl=document.createElement（'a-box'）；
setAttribute（'color'，'blue'）；
setAttribute（'position'，'01.5-2'）；
附肢儿童（cubeEl）；
文件.正文.附件（sceneEl）；
以下是我目前写的内容（场景未出现）：

JavaScript-A-Frame学校
A框架注册组件（“学校-操场”{
/**
*当中的所有内容就绪并加载时，将调用此函数中的代码。
*/
init：函数（）{
//var body=document.body；
//var sceneEl=document.querySelector（'a-scene'）；
var sceneEl=document.createElement（“a-scene”）；
var body=document.querySelector（'body'）；
setAttribute（“嵌入式”，true）；
//setAttribute（“类”、“全屏”）；
sceneEl.style.height=“700px”；
sceneEl.style.width=“100%”；
var camera=document.createElement（“a实体”）；
setAttribute（“摄影机”，“用户高度：1.6”）；
setAttribute（“外观控件”，{enabled:true}）；
setAttribute（“wasd控件”，即“”）；
setAttribute（“活动”，真）；
场景。儿童（摄像机）
//使用必要的属性创建圆柱体
var-cylinder=document.createElement（'a-cylinder'）；
setAttribute（'color'，'#FF9500'）；
圆柱体.setAttribute（'height'，'2'）；
圆柱体.setAttribute（'radius'，'0.75'）；
圆柱体.setAttribute（'position'，'3 1-4'）；
sceneEl.appendChild（圆柱体）；
//使用必要的属性创建长方体
对于（变量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}）；
setAttribute（'material'，{color:'#00bff'}）；
setAttribute（'material'，{visible:true}）；
setAttribute（'rotation'，{x:0，y:0，z:0}）；
sceneEl.appendChild（myBox）；
}
文件.正文.附件（sceneEl）；
}
});
第二种方法很好，但不是我真正想要的。第一种方法是我想要的，但不起作用。我忘了添加它，但我做的就是：***var sceneEl=document.createElement（“a-scene”）；body.appendChild（sceneEl）；在控制台中，我看到主体是空的。感谢您的建议：我升级了一个框架版本，更新了我的原始答案，在底部有一个完整的可运行示例。如上所述，如果组件未连接到实体，则不会运行。这就是为什么学校操场的逻辑不执行OK，它工作正常！我我以为我的学校操场在爪哇是一个班名
sceneEl = document.querySelector("a-scene");
... create and append scene entities ...
sceneEl.appendChild(yourEntity);

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