A-Frame sound component does not change position - aframe

I wanted to make a sound come from my right side. So I tried using the A-Frame sound component below:
<a-sound src="src: url(Buzz.mp3)" autoplay="true" loop="true" position="-20 0 0"></a-sound>
I used the -20 coordinate to make sure the sound would come from my far right side. However, no matter how/where I positioned the sound it never changed the perception of where the sound was coming from. Am I using the component correctly? Here is the entire body:
<body>
<a-scene sound="src:morn.wav; loop:false; autoplay:false; volume:.1;">
<a-sound src="src: url(Buzz.mp3)" autoplay="true" loop="true" position="-20 0 0"></a-sound>
</a-scene>
</body>

Two issues :
1/ To make the sound on your right, you need to attach it to you (= your camera) as a child entity.
2/ Your right is the + X axis, so you should use +1 instead of -20.
<body>
<a-scene sound="src:morn.wav; loop:false; autoplay:false; volume:.1;">
<a-camera wasd-controls>
<a-sound src="src: url(Buzz.mp3)" autoplay="true" loop="true" position="1 0 0">
</a-sound>
</a-camera>
</a-scene>
</body>

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.

How do I synchronize animations on an object using A-frame?

I have the following code in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Alchem Figher!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<!-- Scripts -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system#1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="jquery.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-text value="Rational Bonding Presents" position="-3 7 -10" color="#EF2D5E">
<a-text value="Alchem Fighter" height="30" width="20" position=".5 -.5 0" color="#02e8f4"></a-text>
</a-text>
<a-sphere id="proton" position="0 2.5 -6" radius=".05" color="#EF2D5E">
<a-sphere id="eclouds1e1" radius=".53" color="#02e8f4" opacity=".4">
<a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >
<a-animation attribute="position" dur="250" from=".53 0 0" to="-.53 0 0" direction="alternate" repeat="indefinite"></a-animation>
<a-animation attribute="geometry.radius" dur="125" from=".01" to=".53" direction="alternate" repeat="indefinite"></a-animation>
</a-entity>
</a-sphere>
<a-sky src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Earth_Western_Hemisphere.jpg"></a-sky>
</a-scene>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>
The torus id'd: s1e1
In here, <a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >, it has two animations attached to it. One for left to right movement, and another for expanding and contracting.
The question:
I would like these animations to synchronize so that the torus is expanded in the middle and contracted at the ends. It represents a visualization of an electron orbiting a single proton in a hydrogen atom, but I do not know how to approach that.
I was in the process of typing up a response, suggesting the use of the animation component (included in 0.9.0 core) rather than a-animation (deprecated, and removed in 0.9.0), which I would still recommend in general practice, but I realized that the animations still do in fact fall out of sync.
I'm assuming this is due to any of the following:
The extremely short interval (dur). The higher you set this, the less noticeable the timing issue.
A difference in overhead due to how the animated properties are targeted, e.g., raw property vs. attribute (using setAttribute under the hood).
IIRC, loops are set with either setTimeout or setInterval under the hood. Rather than rely on this, you may want to disable looping and trigger these animations by emitting a timed event so you can guarantee that they're executed simultaneously. You can create a custom component that does this using a throttled tick handler, setTimeout or setInterval.
I also suggest using either linear or easeInOutQuad for the easing as the default setting only eases in one direction, which can cause an undesirable effect.
Either way, you may want to submit this as a bug to the A-Frame repo: https://github.com/aframevr/aframe/issues/new

How to display a curved video with aframe

