On click vs navigating

This topic has 5 replies, 4 voices, and was last updated 3 years, 3 months ago by xeon.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
2020-05-18 at 6:43 am #27693

zeitgeist
Participant

Hey,

Our project requires that most objects are clickable.
Now we´re running into the following problem:
If you try to navigate the model you might start your click&drag over an clickable object. As soon as you click the “when clicked” event will be executed.

How it should work:
While hovering over an clickable object:
-On mouse down nothing should happen.
-If you drag the mouse you can navigate the scene as expected (like clicking outside the object)
-If you release the mouse without dragging the “click” event will be execute.

Another issue:
The “when clicked” event is executed even on middle and right mouse button.
Any way to prevent this?

Thanks and br

2020-05-18 at 7:36 am #27696

zeitgeist
Participant

I found this thread with the same issue from last year:

Clicking vs Dragging

The solution seems kinda complicated.
Are there any new developments since this thread which will make it easier to differentiate between click and drag?

2020-05-18 at 8:02 am #27698

web
Customer

I got the same issue as you described, and I already responded to the thread you linked.

I also tried the solution mentioned in the thread. It works, but sadly it seems to drop the performance quiet heavily for my application, so I deactivated it.
But I’m confident that the Verge Team will implement such a function in the near future.

2020-05-19 at 5:08 am #27721

zeitgeist
Participant

Not finished yet, but here is my first version:

2021-07-27 at 12:37 am #43260

raphroberts
Customer

Hello!

Running into the same issue here. It looks like the solution posted by zeitgeist will work – but I would like to suggest this would be a good thing to add into the verge3D user interface. Other programs I have used (such as Tumult hype) can differentiate between a drag and a click without having to build custom code.

Regardless, thanks @zeitgeist for posting your solution

2021-07-27 at 4:28 am #43264

xeon
Customer

There are several options to determine if a click is intended to be a click on an object or a click for a camera drag. The options are even greater if you play with the number of potential layers for navigation. (V3D Scene level, vs HTML document level).

One way is to set a variable when you click/hover on an object. You can assign the variable a length of time to be true and while true an If loop in your on drag events will not work.

Alternatively, you can monitor mouse movement. On a purposeful click the order of logic is hover, then click, then mouse stays within the object. If those three conditions are satisfied, then click object else allow drag.

There is also the ability to time how long the mouse is over and within an object so as to determine intent and if said time reaches a threshold, allow the click to work, else drag.

There are many solutions some that will work better than others that require a little more effort. Some can consume cycles and eat up performance, but there are lots of choices.

The nice thing is Verge allows us to create/program and develop the code that is best for our needs without having the bloat of too many pre-packaged solutions.

As we create more and more complicated scenes with HTML/CSS overlays and V3D scenes, and other third party software the screen space gets cluttered with clickable things on two or more layers. We as developers need to keep in mind good UI/UX as well and not make things difficult to navigate.

On the off chance, a scene consists of 1000s of clickable objects and the clickable space far exceeds the empty space to drag…I think a different method of navigation would be more appropriate.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com
Author

Posts