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>
Related
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>
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>
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
I am a newbee to A-Frame and Javascript. I went through the 360gallery code on the A-Frame blog and tweaked it.
What I need is: If I am standing at a particular position in the skybox, I have set 3 hotspots
at where I am standing
and 3. the position of the hotspots I would like to go and which will switch another texture on the skybox and simultaneously change my position to that selected hotspot. A kind of virtual tour.
What I have achieved until now is the texture of the skybox changes as I see or select a hotspot.
But the position is where I am stuck and need help with.
Don McCurdy's library for aframe checkpoints might be helpful for you. You can add the attribute checkpoint to the hotspot-entities, then by clicking them, the camera will fly to the hotspot. If the camera should stop before the hotspot, so that it's still visible, then you can add an offset (in this example 5m).
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
<a-entity id="rig" movement-controls="controls: checkpoint" checkpoint-controls="mode: animate" position="0 1.6 0" >
<a-entity id="camera" camera
look-controls="pointerLockEnabled: true"
position="0 0 5" <!-- camera will stop 5m (on z-axis) before the checkpoint -->
camera-listener>
<a-entity cursor="fuse: true"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
material="color: #CCC; shader: flat;"
visible="false">
<a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-entity>
</a-entity>
<a-sphere checkpoint position="-10 1.6 8" color="white" material="emissive: white" radius="0.2"></a-sphere>
<a-sphere checkpoint position="0 1.6 0" color="white" material="emissive: white" radius="0.2"></a-sphere>
<a-sphere checkpoint position="-10 1.6 0" color="white" material="emissive: white" radius="0.2"></a-sphere>
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>