Is it possible to get the a-frame look-at component to look at the default camera? Since it does not have an ID or a class by default I don't know how to target it.
I have tried adding [camera] as the selector value as per the docs like so;
<a-text
value="Look at test"
look-at="[camera]">
</a-text>
but it does not seem to work for me. I feel I am missing something obvious here.
Any help appreciated
What you are doing is correct, but at the time the look-at component is initialized, the camera is not yet on the scene.
Try creating a component, which will wait until the scene is loaded,
this.el.sceneEl.addEventListener("loaded", (e)=>{....
or at least for window.onload.
Check it out here.
<a-text value="Look at test" look-at="#cam"></a-text>
<a-camera id="cam"></a-camera>
this should work.....
Related
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)
All is in the title...
I would like to trigger at application startup this definition in css :
.jewel.button:focus
But I don't see any setFocus or focus property on j:Button
Could you tell me how to do ? Thanks
Regards
UPDATE: This is no longer right. Recently SetFocus bead was removed and StyledUIBase got "setFocus" method. Use it instead of the code below.
Use the Basic bead SetFocusrecenlty added:
<j:Button text="Hello!" emphasis="secondary">
<j:beads>
<js:SetFocus enableFocus="true"/>
</j:beads>
</j:Button>
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.