Music not playing 50% of the time when loading scene - aframe

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

Related

arjs not displaying gltf model

I'm trying to make a simple arjs application based on the tutorials on the website, specifically this one
I've been able to successfully swap out other gltf models for new codes, but whenever I try to use my own models they do not display in the application.
I've tested my model in the viewer at https://gltf-viewer.donmccurdy.com/ and it shows up fine.
My code is below.
<body style='margin : 0px; overflow: hidden;'>
<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
<a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-assets>
<a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf"></a-asset-item>
<a-asset-item id="bimmer" src="https://raw.githubusercontent.com/jaggre/consortium/master/compresso.gltf"></a-asset-item>
</a-assets>
<a-marker type='barcode' value='2'>
<a-entity
animation-mixer
gltf-model="#bimmer"
scale="4 4 4">
</a-marker>
<a-marker id="animated-marker" type='barcode' value='6'>
<a-entity
animation-mixer
gltf-model="#animated-asset"
scale="2 2 2">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
Check in your console for any Cross origin Resource Sharing errors - sometimes if your website is hosted via http or set up differently it doesn't work. see https://aframe.io/docs/1.0.0/core/asset-management-system.html#cross-origin-resource-sharing-cors and https://aframe.io/docs/1.0.0/introduction/installation.html#use-a-local-server . If you just use the file:// protocol as you are testing it may not work.
Other things you could try is moving the model's a-entity tag outside of the marker tag to see if the marker class is having an effect on it. perhaps check the A-frame inspector (Ctrl Alt I) and poke around if it's just displaying in the wrong place.
Update: gltf2.0 not showing in ar.js project seems like a similar question. Perhaps try it's answers too.

A-Frame Loader for STL File

I'm trying to include a STL file like a GLTF object in my A-Frame page, but I'm not making progress. I don't understand why the file doesn't work in a similar manner. Here is my code for the working page on Glitch with a GLTF file and a non-working one with the STL file. All object files are hosted on GitHub.
glitch.com/edit/#!/dramatic-hornet
(below is the non-working code excerpt copied from Glitch)
<a-scene>
<a-assets>
<a-asset-item id="object" src="https://github.com/rschildge/models/raw/master/NinjaSpinner.stl"></a-asset-item>
</a-assets>
<a-entity model="#object" position="0 0 -4" scale=".1 .1 .1"></a-entity>
<!-- <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>-->
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
As far as i know, a-frame's core doesn't have any loader for the .stl format.
There is a pretty recent community-made loader, be sure to check it out.
If it won't work, be sure to file an issue. If it works - give it a friendly star.
As for models in general, the a-frame team recommends the glTF format in the docs, as it is designed for webGL.
As for the model=.. syntax, you need to use a loader component, either the gltf-loader (like you do on glitch), or any other, but it won't work just with a model keyword

aframe/animation : how to pause and resume?

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

Set look-at camera attribute on javascript created a-box

I'm creating several a-frame (version 0.60) objects in javascript dynamically, I manage to set all sorts of attributes successfully.
When it comes to a look-at attribute to set to the camera, it is ignored.
This is the markup I use:
<a-camera id="camera" camera look-controls>
<a-cursor id="cursor" color="#FF0000"></a-cursor>
</a-camera>
And the js code:
var aboxEl = document.createElement('a-box');
aboxEl.setAttribute('look-at', 'camera');
Thank you for any hint
thank to Andrew who told me to add the look-at component source.
<script src="https://rawgit.com/ngokevin/aframe-look-at-component/master/dist/aframe-look-at-component.min.js"></script>
the funny thing is that you don't have to add the look-at source when doing markup

A-frame not picking up a cubemap

I am trying to create a simple animation of falling dices. With below code, I am trying to apply a cubemap to a-box but not able get the desired results.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-cubemap id="sky">
<img src="dice/Dice-1.png">
<img src="dice/Dice-2.png">
<img src="dice/Dice-3.png">
<img src="dice/Dice-4.png">
<img src="dice/Dice-5.png">
<img src="dice/Dice-6.png">
</a-cubemap>
</a-assets>
<a-entity geometry="primitive: box" material="envMap: #sky"></a-entity>
</a-scene>
</body>
</html>
As far as i know, environmental maps, using i.e. cubemaps, are used to provide a sphere environment, or work with reflecion/refraction, by providing a map of the surrounding environment.
In Your case, I would use a texture for <a-box>, or create a custom box made of planes, and texture them accordingly like this:
<a-entity id="dice">
<a-plane position="-0.5 0 0" rotation="0 -90 0"></a-plane>
<a-plane position="0.5 0 0" rotation="0 90 0"></a-plane>
<a-plane position="0 0.5 0" rotation="-90 0 0"></a-plane>
<a-plane position="0 -0.5 0" rotation="90 0 0"></a-plane>
<a-plane position="0 0 0.5" rotation="0 0 -90"></a-plane>
<a-plane position="0 0 -0.5" rotation="0 0 90"></a-plane>
</a-entity>
working fiddle: https://jsfiddle.net/x8dt1jjb/.
Cubemaps:
As I see from multiple sources, cubemaps had many issues:
Like here or here
I found some guy claiming that cubemaps work on all entities except the first one, check out his github,
cubemaps are working on his index.html
Please note, indeed cubemaps on his example are not working on the first entity, so my advice would be copying his cubemap declarations, and create <a-entity> with your envMap applied, but with scale="0 0 0", or visible="false". When made so, the first entity get's 'bugged' (but invisible, so who cares), and Your entity should work fine.
Works properly for me, inverted my sources though: http://gftruj.nazwa.pl/cubemap/
Note, that there is an order in which You need to declare faces of Your cubemap, as explained here. Looking at a dice cubemap, you need to get your order straight, for example:
dice-5, dice-2, dice-4, dice-3, dice-6, dice-1
btw I found a cubemap component, didn't tried it yet though.

Resources