I want to add a button to allow sound on iphone to my A-Frame app, but I'm new to HTML and can't figure out how to do it. Has anyone successfully done this and if so can you share some example source code?
How do you get the button on the beginning screen, ideally next to where the google cardboard/headset icon appears?
I figured out a way to do it so wanted to share. I added a click event for the scene itself, then when you press the vr-enter button (the headset icon) it triggers the audio to play. Inside the scene I added a speaker icon with a mouseenter event to also control the audio via gazing. I switch out the img for sound on/sound off. I did NOT add a button on the canvas next to the headset icon, but I think this works better anyway. If you have a better way, I'd love to see it!
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
<title>Sound Demo</title>
<meta name="description" content="Audio Button Demo">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene background="blue">
<a-assets>
<img id="soundButton" src="sourceimages/sound.png" >
<img id="soundOffButton" src="sourceimages/soundOff.png" >
<audio id="soundtrack" src="assets/Narration.mp3" preload="auto"></audio>
</a-assets>
<a-sky color="#00AEEF"></a-sky>
<a-plane class="link" id="sButton" src="#soundOffButton" height="40" width="40" rotation="0 0 0" position="0 0 -300" material="transparent:true"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1">
</a-plane>
<a-entity camera look-controls>
<a-cursor id="cursor"
color="white"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: cyan"
event-set__2="_event: mouseleave; color: white"
fuse="true"
raycaster="objects: .link"></a-cursor>
</a-entity>
</a-scene>
<script>
var sbutt = document.querySelector('#sButton');
var strack = document.querySelector('#soundtrack');
sbutt.addEventListener('mouseenter', playButtonAudio);
var scene = document.querySelector('a-scene');
if (scene.hasLoaded) {
playButtonAudio();
} else {
scene.addEventListener('click', playButtonAudio);
}
function playButtonAudio () {
if (strack.paused) {
strack.play();
sbutt.setAttribute('material', "src: #soundButton");
} else {
strack.pause();
sbutt.setAttribute('material', "src: #soundOffButton");
}
}
</script>
Related
I am using AFrame and Ar.js with marker tracking.
The marker detection is quite bad, is there a way to improve it? also, is there a way to make the objects visible even if the marker is not being detected? keeping them in the same screen position for example.
This is my code
<script>
AFRAME.registerComponent('marker-handler', {
init: function () {
this.el.addEventListener('markerFound', () => {
this.el.setAttribute('visible', true);
});
this.el.addEventListener('markerLost', () => {
this.el.setAttribute('visible', true);
});
}
});
</script>
<body style="margin: 0; overflow: hidden;">
<a-scene
vr-mode-ui="enabled: false;"
loading-screen="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;"
id="scene"
embedded
gesture-detector
>
<a-assets>
<a-asset-item
id="animated-asset"
src="assets/asset.gltf"
></a-asset-item>
<a-asset-item
id="M-asset"
src="assets/M.gltf"
></a-asset-item>
</a-assets>
<a-marker
id="animated-marker"
type="pattern"
preset="custom"
url="assets/marker.patt"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
id="markerA"
>
<a-entity
id="bowser-model"
position="-0.7 0 0"
scale="0.5 0.5 0.5"
animation-mixer="loop: repeat"
gltf-model="#animated-asset"
rotation="0 30 -10"
class="clickable"
marker-handler
event-set__markerLost="_visible: true"
></a-entity>
<a-entity
id="M-model"
position="0.7 0 0"
scale="0.5 0.5 0.5"
gltf-model="#M-asset"
rotation="0 -30 -10"
animation-mixer="loop: repeat"
class="clickable"
marker-handler
event-set__markerLost="_visible: true"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
It looks like 'markerLost' attribute makes the object not visible even if visible is set to true.
I am working on a scene with multiple cameras set at distinct predefined positions and rotations. I noticed when I look around using the mouse (or in VR mode), the camera rotation is linked between cameras. So I thought this could be avoided by using the attribute active: false but both cameras still rotate together. Below is an example scene where both cameras are at the same position and feature an <a-box> in their field of view, notice that when you look around the scene box cubes (children of two separate cameras) move in unison. Is there a way to prevent the inactive camera from following the rotation of the active camera so that the blue cube (with the inactive camera) would stay stationary?
Also, there are no console errors related to A-Frame in this script. Your assistance is greatly appreciated, many thanks in advance for your time.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera active="true" look-controls>
<a-box color="red" position="-2 0 -10"></a-box>
</a-camera>
<a-camera active="false" look-controls>
<a-box color="blue" position="2 0 -10"></a-box>
</a-camera>
<a-plane color="gray" rotation="-90 0 0" width="20" height="20"></a-plane>
</a-scene>
</body>
</html>
A viable solution for this is to enable and disable the look-controls on the cameras when switching between them. This can be done in JavaScript with : newCameraElement.setAttribute('look-controls', 'enabled', true); and oldCameraElement.setAttribute('look-controls', 'enabled', false); Here's a revised version of the question's example that initially disables the other camera's look-controls to provide the desired behaviour of having distinct cameras:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera active="true" look-controls>
<a-box color="red" position="-2 0 -10"></a-box>
</a-camera>
<a-camera active="false" look-controls="enabled: false">
<a-box color="blue" position="2 0 -10"></a-box>
</a-camera>
<a-plane color="gray" rotation="-90 0 0" width="20" height="20"></a-plane>
</a-scene>
</body>
</html>
i am having trouble animating in AFRAME element/entities. In the following demo i have set up a box and on top of the box a text entity that needs to animate in (scale up) when i hover the mouse over the box the text element does not animate in or show up. Can anyone help?
https://jsfiddle.net/0d6ymk21/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="camera" camera mouse-cursor look-controls>
<a-cursor fuse="true" color="blue"></a-cursor>
</a-entity>
<a-entity
id="#fernando"
text="color: black;value: Fernando;"
scale=".1 .1 .1"
position="2 1 -2"
></a-entity>
<a-box box position="1 0 -2" color="red" activate-name=""></a-box>
</a-scene>
</body>
</html>
-- JS:
AFRAME.registerComponent("activate-name", {
schema: {
default: ""
},
init: function() {
var data = this.data;
var el = this.el;
var fernando = document.querySelector("#fernando");
el.addEventListener("mouseenter", function() {
fernando.setAttribute("scale", "2 2 2");
});
}
});
Two issues here:
1) If you want to grab fernando using document.querySelector('#fernando') - the id needs to be fernando instead of #fernando.
2) The component declaration - activate-name in this case - needs to be done before the component is attached in html. You can simply throw it it a <script> tag before the scene
<script>
AFRAME.registerComponent('foo', ...
</script>
<a-scene>
<a-entity foo></a-entity>
</a-scene>
even better - keep it in a separate .js file and include it in the <head>.
Fiddle here.
This is necessary because jsfiddle executes the code part when the window is loaded.
I Am unable to retrieve the text from the textarea as I just want to scale a box by typing the x-factor as the input. But the input is not being retrieved for some reason. Please help!...here is the code:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-textarea-component/dist/aframe-textarea-component.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#6EBAA7"></a-sky>
<a-box id="redbox" position="3 2.5 -2" color="red"></a-box>
<a-entity position="0 1 -2" id="inputText" textarea="backgroundColor:white; color:black; cols:5; rows:1;value:2;"></a-entity>
<a-input postion="0 2 -2"></a-input>
<a-text id="outputText" position="0 2 -2" value="Hello"></a-text>
<a-camera position="0 1 1">
<a-cursor color="yellow"></a-cursor>
</a-camera>
<a-entity id="select-button" geometry="primitive: box" material="color:red" position="0 0 -2"></a>
</a-scene>
<script>
var box = document.querySelector('#redbox')
var printText = document.querySelector('#inputText');
document.querySelector('#select-button').addEventListener('click',function(){
box.setAttribute("scale",
{
x : parseInt(printText.getAttribute('textarea').value),
y : 1.5,
z : 1.5
}
);
});
</script>
</body>
</html>
Edit: I tried changing the code in javascript as follows:
parseInt(printText.getAttribute('textarea').text
It still does not work!!
The textarea component does not expose the value directly but you can do:
document.querySelector('#inputText').components.textarea.textarea.value
The latest version (0.3.0) of aframe-textarea-component now includes a getText() method which you can use to get the current text.
document.querySelector('#inputText').components.textarea.getText();
I try to work with a raycaster, but i can't seem te get it to work(nothing shows in my console). I tried the example on: https://aframe.io/docs/0.5.0/components/raycaster.html
Javascript file
AFRAME.registerComponent('collider-check', {
dependencies: ['raycaster'],
init: function () {
this.el.addEventListener('raycaster-intersected', function () {
console.log('Player hit something!');
});
}
});
index.html
<a-scene>
<a-entity id="player" collider-check>
<a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
</a-entity>
<a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
</a-scene>
I try to walk in al possible directions and nothing shows in my console. I run my code in google chrome on a xampp server.
Hope someone can explain to me what is going on!
Try this structure. Make sure the component is registered before the A-Frame HTML.
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="collider-check.js"></script>
</head>
<body>
<a-scene>
<a-entity collider-check></a-entity>
</a-scene>
</body>
</html>