How does aframe walking/ clicking work on mobile phones vs desktops? - aframe

I want to create a webvr scene that allows a user to click on objects as events and move around the scene. Is this possible using a-frame? I know that a frame allows you to do both of these with a mouse and wasd keys on a computer. How does this work on mobile phone? Can the user still walk around a scene?

Yes, it is possible to click objects while in mobile/VR and move around, but it is somewhat complex. Lets break it down.
1) Clicking without using buttons is called fusing. It involves the user hovering over an object for a certain period of time, and then a fuse event is thrown, which can be caught by a listener just like a click event.
You can set the fuse properties inside the cursor component, and generally it is a good idea to include a small ring locked to the center of the camera view (as a child of the camera) so the user knows that an implicit click occurs inside the ring. You can set that up like this:
<a-entity camera look-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-entity>
more on the cursor here:
https://aframe.io/docs/0.9.0/components/cursor.html#sidebar
You also might want to implement a rollover state, to alert the user that an object is clickable, say by changing color on mouse over. Here is a glitch that show how to set up and handle a rollover event:
https://glitch.com/~rollover-rotate
Walking around on a mobile device is no problem using wasd-controls. Clicking on the screen allows navigation. However, if you are using the phone as a VR device, wasd will not work. And even if it did, (some headsets have mouse buttons), the viewer would probably get sick if the camera moves but their body does not. The usual trick is to implement a teleportation system, like the Vive uses, but that is somewhat complex.
Here is a glitch that shows how to build a teleportation system.
https://glitch.com/~aframe-teleport-controls-extra
good luck!

Related

Virtual reality world camera html

I made a virtual reality world and used the tag to move the Camera around (the person viewing it). And when I use my phone to view my world, it works until I put it on the mode meant for Google Cardboard (VR headset)
Animate a camera rig, not the camera itself. More info in similar question
The begin attribute defines when the animation starts playing: a delay or an event. I don’t see any events fired in your code that trigger the animations.
Remove the begin attributes to see the animation playing: https://glitch.com/edit/#!/caring-otter
Also use A-Frame 0.8.2 instead of 0.8.0
Also notice you have two position animations under camera. One will override the other.

Automatically move camera A-frame js

I am creating flat tour using a-frame js . I wanted to move camera automatically.currently I am doing that using mouse .can anyone help me?
To do tweening in A-Frame, you'll probably use the a-animation system:
<a-entity camera position="0 1.6 0">
<a-animation attribute="position"
dur="2000"
easing="linear"
to="0 1.6 -10"></a-animation>
</a-entity>
JSFiddle. To customize this, see the animation documentation.
Aside: For VR scenes, moving the camera automatically is often uncomfortable for users, and should be done rarely and without acceleration, if at all.
This along-path component is also good for interpolating an entity's position along a path: https://jsbin.com/dasefeh/edit?html,output

Flex 3 - sporadic erroneous mouse out events on slider thumb

