dataarts / dat.guiVR

A flexible graphical user interface for changing variables within WebVR.
https://workshop.chromeexperiments.com/examples/guiVR/
Apache License 2.0
311 stars 50 forks source link

Drag GUI not working with mouse #31

Closed customlogic closed 8 years ago

customlogic commented 8 years ago

When you click the GUI to drag it to a new location, the GUI disappears until you release the mouse button

mflux commented 8 years ago

Hm.. I'm not sure how to implement mouse drag in a 3D space. Does it require a plane to interact against? I guess I could look at an example.

mflux commented 8 years ago

It seems like the only way to get this to work is you have to expose dat gui to THREE's camera:

                    plane.setFromNormalAndCoplanarPoint(
                        camera.getWorldDirection( plane.normal ),
                        INTERSECTED.position );

And then raycast against that plane in order to move objects.

This means we'd have to change the API and force the camera in GUIVR's constructor:

      const gui = DATGUIVR();

Alternatively we can require sending the camera in when enabling mouse:

      gui.setMouseEnabled( true, camera );

What do you think?

customlogic commented 8 years ago

Will we need to pass in the renderer as well? gui.setMouseEnabled( true, camera, renderer );

Otherwise, how would the mouse know size and position of the canvas element (for example a webGL canvas that's not the full size of the browser window, and partially scrolled off the page)?

mflux commented 8 years ago

That's a good point. I need to check elsewhere if we are using canvas size... because I may have defaulted it to window.innerwidth/etc.

On Tue, Sep 27, 2016 at 12:15 PM, Jeff Nusz notifications@github.com wrote:

Will we need to pass in the renderer as well? gui.setMouseEnabled( true, camera, renderer );

Otherwise, how would the mouse know size and position of the canvas element (for example a webGL canvas that's not the full size of the browser window, and partially scrolled off the page)?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dataarts/dat.guiVR/issues/31#issuecomment-249968207, or mute the thread https://github.com/notifications/unsubscribe-auth/AA_j0Ay6IaKno-1UN7z4gjRkh35TKy4Wks5quWtBgaJpZM4J_Zl1 .

customlogic commented 8 years ago

I've made a start on this issue with 08976f414dbe0e73739e7b121144f127178dfb58 , but I think you'll need to take it from here.

I changed setMouseEnabled(), into two functions: enableMouse(camera (optional), renderer (optional)), and disableMouse(). I'm not sure if this is the cleanest API, so feel free to re-jigger. Using the mouse in a small canvas works, and I've got a new test case for it: http://localhost:8000/tests/misc/small_window.html

mflux commented 8 years ago

finished e886cd9ed675192508d8852ed4d13cce36f21e08

customlogic commented 8 years ago

Woohoo! This is so satisfying to use. Nice one :+1: