I have included below audio asset in my scene. In two ways tried it....
<audio id="hover" src="resources/assets_data/hover.mp3"></audio>
and
<a-asset-item id="hover" src="resources/assets_data/hover.mp3" response-type="arraybuffer"></a-asset-item>
When I am trying to play this sound in four menu elements I am getting below error... and hover sound is playing only on first menu curved image....
components:sound:warn Sound not loaded yet. It will be played once it
finished loading
Code:
<a-curvedimage src="#a" transparent="true"
height="0.5" radius="0.9" theta-length="40" rotation="0 240 0" position="0 1.74 -1.4" sound="on: mouseenter; src: #hover" selectable>
</a-curvedimage>
<a-curvedimage src="#b" transparent="true"
height="0.5" radius="0.9" theta-length="40" rotation="0 190 0" position="0 1.74 -1.4" sound="on: mouseenter; src: #hover" selectable>
</a-curvedimage>
<a-curvedimage src="#c" transparent="true"
height="0.5" radius="0.9" theta-length="40" rotation="0 130 0" position="0 1.74 -1.4" sound="on: mouseenter; src: #hover" selectable>
</a-curvedimage>
<a-curvedimage src="#d" transparent="true"
height="0.5" radius="0.9" theta-length="40" rotation="0 80 0" position="0 1.74 -1.4" sound="on: mouseenter; src: #hover" selectable>
</a-curvedimage>
seems to be working when i used an audio tag with the preload: auto attribute:
<a-assets>
<audio id="mysound" crossorigin="anonymous" src="...">
</a-assets>
Try it out here.
Related
Below is the code I use:
I use glb file and it should start animation from the beginning when marker is activated, but It start from the middle of the animation.
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;">
<a-assets>
<a-asset-item id="dja" src="./arfile2.glb"></a-asset-item>
</a-assets>
<a-nft type='nft' url='./demo/marker/djarum'
smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
<a-entity gltf-model='#dja'
scale="90 90 90"
position="100 -200 0"
rotation="-90 0 0"
animation-mixer >
</a-entity>
</a-nft>
<a-entity camera>
</a-entity>
</a-scene>
<!--<a-scene>
<a-assets>
<a-asset-item id="tree" src="./tesla/scene.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#tree" scale="0.6 0.6 0.6" position="0 0.15 -3"></a-entity>
</a-scene>-->
The animation-mixer starts the animation when the model is loaded, not when it's visible.
You can wait until the image is detected, and then attach the animation-mixer:
const model = document.querySelector("[gltf]")
const nft = document.querySelector("a-nft");
nft.addEventListener("markerFound", () => {
model.setAttribute("animation-mixer", "")
})
Issue upgrading from A-FRAME 8 to 9 with a project. The reason for the upgrade was due to inconsistent mouse clicks from registered components using addEventListener. It was just not consistent however moving to verison 9 seemed to correct that issue but at the cost of breaking the rest of the project.
Animations are not working, I am unable to move objects or cameras when in inspector mode yet elements do appear in inspector mode, you just cannot select the xyz arrows to move them.
I'm wondering if anyone else has experienced similar issues as described above when migrating from version 8 to 9 of A-FRAME?
The closest example of this is the code below. If you change it to version 9 of A-FRAME nothing works yet it is ok with version 8. I could not find any glaring differences between my markup and the A-FRAME documentation. Anyone else?
Re-creating every element seems to work however camera positioning within the inspector is not functional, unable to spectate to see what the camera angle would look like, and adding objects with OBJ and MTL files only shows an outline of the object whereas with version 8 everything worked 100%.
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('cursor-hotpsot-1', {
init: function () {
var COLORS = ['purple', 'green', 'blue'];
this.el.addEventListener('click', function (evt) {
var randomIndex = Math.floor(Math.random() * COLORS.length);
this.setAttribute('material', 'color', COLORS[randomIndex]);
console.log('Clicked:' + this);
});
}
});
</script>
<a-scene class="fullscreen"
inspector=""
keyboard-shortcuts=""
screenshot=""
vr-mode-ui="enabled: false"
cursor="rayOrigin: mouse">
<!--
<a-camera active="true" spectator="true"
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false"
zoom="2.4"
position="0.3 0.0 -1.8"
rotation="0.0 132.5 0.0"
camera="zoom:1.5"
look-controls=""
camera="active:true"
data-aframe-inspector-original-camera=""
look-controls="enabled: false"></a-camera>
-->
<a-obj-model id="diagram"
position="-0.8 0 -3.5"
scale="0.2 0.2 0.2"
shadow=""
rotation="-90 180 0"
material="metalness: .5; src: #issTexture; src: #issTexture; " obj-model=""
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false">
<!-- CURSOR HOTSPOTS -->
<!-- TOP RIGHT -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="-3.5 0.1 2.0"
scale="0.250 0.250 0.250"
color="red"
id="hotspot_tr"></a-sphere>
<!-- BOTTOM LEFT -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="3.3 0.1 -2.3"
scale="0.250 0.250 0.250"
color="green"
id="hotspot_bl"></a-sphere>
<!-- CENTER TOP -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="-0.040 0.1 0.1"
scale="0.250 0.250 0.250"
color="blue"
id="hotspot_ct"></a-sphere>
</a-obj-model>
<a-camera active="true" spectator="true"
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false"
zoom="2.4" position="0.28042 0.01891 -1.85751"
camera="zoom:1.5"
look-controls=""
camera="active:true"
data-aframe-inspector-original-camera=""
look-controls="enabled: false">
<a-animation attribute="position"
dur="2500"
fill="forwards"
from="0.2058 0.29058 -1.96409"
to="0 0 -1.5"
repeat="0">
</a-animation>
</a-camera>
</a-scene>
/////////////////////////////////////////////////
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('cursor-hotpsot-1', {
init: function () {
var COLORS = ['purple', 'green', 'blue'];
this.el.addEventListener('click', function (evt) {
var randomIndex = Math.floor(Math.random() * COLORS.length);
this.setAttribute('material', 'color', COLORS[randomIndex]);
console.log('Clicked:' + this);
});
}
});
</script>
<a-scene class="fullscreen"
inspector=""
keyboard-shortcuts=""
screenshot=""
vr-mode-ui="enabled: false"
cursor="rayOrigin: mouse">
<!--
<a-camera active="true" spectator="true"
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false"
zoom="2.4"
position="0.3 0.0 -1.8"
rotation="0.0 132.5 0.0"
camera="zoom:1.5"
look-controls=""
camera="active:true"
data-aframe-inspector-original-camera=""
look-controls="enabled: false"></a-camera>
-->
<a-obj-model id="diagram"
position="-0.8 0 -3.5"
scale="0.2 0.2 0.2"
shadow=""
rotation="-90 180 0"
material="metalness: .5; src: #issTexture; src: #issTexture; " obj-model=""
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false">
<!-- CURSOR HOTSPOTS -->
<!-- TOP RIGHT -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="-3.5 0.1 2.0"
scale="0.250 0.250 0.250"
color="red"
id="hotspot_tr"></a-sphere>
<!-- BOTTOM LEFT -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="3.3 0.1 -2.3"
scale="0.250 0.250 0.250"
color="green"
id="hotspot_bl"></a-sphere>
<!-- CENTER TOP -->
<a-sphere geometry="primitive: sphere"
cursor-hotpsot-1 sphere="2"
position="-0.040 0.1 0.1"
scale="0.250 0.250 0.250"
color="blue"
id="hotspot_ct"></a-sphere>
</a-obj-model>
<a-camera active="true" spectator="true"
wasd-controls="wsEnabled:false;enabled:false"
look-controls="enabled: false"
zoom="2.4" position="0.28042 0.01891 -1.85751"
camera="zoom:1.5"
look-controls=""
camera="active:true"
data-aframe-inspector-original-camera=""
look-controls="enabled: false">
<a-animation attribute="position"
dur="2500"
fill="forwards"
from="0.2058 0.29058 -1.96409"
to="0 0 -1.5"
repeat="0">
</a-animation>
</a-camera>
</a-scene>
Viewing the example with version 8 of A-FRAME will show three spheres that will appear towards the lower left screen. Version 9 will show nothing. I would expect version 9 to work as version 8 did.
a-animation has been deprecated in A-Frame 0.9.0 in favor of the animation component:
https://aframe.io/docs/0.9.0/components/animation.html#sidebar
The camera actualy moves but the visual representation remains in place. I filed a bug to to cover it:
https://github.com/aframevr/aframe-inspector/issues/582
I am using aframe to create an experience for Oculus Go. I have a simple "world" and I am able to move around it using the Oculus Go controller. However, I don't seem to be able to set the initial camera position or reset the camera location at any point. The initial problem means that my viewpoint is always close to the ground.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pailou Gate</title>
<meta name="description" content="Pailou Gate">
<script src="../aframe/dist/aframe-master.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene background="color: #9cf" antialias="true">
<a-assets>
<a-asset-item id="pl" src="pl.dae"></a-asset-item>
</a-assets>
<a-entity wasd-controls mouse-controls look-controls movement-controls="fly: false" position="0 0 0">
<a-entity camera position="0 4 0"></a-entity>
<a-entity oculus-go-controls></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
</a-entity>
<a-light position="0 0.5 1" intensity="0.8"></a-light>
<a-light type="point" position="20 30 -40" intensity="0.9" light="castShadow: true;"></a-light>
<a-collada-model src="#pl" position="0 0.4 0" rotation="0 0 0" scale="1 1 1" shadow="cast: true; receive: false"></a-collada-model>
<a-circle rotation="-90 0 0" radius="40" color="#393" position="0 -0.1 0" shadow="receive: true" roughness="1"></a-circle>
<a-torus radius="40" arc="360" color="#6c6" rotation="-90 0 0"></a-torus>
</a-scene>
</body>
</html>
I think the relevant bit is the entity surrounding the camera and the camera itself. Notice that I do set the camera high, but this seems to be ignored.
Any thoughts?
Sean
Set the position and movement controls on the camera rig (parent entity of the camera) and look-controls on the camera:
<a-entity wasd-controls position="0 4 0">
<a-entity camera look-controls></a-entity>
</a-entity>
What are the options I can incorporate multiuser into A-Frame?
Below is example code where I want the black sphere to represent each player:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
<a-sphere id="player" color="black"></a-sphere>
<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-sky color="#ECECEC"></a-sky>
</a-scene>
Multiuser is still being fleshed out as the community and the team continue to experiment. Networked physics is something that needs to be implemented well and there are a few methods from the game industry that can be ported to the Web. There are a few initial options as of time of writing:
https://github.com/haydenjameslee/networked-aframe - Networked A-Frame by Hayden Lee that uses WebRTC and a server. Here's a Glitch we can remix to get started: https://glitch.com/~networked-aframe
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
<script src="easyrtc/easyrtc.js"></script>
<script src="https://unpkg.com/networked-aframe/dist/networked-aframe.min.js"></script>
<script>
function onConnect() {
NAF.entities.createAvatar('#avatar-template', '0 1.6 0', '0 0 0');
}
</script>
<a-scene network-scene>
<a-assets>
<script id="avatar-template" type="text/html">
<a-sphere color="black"></a-sphere>
</script>
</a-assets>
<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-sky color="#ECECEC"></a-sky>
</a-scene>
Another option is http://lance.gg/ , a real-time multiplayer game server. It provides an extendible Node.JS based server, on which game logic runs, as well as a client-side library which synchronizes the client's game state with the server game state. In order to provide a smooth visual experience for each connected client, Lance implements efficient networking methods, position interpolation and extrapolation, user input coordination, shadow objects, physics and pseudo-physical movement, automatic handling of network spikes.
An older option is https://github.com/ngokevin/kframe/tree/master/components/firebase - Firebase component using Firebase real-time database server so you don't need to host your own server.
I am learning how to use Javascript and the A-Frame library and I am trying to change the scale of an obj model while hovering on it.
I am following the Building with Components tutorial but there is something wrong with my code and it doesn't seem to work with me.
Here is my code
<a-scene>
<a-assets>
<audio id="click-sound" src="audioclick.mp3"></audio>
<a-asset-item id="e45-obj" src="E45.obj"></a-asset-item>
<a-asset-item id="e45-mtl" src="E45.mtl"></a-asset-item>
<script id="link" type="text/nunjucks">
<a-entity class="link"
sound="on: click; src: #click-sound"
event-set__1="_event: mousedown; scale: .5 .5 .5"
event-set__2="_event: mouseup; scale: 0.8 0.8 0.5"
event-set__3="_event: mouseenter; scale: 0.8 0.8 0.5"
event-set__4="_event: mouseleave; scale: .5 .5 .5"></a-entity>
</script>
</a-assets>
<a-entity template="src: #link">
<a-obj-model scale=".5 .5 .5" rotation="0 -45 -45" position="0 1.5 -5" src="#e45-obj" mtl="#e45-mtl">
<a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
repeat="indefinite"></a-animation>
</a-obj-model></a-entity>
</a-scene>
Thanks in advance!
<a-obj-model event-set__scale="_event: mouseenter; scale: 2 2 2"></a-obj-model>