We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Overlay webGL – pointer-events

Home › Forums › Programming › Overlay webGL – pointer-events

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • 2020-10-05 at 11:34 am #33819
    web
    Customer

    I struggle a bit with an idea I had. I would like to overlay webGL content over prerendered images.

    Therefor I try to sync verge with a 360 imagerotator. This is working so far, but now I struggle with the mouse events. At first I had the “pointer-events” disabled for the v3d-container. The imagerotator plugin then switches the images dynamically like in this example:
    https://dreidesign.com/wordpress04/wp-content/uploads/otto-wulf/bf3/
    In verge I have the camera animated to the exact position like for the renderer images. So whenever you drag in the imagerotator plugin the correct frame is set.

    Problem now is, that I would like to have hover and click events from the webGL. But because I disabled the pointer-events this doesnt work.

    I now struggle a bit what would be the best way connect the parts:
    First I thought of using the on drag event and set the camera animation to the specific frame and I could easily tell the imagerotator plugin to display a specific frame. But I dont know how to use the drag event to get usable coordiantes to work with. Also the drag event doesnt work for the background.

    So maybe a better approach would be to use the standard camera controls, but I dont want to “really” control the camera. But set a specific animation frame.

    Hope you know what I mean.

    2020-10-05 at 11:38 am #33820
    Yuri Kovelenov
    Staff
    web wrote:

    But set a specific animation frame.

    A possible approach can be animating your static camera in 3ds Max, and then using the puzzle set animation frame to set the required view in sync with the imagerotator.

    Chief 3D Verger | LinkedIn | Twitter

    2020-10-05 at 1:26 pm #33825
    web
    Customer

    I did that. So that isn’t a problem. But because the webGL is overlaying the imagerotator container, I can just choose to use mouse events for v3d or the imagerotator not both. And this is the problem I currently have.

    When I set the pointer-events for v3d container to “none”, I can have a perfect sync with the “set animation frame” but I loose the possibility to have hover and click events in the v3d.

    2020-10-05 at 2:34 pm #33826
    Yuri Kovelenov
    Staff

    may be this plugin provides some API by using which you can either set or get the status data to sync it with Verge3D?

    Chief 3D Verger | LinkedIn | Twitter

    2020-10-05 at 3:13 pm #33833
    web
    Customer

    I think we not talking about the same.

    I’ve prepared an example, hope its understandable:
    The first url is like it should be. The webGL overlays the imagerotator and the webGL container is set to “pointer-events:none”. Rotating works like it should be:
    https://dreidesign.com/dev/

    But I also would like to have the webGL clickable/hoverable. Therefor I would need to set the pointer-events back to normal. But then I loose the events of the imagerotator. See my second example:
    https://dreidesign.com/dev/index02.html

    So at the moment my approach would be. Disable all kind of camera controls in v3d. And have the v3d background ignore any pointer events so that they are passed to the imagerotator.

    2020-10-06 at 6:32 am #33854
    Yuri Kovelenov
    Staff
    web wrote:

    So at the moment my approach would be. Disable all kind of camera controls in v3d. And have the v3d background ignore any pointer events so that they are passed to the imagerotator.

    this seems to be a logic approach. But it does not work?

    Chief 3D Verger | LinkedIn | Twitter

    2020-10-06 at 7:35 am #33871
    web
    Customer

    I dont know how I can ignore pointer events for just the v3d background. I can only disable pointer events for the whole v3d container.

    2020-10-06 at 7:47 am #33874
    Yuri Kovelenov
    Staff

    you mean the 3D canvas element? because there is no a dedicated background element. The underlying HTML element serves as background if the 3D canvas is set to be transparent.

    Chief 3D Verger | LinkedIn | Twitter

    2020-10-06 at 7:51 am #33875
    web
    Customer

    Yeah I set the background as transparent. When there is no way to pass pointer events to the 3d canvas and the underlying html element, I need to find another approach.

    2020-10-06 at 11:45 am #33897
    web
    Customer

    Would it be possible to let the camera rotate/orbit in predefined angles? Or can you remap the orbiting to set animation frames instead of navigating the camera?

    2020-10-06 at 12:02 pm #33900
    Yuri Kovelenov
    Staff
    web wrote:

    Or can you remap the orbiting to set animation frames instead of navigating the camera?

    yep this is possible. see my suggestion above.

    See also this tutorial: https://www.youtube.com/watch?v=py0LGEsGxIU&t=753s

    Chief 3D Verger | LinkedIn | Twitter

    2020-10-06 at 1:26 pm #33911
    web
    Customer

    I just see how to set animated frame by scrolling. Not by dragging like orbit controls.

    2020-10-06 at 2:00 pm #33913
    Yuri Kovelenov
    Staff

    yep, this case is covered in the tutorial by the link above

    Chief 3D Verger | LinkedIn | Twitter

    2020-10-06 at 2:13 pm #33915
    web
    Customer

    Sorry, dont get it. I dont need scrolling and I already know how to setAnimatedFrames. I think its to advanced stuff, which would need some serious reworks. Will try to get this solved on my own.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.