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
Related
I'm taking a version of our VR experience (repo here: https://github.com/EFForg/spot_the_surveillance) and making a purely desktop version for demonstration purposes.
I've added cursor="rayOrigin: mouse" to and some changed some mouseenter events to click events. Everything is mostly working except that as I mouse over the scene, I repeatedly getting this error: "Uncaught TypeError: t is null", which refers to the following code in cursor.js.
// Ignore events further away than active intersection.
if (this.intersectedEl) {
currentIntersection = this.el.components.raycaster.getIntersection(this.intersectedEl);
if (currentIntersection.distance <= intersection.distance) { return; }
}
How do I resolve this error? It causes a significant lag time in the experience.
Thank you!
Looking at the Mouse Click Example linked from this page was a good place to start: https://aframe.io/docs/1.0.0/components/cursor.html#intersection-data
Unfortunately the example is using aframe 0.7.0, so I had to read through the animations documention for 1.0.4 and adapt accordingly: https://aframe.io/docs/1.0.0/components/animation.html
I also had to update the version of aframe-event-set-component.js I was using.
Between those two sources of information and the version updates, I was able to get things working.
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
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 would like to inject touch events such as "touchstart", "touchmove", "touchend" into the QWebEngineView. Then, I should be able to capture the events in my html page running in the webview for example using jquery like below :
$(document).on("touchstart",function() {
console.log("Touchstart");
});
I tried using QMouseEvents as explained in this SO answer and it works. But not the QTouchEvents.
Any suggestions ?
"StageOrientationEvent.ORIENTATION_CHANGE" event does not fire (dispatch) when the Auto Rotate feature of the device is disabled.
I'm developing a game that only must work on PORTRAIT mode. I speculate many users unchecked this option display settings.
How can I detect screen rotation regardless of device setting. Should I use accelerometer for this purpose or there is a better way?
If your game must always work in PORTRAIT mode; then you don't have to worry about device orientation changes. What you want to do is make sure your game always launches in portrait mode despite what the device settings are.
In the Application Descriptor file; set these values:
<aspectRatio>portrait</aspectRatio>
<autoOrients>false</autoOrients>
The application descriptor file is the "MainApplication-app.xml' file that Flash Builder will create as you create your main application.
In documentation theory those changes should do it; but if memory serves me I had problems in some versions of Android, where the app launched in the wrong orientation and would not change.
So, inside my application I added applicationComplete and activate handlers on my main application file and used those methods to specify the aspect ratio of the game. Something like this:
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
applicationComplete="viewnavigatorapplication1_applicationCompleteHandler(event)"
activate="viewnavigatorapplication1_activateHandler(event)">
<fx:Script><![CDATA[
import mx.events.FlexEvent;
protected function viewnavigatorapplication1_applicationCompleteHandler(event:FlexEvent):void{
this.stage.setAspectRatio( StageAspectRatio.PORTRAIT);
}
protected function viewnavigatorapplication1_activateHandler(event:Event):void{
if(this.stage){
this.stage.setAspectRatio( StageAspectRatio.PORTRAIT );
}
}
]]></fx:Script>
</s:ViewNavigatorApplication>
I have no memory of testing this specific use case on iOS Devices; so it is possible I only had the problem on Android. Or it is possible I did the Android code first and that is why I never had a problem on iOS.
Although I have used this method, I cannot take credit for it but please see: Please see this thread
Remember if you are developing for iOS, you CANNOT LOCK Device Orientation. You HAVE to add event listeners to handle orientation changes for iOS. The very first app I did got rejected for trying to lock orientation.