I am very new to java script and html, and I am so stack with this.
The following is what I wrote and wanted to primitive to start when the marker is detected.
However, the sound start as soon as when I access the html on a browser.
<a-marker type="pattern" url="pat/ban.patt">
<a-entity>
<a-image id="obj0" rotation="-90 0 0" src="#banto" width="5" height="5"></a-image>
<a-entity position="-0.75 1 1" rotation="-90 0 0" text-geometry="value: Head of the cleark; bevelEnabled: false; bevelSize: 0.008; bevelThickness: 0.08; size: 0.25;" material="color: cyan;"></a-entity>
<a-sound src="#bantoSound" autoplay="true"></a-sound>
</a-entity>
</a-marker>
Although the is shown only when the marker is detected....
Does not work as same as ???
I'm afraid the autoplay:true fires the sound whenever the entity is loaded in the DOM.
I suggest You disable autoplay, or stop all sounds when the scene loads, and You activate it when the marker is visible:
if(document.querySelector("a-marker").object3D.visible == true){
// play the sound
}
Related
i have a entity text and and side by side have event click, but when i click on the right, left event was listen and then just going to right event ?
it seems like the trigger on left must pass on the right then going to left
example
button 1 : going to '/createroom'
button 2: going to '/joingroom'
when i click button2 : it was trigger to '/createroom' then going to '/joinroom'
is that because of the width a-entity text ? or what ??
this is my a-entity
<a-text
id="createRoom"
cursor="rayOrigin: mouse;maxDistance: 30; fuse: true ; far: 10"
width="10"
position="-6 3 -5"
align="left"
value="create room"
geometry="primitive:plane"
animation="property: position; from: -6 3 -5; to: -6 3.5 -5; loop: true; dir: alternate; easing:linear;dur:1000"
>
</a-text>
// buton2
<a-text
id="joinRoom"
width="10"
align="right"
raycaster="objects: .collidable; far: 8"
position="6 0.7 -5"
cursor="rayOrigin: mouse;maxDistance: 30; fuse: true"
value="joinroom"
geometry="primitive:plane"
animation="property: position; from: 6 0.7 -5; to: 6 0.9 -5; loop: true; dir: alternate; easing:linear;dur:1000"
></a-text>
Place the cursor component either:
on the scene: <a-scene cursor="rayOrigin: mouse">
on any element which is the starting point of the ray:
<a-camera>
<a-entity cursor></a-entity>
</a-camera>
<a-entity id="vive-controller" cursor></a-entity>
Otherwise the rays may get through many "bystanding" entities, and result in multiple click events.
Correctly working fiddle here.
Fiddle with cursors on the texts (like in the question) here.
I'm setting up augmented reality with AR.js, and I'm trying to get the camera/scene to be oriented to due North when the page loads.
Short example is that I'm trying to create a view that has a virtual compass with North/East/South/West displayed to the user.
I've got it working to a certain extent so far, but the calibration seems a little off at times. I'm using a MEAN stack and AR.js
Here's what I have:
view.html:
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
<a-entity id="camera-entity" wasd-controls-enabled="false" position="0 -2 0" rotation="0 0 0" aframe-injected="">
<a-camera></a-camera>
</a-entity>
<a-text font="kelsonsans" width="6" position="0 0 -3.5" rotation="0 0 0" text="" value="North"></a-text>
</a-scene>
angular client controller (this section running only once on initialization):
var compass = event.webkitCompassHeading;
document.querySelector('#camera-entity').object3D.rotation.y = THREE.Math.degToRad(-compassdir);
Am I doing something incorrect with how I'm setting rotation on the camera-entity? Is there a better way to do this? Any suggestions?
I have compass bearing outputting to my development display, and it appears that the hardware is getting compass readings correctly.
Hardware: iPhone X
Reference:
Also, see this for reference regarding how aframe orients to relative phone position when opening:
https://github.com/aframevr/aframe/issues/349
And this for reference about a-frame rotation:
https://aframe.io/docs/0.8.0/components/rotation.html
If you want your items on the marker to be oriented compass-wise, then I'd suggest rotating the scene, not messing with the camera
<a-marker>
<a-entity id='parent' rotate-this-with-the-compass-readings>
<!-- Everything you want to rotate northwise --!>
</a-entity
</a-marker>
Preferably, with a aframe component, to be sure the element is ready:
AFRAME.registerComponent("rotate-this-with-the-compass-readings", {
init: function() {
var compassdir // however you get the compass reading
var pos = this.el.getAttribute('position')
pos.y = THREE.Math.degToRad(-compassdir);
this.el.setAttribute('position', pos)
}
})
I'm trying to set up a simple a-frame physics demonstration that replays on click. Following basic examples from the aframe physics system and the orange shooter demo, I've simplified things to the code bellow which seems to work fine except for the rotation.set action. The block resets position, velocity and angularVelocity just fine but does not update rotation as it seems it should. Browser console message is Uncaught TypeError: Cannot read property 'set' of undefined
What would be the simplest way to set the rotation from within this script?
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-physics-system#1.4.0/dist/aframe-physics-system.min.js"></script>
</head>
<body>
<a-scene physics background="color: #ccddff">
<a-box id="dropped" position="-1 4 -3" rotation="40 45 0" color="#5577D9" dynamic-body></a-box>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="brown" static-body></a-plane>
</a-scene>
</body>
<script>
window.addEventListener('click', function () {
// METHOD2 - MOVE THE EXISTING ORANGE
document.querySelector("#dropped").body.position.set(-1, 4, -3);
document.querySelector("#dropped").body.velocity.set(0, 0, 0);
document.querySelector("#dropped").body.angularVelocity.set(0, 0, 0);
document.querySelector("#dropped").body.rotation.set(40, 45, 0);
});
</script>
</html>
It is document.querySelector("#dropped").components.body.body.position.set(-1, 4, -3);
This seems to work:
document.querySelector("#dropped").body.quaternion.set(0.3535533905932738,0.3535533905932738,0.14644660940672624,0.8535533905932737);
Apparently you have to use quaternions for rotations while physics is added, it looks like it overrides the native rotation. This works for getting one from degrees (45,45,0):
q=new THREE.Quaternion().setFromEuler(new THREE.Euler(THREE.Math.degToRad(45),THREE.Math.degToRad(45),0,'XYZ'));
And then:
document.querySelector("#dropped").body.quaternion.set(q.x,q.y,q.z,q.w);
But neither of this worked for me:
document.querySelector("#dropped").body.quaternion=q
document.querySelector("#dropped").body.quaternion.setFromEuler(e)
Where e is an Euler and q is a quaternion. Also the following works, albeit the result is not quite what you need:
document.querySelector("#dropped").body.quaternion=document.querySelector("#dropped").body.initQuaternion;
Should probably ask about it on A-frame github. Hope that this helps, happy coding ))
In the scene, I have two boxes. I am trying to make one box cloning the other one's rotation angle in real time.
<a-entity id="original" mixin="cube" position="0 1.6 -1" material="color: red" sleepy collision-filter="group: red; collidesWith: default, hands, blue" rotation="0 0 0">
<a-entity id="clone" mixin="cube" position="2 1.6 -1" material="color: blue" sleepy
collision-filter="group: blue; collidesWith: default, red" rotation="0 0 0">
I can see that the property of a cloned box updates correctly through console.log(), but in the scene the box does not change its angle. What am I missing?
The code below is my attempt to make it work.
var check = document.querySelector('.controllers');
var ori = document.getElementById('original');
var clo = document.getElementById('clone');
check.addEventListener('xbuttondown', () => {
var ori_pos = ori.getAttribute("rotation");
//console.log(ori_pos.x);
clo.object3D.rotation.set(
THREE.Math.degToRad(ori_pos.x),
THREE.Math.degToRad(ori_pos.y),
THREE.Math.degToRad(ori_pos.z)
);
console.log(clo.getAttribute("rotation"));
});
From the A-Frame FAQ: To improve performance, A-Frame does not update the HTML to save on stringification operations. This also means mutation observations will not fire. Use the debug component or .flushToDOM methods if you need to sync to the DOM
In a a-scene, I try to change my camera position at runtime. The DOM property changes but the camera does not move.
What could have I missed ?
my js code:
document.querySelector('#myCameraPosition').setAttribute('position', '0 0 0');
My a-scene:
<a-entity id="myCameraPosition" position="0 0 50">
<a-entity id="myCamera" camera look-controls keyboard-controls>
</a-entity>
</a-entity>
Create a wrapper entity around the camera:
<a-entity id='cameraWrapper' position="0 0 0">
<a-camera></a-camera>
</a-entity>
Then change position of the wrapper:
document.querySelector("#cameraWrapper").object3D.position.set(1, 1, 1);
Had to set "look-controls" to false for javascript rotation control, otherwise wouldn't work :
function resetView(el){
el.setAttribute('look-controls','false');
el.setAttribute('rotation',{x:0,y:0,z:0});
el.setAttribute('look-controls','true');
}
On the example below I can change the position of the camera entity's parent and it works as expected:
https://aframe.io/examples/showcase/helloworld/
Is any of the openearthview or acceleration components writing the position of the camera entitiy's parent? They might be overwritting its position.
document.getElementById('myCameraPosition').setAttribute('position', {x:0, y:0, z:0});
or
document.querySelector('#myCameraPosition').setAttribute('position', {x:0, y:0, z:0});
When it comes to position you can directly change the camera position(unlike rotation where you need a wrapper entity).
so
document.getElementById('myCameraPosition').setAttribute('position', {x:0, y:0, z:0});
should work