当我的 Javascript 函数是运行时，我的 A-Frame 没有渲染。我怎样才能让它同时渲染？

Question

使用 WebVR 的 Mozilla A-Frame，我尝试使用 javascript 编辑一个对象的 y 位置。但是，在我的 javascript 完成运行之前，网页上什么也没有显示。为什么不是同时的？

这是我的 HTML 页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! - A-Frame</title>
    <meta name="description" content="Hello, World! - A-Frame">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-asset-item id="crate-obj" src="./aztec-temple.obj"></a-asset-item>
        <a-asset-item id="crate-mtl" src="./aztec-temple.mtl"></a-asset-item>
      </a-assets>
      <a-obj-model src="#crate-obj" mtl="#crate-mtl"></a-obj-model>
      <a-sphere id="comet" position="1, 5.25, -5" radius="1.25" color="#EF2D5E"></a-sphere>
    </a-scene>
  </body>
  <script src="./main.js"></script>
</html>

和我的 Javascript:

function initialCometSetup() {
  var x = 0, y = 5.25, z = -5;
  var myComet = document.getElementById('comet');
  myComet.setAttribute('position', {x: x, y: y, z: z});
  console.log(myComet);
  setTimeout(100, changeZofComet());
}

function changeZofComet() {
    console.log("got here")
    var myComet = document.getElementById('comet');
    var myPos = myComet.getAttribute('position');
    console.log(myPos.y)
    myPos.y = myPos.y - 0.01;
    myComet.setAttribute('position', myPos);
    if (myPos.y > 0) {
        setTimeout(1000, changeZofComet());
    } else {
        console.log("schmuguwuga")
    }
}

setTimeout(1000, initialCometSetup());

Answer 1

您应该创建一个组件并使用 tick 方法将您的逻辑插入框架的渲染循环，而不是创建您自己的渲染循环。 https://aframe.io/docs/0.3.0/core/component.html#methods

当我的 Javascript 函数是运行时，我的 A-Frame 没有渲染。我怎样才能让它同时渲染？

My A-Frame isn't rendering while my Javascript function is running. How can I have it render simultaneously?

html

javascript

asynchronous

webvr

aframe

当我的 Javascript 函数是 运行 时，我的 A-Frame 没有渲染。我怎样才能让它同时渲染？

My A-Frame isn't rendering while my Javascript function is running. How can I have it render simultaneously?

html

javascript

asynchronous

webvr

aframe

当我的 Javascript 函数是运行时，我的 A-Frame 没有渲染。我怎样才能让它同时渲染？