iFrame created with vgl-renderer

[MichelPWeber]

When inspecting the elements in the browser, I see there is an iframe present which forces the canvas element to a different undesired vertical position.

The template used is:

<template>
  <div>
    <vgl-renderer scene="scene" camera="cam" class="renderer" antialias @mousemove="onmousemove">
    </vgl-renderer>
  </div>
</template>

Here are the elements in the browser:
<div data-v-6b38e6b1="" class="renderer"><iframe style="visibility: hidden; width: 100%; height: 100%; margin-right: -100%; border: none;"></iframe><canvas width="800" height="500" style="display: block; width: 800px; height: 500px;"></canvas></div>

Desktop (please complete the following information):
Chrome Version 87.0.4280.141 (Official Build) (64-bit)
OS Name Microsoft Windows 10 Home Version 10.0.18363 Build 18363

Not clear if this is a bug or I'm doing something incorrect with my implementation.

[h-ikeda]

Thank you for trying to use VueGL.

Your code seems correct, but maybe you have to adjust styles not to be shown above. #963 might help you.

I'm thinking refactoring this part by using the ResizeObserver. But even after implemented that, some old browsers those don't support the ResizeObserver need the style adjustment.

[MichelPWeber]

Thank you for the response. I am trying to set height: 0px !important; and see if that fixes. Is there documentation on how to handle mouse events from the vgl-renderer? Thanks

…

On Thu, Jan 28, 2021 at 5:25 PM IKEDA Hiroki ***@***.***> wrote: Thank you for trying to use VueGL. Your code seems correct, but maybe you have to adjust styles not to be shown above. #963 <#963> might help you. I'm thinking to refactor this part by using the ResizeObserver. But even after implemented that, some old browsers those don't support the ResizeObserver need the style adjustment. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1127 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAZ2TSO2I6P7SQKPK7P4VDTS4IE63ANCNFSM4WXHQZXQ> .

[h-ikeda]

Is there documentation on how to handle mouse events from the vgl-renderer?

No, mouse event handlers are not implemented officially yet.

If you want to handle only things not related to rendered object, Vue's usual event handler may work.

If you have to handle object related events, it needs raycasting. Some user likely have tried this by implementing ray caster directly, so might be your help (#550) .

[lutuh]

Is there documentation on how to handle mouse events from the vgl-renderer?

In case you are looking for OrbitControls, you might find this useful: #100 (comment)

[arketec]

I am having the same issue with the iframe pushing down the canvas content, was this ever resolved?

[h-ikeda]

VueGL v1.0.0 have been released. It must resolve the layout problem since v1 renders the canvas without a wrapper element.