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
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)
AFrame has a lot of cool stuff built-in, like support for controllers like gamepads.
In their documentation they recommend using the component "tracked-controls" which in turn will select the correct device component according to what is available for the browser. This seems not to work at all for me when in desktop mode in aframe v1.0.4
I'm using
Chrome v81.0.4044.122 (windows)
xbox gamepad
aframe v1.0.4 (latest npm package as of writing this)
I can find the gamepad when querying the browser gamepad api directly.
I declare my entity like this: <a-entity mycomponent tracked-controls></a-entity>
I can then see that aframe then transform this to <a-entity mycomponent tracked-controls-webxr></a-entity> as explained in the docs.
In my custom component mycomponent I then want to listen for the gamepad events like so
events: {
"controllerconnected": function () {
log.info("controllerconnected");
},
"buttonchanged": function () {
log.info("buttonchanged");
}
},
But I never manage to get those events.
So I dug into the source code to see when aframe is attaching it's internal gamepad event listeners, and from what I can read it all boils down to a dependency on the variable isWebXRAvailable when in desktop mode AND the presence of component tracked-controls-webxr.
var isWebXRAvailable = module.exports.isWebXRAvailable = !window.debug && navigator.xr !== undefined;
That !window.debug will exclude just about every desktop browser?
So my question is then, are gamepads supposed to be supported in desktop mode at all?
Or have I totally missed to point on how to use this feature, and if so please point me in the right direction :)
tracked-controls is designed for spatially tracked controls like Vive Wands or Oculus Touch provided with VR headsets. There’s no out of the box support for traditional gamepads. You can use the Gamepad API to integrate manually or look at movement-controls
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
I am using A-frame for building a VR website. I wish to enter vr-mode without having to press the 'enter-vr' glasses on the oculus go more than once. For my application most of the html (including the a-scene) get reloaded (but the header/footer remain in place). For pc browsers this code works:
HTML:
<a-scene id="eqvrscene">
</a-scene>
<button id="enterVRButton" onclick="$('#eqvrscene')[0].enterVR();"> Enter VR </button>
JS:
$("#enterVRButton")[0].click();
but this does unfortunately nothing on the oculus go. Does anyone have a suggesting how to tackle this problem?
This may or may not be related, but you have a typo in your <a-scene> tag.
It's difficult to tell from your code, but are you sure your scene is loaded when you click the button?
Try first listening for the loaded event of the scene, and then setting up a listener for the button:
// Scene entity element
var scene = document.querySelector('a-scene');
// Button element
var enterVRButton = document.querySelector('#enterVRButton');
// Check if scene has loaded, otherwise set up listener for when it does.
if (scene.hasLoaded) {
addButtonListener();
} else {
scene.addEventListener('loaded', addButtonListener);
}
// Add our button click listener.
function addButtonListener() {
enterVRButton.addEventListener('click', function() {
scene.enterVR();
});
}
In A-Frame master branch, there is an API in place for adding a custom button for entering VR, so it may be released in 0.9.0. See the master docs: https://aframe.io/docs/master/components/vr-mode-ui.html#specifying-a-custom-enter-vr-button
If you're trying to automate the click event, I don't believe this will work in many browsers, as a user interaction is required for enterVR().
It’s not posible. The WebVR API does not allow to enter VR mode automatically. It requires a user gesture like a click that cannot be synthetized like your example does. The only exception is when a page enters VR mode after user gesture, new pages are granted permission to enter VR automatically after navigation. A-Frame already accounts for the scenario and no extra application code is necessary.
Firefox also grants permision to enter VR automatically on page reload. That’s why you might be seeing a different behavior on desktop. Your code is not necessary, A-Frame auto enters VR automatically already. This case is not covered in the Oculus Browser
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.