The slider thumbs in my Flex 3 application usually work correctly, but often they seem to become insensitive to mouse downs on what should be thumbPress events.
It turns out that mouseOut events are being fired as the mouse moves away from the edge of the thumb towards the center. The thumb is sensitive to mouseDown events only when it is in the "over" state.
I am seeing the same behavior:
-- Displaying the default thumb rather than my custom class
-- Using a hitArea sprite (I tried a child TextInput sized to cover the thumb with alpha 0).
Can anyone suggest either a fix or a workaround? I can identify the faulty mouse out events, but then don't know how to compensate, for example, by reestablishing the "over" state, or perhaps with programmatic control of the mouse.
Thanks,
Peter
Nevermind, I figured this out myself. The mouse-out events are due to mostly invisible objects in the way -- the result of a workaround from long ago that I forgot about! :-(

Flex: How can I drag the actual element rather than a proxy?

I'm trying to implement a dragging system which can only be described as similar to dragging the map on Google Maps. I can set up dragging easily in Flex, but unfortunately the standard model of dragging i.e. dragging an element proxy and dropping it in another element is not what I'm after.
Is there anything built into flex where the actual element rather than a proxy can be repositioned in a different place within the same parent? Or will I have to hand code something using mouse events as you would if implementing a solution in JavaScript?
Cheers,
Chris
DragManager and its associated constructs are specifically for dragging and dropping. You will likely want to place your draggable item inside of a canvas with scroll policies turned off, and capture MOUSE_DOWN on the object, then activate MOUSE_MOVE, translating its origin analogous to the change in mouse position, deactivating the MOUSE_MOVE listener when MOUSE_UP or Event.MOUSE_LEAVE fires on the stage.
Ok found a much more simple solution! Most elements have a dragStart and dragStop method which can be attached to the mouse down/up events.

Moving a Flex GUI window confused by underlying Papervision3D viewport

I'm developing a Flex 2 application, and I noticed that part of the library which is responsible for moving GUI windows (TitleWindows) around when you drag them with the mouse gets confused if there is a clickable (buttonMode = true) sprite beneath them. When I say confused, I mean that the window is moved around normally for a while, but then at some point "jumps" into the upper left corner of the flash app, and makes very minor movement there. Then at some other point it jumps back. It is more difficult to explain than to experience, so please go and see for yourself. Here's how to reproduce the problem:
Go to http://www.panocast.com
In the left sidebar, choose "Real Estate"
Just below the bottom right corner of the flash window, choose "high res" by clicking on the rightmost icon.
When (part of) the video loads, click on the staircase. A TitleWindow will pop up.
Try dragging it around the screen. When the mouse cursor is moved above one of the clickable areas (like the staircase), the window is misplaced.
(Sorry, but can't give you a direct link, part of the page is generated dynamically.)
(What's makes the problem even more interesting is that for me, in "low res" mode, the problem does not occur! There is very little difference between the various modes.) I would really appreciate if someone told me what was going on here and how it can be fixed.
I'm not sure if it matters, but the underlying sprite is actually not just plain sprite, rather it is a Papervision3D renderer object with some 3D elements in it. I'm telling this because it is possible that the incorrect mouse coordinates somehow come from the texture UV mapped on the clickable objects.
I've managed to replicate this on the low res mode as well, so I don't think it's related to the resolution.
This looks to be because the MouseEvent is being handled by the TitleWindow AND the Papervision3D window. Perhaps you need to force stopImmediatePropagation() on one or the other? Or maybe switch off the MouseEvent handling for the Pv3D window when the TitleWindow pops up?
That's a tough one to debug without some source; something's apparently calling either move() or setting x and y properties on that TitleWindow and scheduling it be moved.
When I first read the post, it "smelled" like maybe a rotation miscalculation somewhere (using Math.atan vs. Math.atan2 can sometimes have that kind of effect), so you're right, it could have something to do with PaperVision, assuming you're not using Math.atan or setting rotation properties yourself anywhere. Just thought I'd mention it, though it's probably not happening in your case. You never know, though. ;)
More likely the LayoutManager is moving the component in response to a property change on the component. The Flex docs explain that in addition to setting its x and y properties, and explicit calls to move(), a UIComponent's move event can also be triggered when any of the following other properties change:
minWidth
minHeight
maxWidth
maxHeight
explicitWidth
explicitHeight
PaperVision or no, maybe that info might help you isolate the source of the move. Good luck.
I got this figured out. Apparently, this is a Papervision3D problem. There is a class deep inside Papervision3D called VirtualMouse, which is supposed to generate MouseEvents programmatically. This happens, for example, when the user interacts with any of the interactive objects on stage, e.g., a Plane with an interactive material on it (as in my case).
The problem is that the x and y coordinates of the generated event represent texture UV coordinates (just as I suspected) and not real world screen coordinates. When a TitleWindow (or any Panel object) is dragged, a "mouseMove" handler (among others) is added to the SystemManager, which then uses the stageX and stageY properties of the event object to determine the new position of the window. Unfortunately for VirtualMouse's mouse events, these are invalid, since the original x,y coordinates, which are probably used to determine the global stage coordinates are, as I said, not screen coordinates.
Honestly, I'm still unsure whether the events dispatched by VirtualMouse are used anywhere within Papervision3D itself, or they are just offered for convenience, but they sure make it difficult to integrate a viewport into a Flex program. Assuming that such events aren't necessary for PV3D itself, there is a one-liner fix for my problem, which must be added right after the creation of the viewport:
viewport.interactiveSceneManager.virtualMouse.
disableEvent(MouseEvent.MOUSE_MOVE);
BTW., there was a very similar (or rather, as it turns out, the same) bug with dragging sliders, also fixed by this line.

Resources