gpt4 book ai didi

javascript - A帧动画

转载 作者:可可西里 更新时间:2023-11-01 02:43:04 25 4
gpt4 key购买 nike

我已经尝试了太多但结果相同,当自定义事件触发 a 帧中的动画时,它以相同的方式从 (x,y,z) 播放该动画到 (x',y',z')从 (x'',y'',z'') 到 (x',y',z')我试过 a-animation 属性,但从来没有找到解决方案!

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

Javascript:

    var one =     document.querySelector('#one');
var two = document.querySelector('#two');
var three = document.querySelector('#three');
one.addEventListener('click', function () {
camera.emit('one');
});
two.addEventListener('click', function () {
camera.emit('two');
});

three.addEventListener('click', function () {
camera.emit('three');
});

这是 codepen 中的测试: http://codepen.io/anon/pen/OXaoKg

最佳答案

这里的部分问题是重复触发点击。我们可以这样控制:

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');
}
});

http://codepen.io/akademy/pen/MjMZVJ

关于javascript - A帧动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38851261/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com