Working with a-frame, can not find a way to create something similar to 8thWall´s Cursor Place Ground. I know a-frame can support markerless AR, but I haven't been able to do it, so if anyone knows of any tutorials or hints on how to do markerless AR that would be great. Thanks.
You can use the WebXRHitTest API which is encapsulated in the ar-hit-test component.
With a setup like this:
<a-scene ar-hit-test="target:#my-objects;type:footprint;footprintDepth:0.2;">
<a-entity id="my-objects">
<a-box></a-box>
</a-entity>
</a-scene>
You can place the #my-objects entity by tapping on the floor - provided the surface was detected.
To provide some feedback, you can listen on the scene for these events:
ar-hit-test-start - when the system has started the scanning process
ar-hit-test-achieved - when the surface was found
ar-hit-test-select when the user tapped the screen to place an "anchor" with the items.
Resources:
Ada Rose Cannon tutorial - a must since she created the component
Her rollAR coaster creation app based on ar tapping
My 'tap to move'... experiment? tweet with video (ugly source code)
Related
I'm currently working on something that would allow me to stream "what the headset is seeing" on another device's browser. I'm working with A-frame (v 1.2.0) experiences and an Oculus Quest. I used Socket.io & Web rtc to establish the connection and send the stream between the participants, everything works pretty well to this point.
I based my code on this example to stream the content of the canvas :
https://developers.google.com/web/updates/2016/10/capture-stream
Like this : document.querySelector("canvas").captureStream(30);
And I send this with webrtc once socket established the peer connection.
Everything works fine, I can see from the browser (viewer side) the scene through the camera I defined :
<a-entity id="rig" position="0 1.6 5">
<a-entity id="head" camera look-controls">
</a-entity>
</a-entity>
The stream follows pretty good when we move the camera with mouse-dragging in 2D mode (on a PC browser or before entering VR Mode on the headset)
But when the headset user enters VR mode, the camera does not follow the user's eyes. (But I can see my raycaster's laser moving when moving my controller)
I made some tests to understand and I saw that "manually updating" the camera's rotation is working :
I made a component that allows me to rotate the camera's Y axis with the joystick and it works well on the stream as well, I mean it proves that I'm referring to the good camera. Does it mean that the headset isn't updating my camera's axis ?
This camera has the core "look-controls" component bound to itself.
https://aframe.io/docs/1.2.0/components/look-controls.html
I read this on the official documentation and saw :
Rotates the entity when we rotate a VR head-mounted display (HMD).
Which seems to answer my problem, but doesn't work for me.
I tried almost every properties for this component, like forcing / checking that the "hmdEnabled" property is set to true and I can't make this work.
Where I can find the THREE.js source code of the component:
https://aframe.io/docs/0.8.0/components/laser-controls.html.
<a-entity laser-controls="hand: left"></a-entity>
The source code for the laser controls is here.
It creates all controller models (source), and adds a raycaster (source).
The controllers utilize the tracked-controls, where is the core source code.
Most of it isn't THREE (the raycaster mostly), depends what exactly are you looking for.
There's a source link on all docs on the right:
My VR experiment's interaction is based on clicking on objects. I'd like it to work on the desktop (with the mouse), on a Cardboard (with a gaze cursor), or with a 3 or 6dof controller (like for example the Oculus Go).
How do I get it to switch based on what's available?
Here's what I have now:
<a-scene antialias="true" cursor="rayOrigin:mouse">
<a-entity laser-controls="hand: right"></a-entity>
...</a-scene>
This works for desktop and OGO, but not on Cardboard. I believe I can add an <a-cursor> for a gaze cursor, but then it's there all the time - I only want it to show up when the user is in Cardboard.
Is this possible? How would I go about doing this? Do I perhaps need to write some javascript to make it work?
If you can have a <a-camera> entity, you can create a custom component, which will add a fuse cursor only on mobile devices.
You could even have a setup like this:
<a-camera>
<a-entity cursor-check></a-entity>
</a-camera>
and add the cursor to the empty entity whenever its needed.
Check whether you're on a mobile device :
AFRAME.registerComponent("cursor-check", {
....
if(!AFRAME.utils.device.isMobile()) return;
and add the cursor component when necessary
this.el.setAttribute("cursor", {
"fuse": "true",
"fuse-timeout": "500"
})
...
Check it out here.
As Nick has noted, there also are two utils which can help distinguish whether you're on a oculus go, or gear vr:
AFRAME.utils.device.isOculusGo ()
AFRAME.utils.device.isGearVr ()
maybe even checkHeadsetConnected () could be of help
I am trying to create a basic scene using daydream controls but the component doesn't seem to be working for me. I am using version 0.6.0.
Here is what my controls look like:
<a-camera position="-0.016155197760135586 1.6 3.256854190620799" daydream-controls="hand:right;model:true;armModel:true" wasd-controls look-controls mouse-cursor></a-camera>
Am I missing something?
Thanks,
according to the docs, the daydream controls are separate entities, like hand entities:
<a-entity daydream-controls="hand: left"></a-entity>
<a-entity daydream-controls="hand: right"></a-entity>
Please make sure You make it this way, and not by attaching the controls component to the camera.
In the following scene, I'm trying to understand why after clicking the sphere to switch cameras and cursors (via.removeAttribute/.setAttribute) still seems to swap back even if I click outside the sphere--even though the scene inspector shows no cursor or raycaster on firstCursorEl to cause the ghost click event. The test scene's at http://codepen.io/anon/pen/GWJrXe, let me know if I'm missing something important! (jhsu mentioned needing to bind render-target-loaded to wait for a loaded canvas element if .removeAttribute('cursor') was called on-init, but I'm assuming that doesn't need to happen on-click.) Here's what the entity HTML given by the inspector looks like after a swap, if it helps:
<a-entity print-onenter="" id="firstCursorEl" mixin="avatarCursor"></a-entity>
<a-entity print-onenter="" mixin="avatarCursor" id="secondCursorEl" raycaster="" cursor=""></a-entity>
Where firstCursorEl is a child of the starter camera, and secondCursorEl a child of the camera we swap to. Since secondCursorEl's cursor/raycaster are aimed away from the swap-button-sphere (unless they're somehow out of sync with the camera gaze's direction?), and firstCursorEl seems to have no such components, how does it still swap back?
This issue was fixed by Don McCurdy: https://github.com/aframevr/aframe/pull/2397 to implement cursor remove handlers.
You can use this build: <script src="https://rawgit.com/aframevr/aframe/84c6431/dist/aframe-master.min.js"></script> to pull it in until 0.5.1 or 0.6.0 is out.