I've tried <a-videosphere> and <a-video> and they are great.
But if i use a "normal" video, it is incredibly stretched with a-videosphere and just flat with a-video.
But is there a way for the video to be curved around the user ?
Just like if the user was inside a cylinder : similar to a-curvedimage but for a video.
EDIT (problem with a-curvedimage and src) :
You can display a video as a texture on any geometry by using the src attribute:
<a-box src="#video"></a-box>
<a-curvedimage src="#video"></a-curvedimage>
<a-torus-knot src="#video"></a-torus-knot>
remixed example glitch here.
If you're asking if you can make a normal video equirectangular, without earlier preparation, or some image manipulation library, aframe won't do it for you.
I encountered the same issue with a-curvedimage and the src attribute, and solved it by using the generic a-entity element instead, recreating the open-ended, double-sided cylinder of the a-curvedimage element.
Example for a 1280x720 video:
<a-scene>
<a-assets>
<video id="myvideo" preload="auto" src="/path/to/video.mp4" width="1280" height="720" autoplay="true" loop="true" crossorigin="anonymous" playsinline="" webkit-playsinline=""></video>
</a-assets>
<a-entity material="shader: flat; side: double; src: #myvideo" geometry="primitive: cylinder; radius: 5; height: 3.6815; open-ended: true; theta-start: 142.5; theta-length: 75; position="0 1.5 0" rotation="0 0 0" scale="-1 1 1"></a-entity>
</a-scene>
Additional Info:
Stefie has a great calculator for the attributes of different dimensions for curved images and videos.
Edit: Video was inverted on the X-Axis to the user, so added a scale attribute with -1 for the X-Axis.

The two box stereo example is not working in the Samsung Internet browser in GearVR

I am using the Samsung Internet Browser in GearVR with webVR enabled. I have taken the code for the "two boxes, one in each eye" example directly from the github source. It should show one box in each eye. But no matter what I have tried I get both boxes in each eye or something worse. Nothing I have tried produces the correct result.
My ultimate goal is to use webVR to play 360 3D videos (from VUZE) in stereo in webVR. But I cannot get even this simple stereo app to work. Any suggestions for the best way to get stereo VR to work in an HMD, especially GearVR would be greatly appreciated.
The source is the two boxes example from https://github.com/oscarmarinmiro/aframe-stereo-component
the code is:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="aframe-stereo-component.js.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#FFF"></a-sky>
<a-light color="#333" position="0 5 0" type="ambient" intensity="0.2"></a-light>
<a-light type="point" color="#EEE" intensity="1.0" position="3 3 10"></a-light>
<!-- 'left' eye entities will pass trough the camera in non-VR mode -->
<a-camera position="0 0 10" cursor-color="black" stereocam="eye:left;"></a-camera>
<!-- in VR mode, the first box is displayed only in the left eye, the second one in the right eye -->
<a-entity geometry="primitive: box" material="color: #C03546" stereo="eye:left"></a-entity>
<a-entity geometry="primitive: box" material="color: #3546C0" position="0 5 0" stereo="eye: right"></a-entity>
"</a-scene>
</body>
</html>
I can"t get the Samsung VR browser to work correctly for any example, not even Samsung's.
I use the Oculus Carmel browser for all WebVR on Gear VR.
The code showed above comes from the documentation at https://github.com/oscarmarinmiro/aframe-stereo-component.
A working example is at http://oscarmarinmiro.github.io/aframe-stereo-component/ .
Looking at the source code for http://oscarmarinmiro.github.io/aframe-stereo-component/two_boxes/index.html reveals that both the script lines in the head
should be replaced by the one line
<script src="../build.js"></script>.
build.js and correct versions of the index files are in the code files in https://github.com/oscarmarinmiro/aframe-stereo-component, but not in the documentation below it.

Background tag not working in aframe

I have the following code snippet
<a-assets>
<img id="garage_pic" src="images/labs/SFOGarage_photosphere.jpg">
</a-assets>
<a-sky id="sfogarage" src="#garage_pic" rotation="0 -130 0" visible="true"
radius="100"></a-sky>
Here in the above code, i am trying to access image inside tag through
src="#garage_pic". But i am not able to access it. my page background is still blank.
Please suggest a solution for the above. Thanks

Resources