I have a 360° rotation animation in aframe (ar.js) and I would like to pause and continue it, whereas all that I can do it's pause but restart from the begining.
<a-entity>
<a-entity
gltf-model="#tree-gltf">
</a-entity>
<a-animation
begin="rotation-begin"
end="rotation-end"
attribute="rotation"
to="0 360 0"
direction="alternate"
dur="10000"
repeat="indefinite">
</a-animation>
</a-entity>
Animation documentation give access to "begin" and "end" events, but "begin" restart from the begining and not from the current value when paused.
Entity documentation give access to pause() and play(), which are the same. Play() doesn't work at all if "begin" attribute exist, so you have to choose between events or functions.
But play() also restart animation from the begining and not from where the animation was paused.
I also tried an ugly trick by setting attribute "dur" to one hour to slow down animation so it looks like paused, but setting back "dur" to 10 sec doesn't restart it.
Any idea which can help ?
Using Kevin Ngo's animation-component helps as it properly supports pause/resume.
Besides including the component, your code will look like this:
<a-entity
animation="property:rotation; startEvents:rotation-begin; pauseEvents: rotation-pause; resumeEvents: rotation-resume; to:0 360 0; dir:alternate; dur:10000; repeat:indefinite"
gltf-model="#tree-gltf">
</a-entity>
This will give you three events: rotation-begin, rotation-pause and rotation-resume that you can trigger.
See a demo here
Related
A question about a-frame? Does aframe offer button objects (like a-button)? If yes, why are there no information about them in the documentation?
Are they planned to be added?
And if it isnt, is there a way to create objects in a-frame that behave like button that can be used on a touchscreen?
You can turn pretty much any a-frame object into a button.
make your cursors rayOrigin to your mouse. (You can add the cursor attribute to your camera)
<a-camera cursor="rayOrigin: mouse"></a-camera>
For example lets take an a-box primitive and turn it into a button by adding the standard onclick event to the element
<a-box onclick="doSomething"></a-box>
And initiate the function you want.
This should work for touch too.
If you want an overlay UI, I'd always go with HTML elements. They're easier to manage, as you can position them on the screen easily.
If you want the UI to track an object (like a marker in arjs), you can use my tracked-ui component as follows:
<!-- The HTML UI -->
<div id="ui"></div>
<a-scene arjs>
<a-marker tracked-ui="element: #ui; offset: 0 200">
<a-box></a-box>
</a-marker>
</a-scene>
Using aframe, I would like to display a flat image with transparency (e.g. as png) which is dark when no light points at it. The parameter I figured out is emissiveIntensity, which is not recognized when using a-image (according to the console of my Chrome Browser):
<a-image src="#img-colorwheel"
position="8 3 -10"
rotation="0 0 0"
height="5"
width="5"
material="emissiveIntensity:0;">
</a-image>
When using a regular a-entity, it works:
<a-entity geometry="primitive: plane; height:5; width:5;"
material="src:#img-colorwheel; emissiveIntensity:0;"
position="0 2 -19.9"
rotation="0 0 0">
</a-entity>
My problem is, that in this case the transparent part of the png is displayed in white color.
Any hints - or workarounds?
Working with a-frame 0.7.0; same issue with 0.7.1
The <a-image> does not have the emissive mappings. You can also check it out, by searching for a-image in the source code, where You can see the mappings.
I would use the entity, since the a-image is clearly an abridged version of a-entity with the plane geometry.
If You really need the <a-image> with emissive, You need to change the shader, since <a-image> uses the meshBasicMaterial. Check out it's properties. No emissive. What needs to be done is:
<a-image src="https://i.imgur.com/wjobVTN.jpg"
position="0 2 -3"
rotation="0 0 0"
height="5"
width="5"
material = "shader:standard;color:blue;
emissive:red;emissiveIntensity:2">
</a-image>
like i did here.
Ofc You could make a component, which changes the material to any other, but the meshStandardMaterial should be sufficient.
<a-assets>
<audio id="Theme" src="Theme.mp3" preload="auto"></audio>
</a-assets>
<a-entity position="0 0 -1" sound="src:#Theme;autoplay:true;loop:false" rotation="0 0 0" scale="1 1 1" visible="true"></a-entity>
My code seems correct, but only loads some of the time. What gives?
Not sure why You got so many minuses, it really does not work as expected.
You didn't explain what error You get, i get the: TypeError: Failed to execute 'decodeAudioData' on 'BaseAudioContext': parameter 1 is not of type 'ArrayBuffer'
My guess is aframe is trying to process the audio before it's loaded or smth, because removing the preload = 'auto' attribute solves the issue. Maybe the component bypasses some listeners when it's set to auto, I'm not sure. Anyway, when i get rid of the preload attribute its working as expected: https://jsfiddle.net/gftruj/numbmqk2/2/
I'm trying to build an A-Frame scene where a car drives by the user, and I need the sound of the car to start playing as the car starts moving. For example:
<a-collada-model id="car" src="#car-dae" position="-0.7 0 -100" rotation="0 90 0">
<a-animation attribute="position"
dur="7000"
begin="model-loaded"
fill="forwards"
to="-0.7 0 20"
repeat="0"
></a-animation>
</a-collada-model>
Can I put a sound component on the animation? If not, how should I go about having the sound play at the same time as the animation? I tried putting the sound component on the collada model and gave it a on:model-loaded (same event as the animation), but this never played the sound. In fact, the only way I seem to be able to get the sound to play is using autoplay. Any ideas?
If it helps, all of my code is in this git repo under carChase.html
https://github.com/zeekw/aFrameTests
Did you try putting the sound component on the model, or as a child of it?
<a-collada-model src="#car-dae" sound="on: model-loaded; src: #car-sound">
I have code which, when you look at an element, it moves. I achieve this using a-cursor with fuse="true". I want to make the fuseTimeout 100 milliseconds and I tried adding the following to the <a-cursor> element:
cursor="fuseTimeout: 100"
timeout="100"
fuseTimeout="100"
Here is the full code: https://jsfiddle.net/be1pgjyv/7/
Try fuse-timeout="100". The docs are off, will fix.