A-frame multiple animations with camera - javascript

I have some code for a camera using A-frame (https://aframe.io) and I'm wondering how I can add multiple sequential animations. I would like it so that when my first animation is finished, another animation will trigger and the camera will move 5 spaces to the left after the first animation is complete. How can this be done? My current code:
<a-entity id="rig" position="0 1.6 0" animation="property: position; delay: 2000; dur: 7000; easing: linear; to: 0 1.6 -25">
<a-entity id="camera" wasd-controls camera look-controls></a-entity>
</a-entity>

You can use the fact that
any animation can be started by emitting an signal defined in the startEvents property
you can determine when an animation has ended by listening to the animationcomplete event.
You can use the animationcomplete signal in the startEvents property, to chain the animations:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity id="rig" position="-1 1.6 0"
animation__first="property: position; dur: 750; to: 1 1.6 0;
startEvents: animationcomplete__second, loaded;"
animation__second="property: position; dur: 750; to: -1 1.6 0;
startEvents: animationcomplete__first"
foo>
<a-entity id="camera" camera look-controls></a-entity>
</a-entity>
</a-scene>
Or if you want a little bit more control over them, you can make a "manager" for your animations:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
this.signalName = "signalone";
// when the animation is finished, fire the other one
this.el.addEventListener("animationcomplete", e => {
// wait a while and start the other animation
this.signalName = this.signalName == "signalone" ? "signaltwo" : "signalone";
setTimeout(e => {
this.el.emit(this.signalName)
}, 500)
})
this.el.emit(this.signalName)
}
})
</script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity id="rig" position="-1 1.6 0"
animation__first="property: position; dur: 500; easing: linear; to: 1 1.6 0; startEvents: signalone;"
animation__second="property: position; dur: 500; easing: linear; to: -1 1.6 0; startEvents: signaltwo" foo>
<a-entity id="camera" camera look-controls></a-entity>
</a-entity>
</a-scene>

Related

A-frame rotate to a random rotation point

