i have tried too far but the same result, when animation in a-frame triggered by a custom event it play that animation the same way from (x,y,z) to(x',y',z') and from (x'',y'',z'') to (x',y',z') i played around with a-animation attributes but never got a solution!
<html>
<body>
<script src=".2.0/aframe.min.js"></script>
<script src=".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');
});
here is the test in codepen :
i have tried too far but the same result, when animation in a-frame triggered by a custom event it play that animation the same way from (x,y,z) to(x',y',z') and from (x'',y'',z'') to (x',y',z') i played around with a-animation attributes but never got a solution!
<html>
<body>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://rawgit./ngokevin/aframe-layout-ponent/master/dist/aframe-layout-ponent.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');
});
here is the test in codepen : http://codepen.io/anon/pen/OXaoKg
Share Improve this question asked Aug 9, 2016 at 12:50 Bochkati Mohamed AmineBochkati Mohamed Amine 1015 bronze badges 4- What is your goal? It looks like your project seems to work, you get animations when you look at each object. – msj121 Commented Aug 9, 2016 at 21:18
- the problem is when i look at the previous object, the camera move from the previous object to the current object and not the reverse (i want it to move from the current position to previous object position) – Bochkati Mohamed Amine Commented Aug 16, 2016 at 10:09
- When I look at the previous object it snaps into view as the center.... – msj121 Commented Aug 17, 2016 at 19:28
- The problem is the animation only moves in one direction from One to Two, or Two to Three - there is no reverse animation. Also, the animation is called constantly because you keep looking at (/clicking on) one of the planes which triggers both a jump back then the animation forward. (Unfortunately I don't know the best way to fix this.) – Matthew Wilcoxson Commented Oct 26, 2016 at 20:27
1 Answer
Reset to default 7Part of the problem here is that the clicks are repeatedly triggered. We can control that like this:
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