Javascript A帧动画_Javascript_Aframe

Javascript A帧动画

javascript aframe

Javascript A帧动画,javascript,aframe,Javascript,Aframe,我尝试了太多，但结果相同，当自定义事件触发a帧中的动画时，它以相同的方式播放该动画，从（x，y，z）到（x'，y'，z'），从（x'，y'，z'）到（x'，y'，z'））我使用了a动画属性，但从未找到解决方案 <html> <body> <script src="https://aframe.io/releases/0.2.0/aframe.min.js"><

我尝试了太多，但结果相同，当自定义事件触发a帧中的动画时，它以相同的方式播放该动画，从（x，y，z）到（x'，y'，z'），从（x'，y'，z'）到（x'，y'，z'））我使用了a动画属性，但从未找到解决方案

                  <html>
              <body>
                <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
                <script src="https://rawgit.com/ngokevin/aframe-layout-component/master/dist/aframe-layout-component.min.js"></script>
                <a-scene>
                  <a-entity id="gallery" layout="type: line; margin: 1.2" position="0 0 3">

                    <a-plane id="one" color="#CCC" look-at="[camera]"></a-plane>
                    <a-plane id="two" color="#CCC" look-at="[camera]"></a-plane>
                    <a-plane id="three" color="#CCC" look-at="[camera]"></a-plane>
                    </a-entity>
              <!--camera & env -->
                <a-camera position="0 0 4" id="camera">
                  <a-entity cursor="fuse: true; maxDistance: 30; timeout: 500"
                    position="0 0 -.6"
                    scale=".01 .01 .01"
                    geometry="primitive: ring"
                    material="color: green; shader: flat">
              </a-entity>
              <a-animation attribute="position"
                begin="one"
                to="0 0 4"
                dur="1000"
                fill="forwards"
                easing="ease-in-out-cubic"></a-animation>
                <a-animation attribute="position"
                  begin="two"
                  to="1 0 4"
                  dur="1000"
                  fill="forwards"
                  easing="ease-in-out-cubic"></a-animation>
                <a-animation  attribute="position"                 begin="three"                                                          dur="1000"                                                            fill="forwards"
              to="2 0 4"
              easing="ease-in-out-cubic"></a-animation>

                </a-camera>

                <a-sky color="#ECECEC"></a-sky>
                <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
                <a-light type="ambient" color="#fff"></a-light>
              </a-scene>
              </body>
              </html>

以下是codepen中的测试：

这里的部分问题是，点击被反复触发。我们可以这样控制：

var at = "one";

one.addEventListener('click', function () {
  if( at !== "one") {
    at = "one";
    camera.emit('one');
  }
});
two.addEventListener('click', function () {
  if( at !== "two") {
    at = "two";
    camera.emit('two');
  }
});

three.addEventListener('click', function () {
  if( at !== "three") {
    at = "three";
    camera.emit('three');
  }
 });

你的目标是什么？看起来您的项目似乎正常工作，当您查看每个对象时，您会看到动画。问题是当我查看上一个对象时，相机会从上一个对象移动到当前对象，而不是反向移动（我希望它从当前位置移动到上一个对象位置）当我看前一个对象时，它会捕捉到视图中的中心…问题是动画只在一个方向上从一个移动到两个，或者从两个移动到三个-没有反向动画。此外，动画会不断调用，因为您一直在查看（/单击）其中一个平面，该平面会触发向后跳转和向前跳转。（不幸的是，我不知道解决这个问题的最佳方法。）或者，增加光标上的

fuseTimeout

cursor=“fuse:true；maxDistance:30；超时：1500”

var at = "one";

one.addEventListener('click', function () {
  if( at !== "one") {
    at = "one";
    camera.emit('one');
  }
});
two.addEventListener('click', function () {
  if( at !== "two") {
    at = "two";
    camera.emit('two');
  }
});

three.addEventListener('click', function () {
  if( at !== "three") {
    at = "three";
    camera.emit('three');
  }
 });