I have some code using A-frame (https://aframe.io) that rotates a cube. What I'm wondering is how can I rotate the cube from a random amount anywhere from 0, 0, 0 to 360, 360, 360? Currently my rotation also loops so that it repeats after 1 second of being finished. What I would like is to have my cube rotate to a random rotation and loop after a delay of 1 second each time. How can this be done? Code for the animation:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity animation="property: rotation; to: 20 0 0; loop: true; delay: 1000; dur: 1000">
<a-box position="5 0 0" color="mediumseagreen"></a-box>
</a-entity>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>

AFrame set attribute not working for Plane's height and width

I'm trying to build a VR site. One of the things I need my code to do is for my plane and text to toggle visibility when I click a statue. In the code below, when I click parkStatue, both park and parkPlane are supposed to disappear or become visible. The text is working fine, but the plane doesn't change. The height and width theoretically change (become 0 and back), but it doesn't resize. What am I doing wrong
Demo: https://people.rit.edu/dl1683/VR
Using A Frame
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"> </script>
</head>
<body>
<script>
var proj={
park:'Pakinsons',
anant: "Anant"
}
function visible(idBase) {
// get the clock
console.log("Clicked: "+idBase)
var plane=document.getElementById(idBase+'Plane')
var text=document.getElementById(idBase)
console.log(plane.getAttribute('visible'))
if(text.getAttribute('value')!=' '){
text.setAttribute('value'," ")
plane.setAttribute('height', 0)
plane.setAttribute('width', 0)
plane.setAttribute('visible',false)
// plane.height="0000"
// plane.width="0000"
}else{
text.setAttribute('value',proj[idBase])
plane.setAttribute('height', ".00010")
plane.setAttribute('width', ".00010")
plane.setAttribute('visible',true)
// plane.height=".00010"
// plane.width=".00010"
}
}
</script>
<a-scene>
<a-camera position="2 3 0">
<a-cursor color="#FF0000">
</a-camera>
>
<a-gltf-model id="sheep" position="0 0 -3" rotation="0 100 0"
src="https://cdn.glitch.com/0fc2d138-1979-4b80-8bae-51eb67b7ccb9%2Fsheep.glb?1544159918188">
</a-gltf-model>
<a-gltf-model id="parkStatue" position="-4 2 -11" rotation="0 15 0" scale=".04 .04 .04" onclick="visible('park')"
src="https://cdn.glitch.com/7e18fbf8-9686-4cf7-91f9-4a6bbdb54f5e%2Fstatue.glb?1544169724449">
</a-gltf-model>
<a-plane id='parkPlane' position="-1 1.69 -2.5" rotation="0 10 0" height=".00010"
color="#faaf52" width=".00010"></a-plane>
<a-text id='park' value="Parkinsons" position="-2.15 2 -2.29" rotation="0 10 0" width="4" color="black" ></a-text>
<a-sky src="https://cdn.glitch.com/7e18fbf8-9686-4cf7-91f9-4a6bbdb54f5e%2Fsky.jpg?1544174075054"></a-sky>
<a-plane id="floor" position="0 0 0" rotation="-90 0 0" width="30" height="30" repeat="5 4"
src="https://cdn.glitch.com/c388f728-37b7-4af9-af03-1ee7430663e7%2F4727356277_66fb5f938f_o.jpg?1544178281422">
</a-plane>
<a-plane position="-1 1.69 -2.5" rotation="0 10 0" scale="2.75 1 1" color="#faaf52"></a-plane>
<a-plane position="2 1 -2.5" rotation="0 -10 0" scale="2 .8 1" color="#faaf52"></a-plane>
<a-text value="On desktop, click + drag to look around, and use the awsd keys to move around."
position="1.12 1.23 -2.6" rotation="0 -10 0" width="1.9" color="black"></a-text>
<a-text value="In Go/Daydream/GearVR or mobile, look around. On Rift, Vive, or WinMR, you can also walk around!"
position="1.09 1 -2.6" rotation="0 -10 0" width="1.9" color="black"></a-text>
<a-dodecahedron position="-8 2 -1" color="yellow"></a-dodecahedron>
<a-sphere position="10 2 0" color="orange" scale=".6 .6 .6"></a-sphere>
<a-sphere position="10 1.5 -1" color="brown" scale=".4 .4 .4"></a-sphere>
<a-sphere position="10 1.5 1" color="brown" scale=".4 .4 .4"></a-sphere>
<a-sphere position="10 2.7 .8" color="brown" scale=".4 .4 .4"></a-sphere>
<a-plane position="0 1.5 -15" color="#643200" scale="30 3 30"></a-plane>
<a-plane position="15 1.5 0" rotation="0 -90 0" color="#643200" scale="30 3 30"></a-plane>
<a-plane position="0 1.5 15" rotation="0 180 0" color="#643200" scale="30 3 30"></a-plane>
<a-plane position="-15 1.5 0" rotation="0 90 0" color="#643200" scale="30 3 30"></a-plane>
<a-box position="4 1 -8" scale="2 2 2" color="black"></a-box>
<a-torus-knot position="4 4 -8" color="#408080"></a-torus-knot>
<a-box position="-10 1 -10" scale=".5 2 .5" color="#552b00"></a-box>
<a-cone position="-10 3.2 -10" color="green" scale="1 3 1"></a-cone>
<a-box position="-9 1 -12" scale=".5 2 .5" color="#552b00"></a-box>
<a-cone position="-9 3.2 -12" scale="1 3 1" color="green"></a-cone>
<!-- tree -->
<a-box position="10 1 10" scale=".5 2 .5" color="#552b00"></a-box>
<a-cone position="10 3.2 10" color="green" scale="1 3 1"></a-cone>
<!-- tree -->
<a-box position="9 1 12" scale=".5 2 .5" color="#552b00"></a-box>
<a-cone position="9 3.2 12" scale="1 3 1" color="green"></a-cone>
<a-box position="-8 3 10" rotation="0 -45 0" scale="6 2 2" color="#80ffff"></a-box>
<a-box position="-8 1 10" rotation="0 -45 0" scale="1 2 1" color="#592d00"></a-box>
<a-box position="0 1 10" scale="2 2 2" color="black"></a-box>
<a-tetrahedron position="0 3.5 10" rotation="-12 -180 65" color="#FF926B" radius="5" scale=".5 .5 .5">
</a-tetrahedron>
</a-scene>
</body>
</html>
Your code works as expected but there's a bug on A-Frame. Setting width and height to 0 sets the geometry default value instead of 0. I captured the issue in github. Any other value should work as expected. In your case you don't need to set height and width to 0 since you're hiding the entity.
FYI, You're in an old A-Frame version. Use 1.0.4 or newer.
Check that your HTML is valid. e.g: No closing tag for <a-cursor> or ids using single quotes ' instead of double ". In the future sharing a runnable example will make easier for people to help you. Glitch is a good option

How can I implement an animation motion path in Aframe

I would like to implement an animation motion path that is launched by an cursor onclick event.
I understand one way of doing this is using anime.js with Aframe but I don't know how to import it into Aframe.
Below is the code of the animation sequence I want to animate. As you can see the animation tags follow a takeoff and landing animation sequence.
But because I want the model to animate onclick this process is not suitable
Appreciate any help!
<a-entity id="spaceship" cursor-animator gltf-model=#lol position="-20 0 -5" scale="2 2 2" rotation="0 180 0">
<a-animation attribute="position" from="-20 0 -5" to="-20 0 -25" dur="5000"></a-animation>
<a-animation attribute="position" from="-20 0 -25" to="-20 1000 -200" delay="5000" dur="9000"></a-animation>
<a-animation attribute="rotation" from="0 180 0" to="0 0 0" delay="14000"></a-animation>
<a-animation attribute="position" from="-20 1000 -200" to="-20 0 -25" delay="15000" dur="9000"></a-animation>
<a-animation attribute="position" from="-20 0 -25" to="-20 0 -5" delay="24000" dur="8000"></a-animation>
<a-animation attribute="rotation" from="0 0 0" to="0 180 0" delay="25000" dur="8000"></a-animation>
</a-entity>
The path component could potentially help:
https://github.com/protyze/aframe-alongpath-component
It doesn't look like it has a trigger event, so what you could do is
setAttribute('alongpath', {curve: '#track1'}) in your click event to make it start at that time.
<a-curve id="track1">
<a-curve-point position="-2 2 -3"></a-curve-point>
<a-curve-point position="0 1 -3"></a-curve-point>
<a-curve-point position="2 2 -3"></a-curve-point>
</a-curve>
<!-- this would move once you add the component via setAttribute in the click function -->
<a-box></a-box>

How to add js onclick event to aframe animation

I have a spaceship model that I would like to animate taking off. I would like it to be so that the animation would activate once I click on the spaceship with my cursor. I have the animation working using but I would like it to activate upon a cursor click event. Below is my HTML and where I got stuck with the JS
<a-entity id="spaceship" cursor-animator gltf-model="models/spaceship.gltf" position="-20 -0.855 -5.259" scale="2 2 2" rotation="0 180 0">
<a-animation attribute="position" from="-20 0 -5" to="-20 0 -25" dur="10000"></a-animation>
<a-animation attribute="position" from="-20 0 -25" to="-20 1000 -200" delay="9000" dur="9000"></a-animation>
</a-entity>
// Component to activate spaceship animation on click
AFRAME.registerComponent('cursor-animator', {
init: function () {
this.el.addEventListener('click', function (evt) {
//Code
console.log('I was clicked at: ', evt.detail.intersection.point);
});
}
});
I would try adding the 'begin' attribute to the animation tags:
https://aframe.io/docs/0.8.0/core/animations.html#begin
<a-entity id="camera" camera look-controls cursor="rayOrigin: mouse"></a-entity>
<a-entity id="spaceship" cursor-animator gltf-model="models/spaceship.gltf" position="-20 -0.855 -5.259" scale="2 2 2" rotation="0 180 0">
<a-animation begin="click" attribute="position" from="-20 0 -5" to="-20 0 -25" dur="10000"></a-animation>
<a-animation begin="click" attribute="position" from="-20 0 -25" to="-20 1000 -200" delay="9000" dur="9000"></a-animation>
</a-entity>

Make panorama/360 degrees using aframe webVR

I have multiple images (say North, East, South, West) and I want them to be shown as one combined panorama/360 view using aframe in java script, instead of each image to be shown as individual 360 view as a-sky does.
Here is a codepen for reference.
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute('src', this.data);
});
}
});
</script>
<a-scene>
<a-camera position="0 2 4">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="1" position="-4 2 0" set-
sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-
sphere>
<a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-
sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"></a-
sphere>
<a-sky></a-sky>
</a-scene>
Relevant Blog:
https://blog.neondaylight.com/build-a-simple-web-vr-ui-with-a-frame-a17a2d5b484
As said in ngokevin's comment, You could either:
create an entity made of planes with Your images, and place the camera inside:
<a-entity position="0 0 0">
<a-plane width="5" height="5" position="0 0 -2.5"
material="src:#north"></a-plane>
<a-plane width="5" height="5" position="2.5 0 0" rotation="0 -90 0"
material="src:#west"></a-plane>
<a-plane width="5" height="5" position="-2.5 0 0" rotation="0 90 0"
material="src:#east"></a-plane>
<a-plane width="5" height="5" position="0 0 2.5" rotation="0 180 0"
material="src:#south"></a-plane>
</a-entity>
But you need to fill it with some ground and top, so you could try to:
create a cubemap out of six images:
<a-assets>
<a-cubemap id="sky">
<img src="right.png" crossorigin="anonymous">
<img src="left.png" crossorigin="anonymous">
<img src="top.png" crossorigin="anonymous">
<img src="bottom.png" crossorigin="anonymous">
<img src="front.png" crossorigin="anonymous">
<img src="back.png" crossorigin="anonymous">
</a-cubemap>
</a-assets>
<a-entity position="0 0 0" rotation="0 0 0" scale="3 3 3"
geometry="primitive: box;" material="envMap: #sky;
roughness: 0;metalness:1;side:back"></a-entity>
A demo consisting of both options is here. Just navigate Yourself with wasd-controls inside the cubemap, or planes.
Check out the source code here.

Categories