Ar.js: How to control display area

[Suresh3d]

Hi,

I am threejs developer and now started learning AR.js. One thing I noticed that , while I launch my AR application the camera display is covering whole window. Is there a way to control this display area?

For example I want to have a square box in middle of the window , and in only that area I should be able to see camera view. In remaining places (outside of the square ) I would like to add some buttons or some other stuff , so that I can try to interact with marker.

Please let me know if there is a way to do it.

Thanks in advance.

[droid001]

You could do it just with CSS:

body video {
  top: 5rem!important;
  right: 10%!important;
  bottom: 5rem!important;
  left: 10%!important;
}

Or something similar.

[commentatorboy]

@droid001 I assume that the video also have to be position: fixed right?

[droid001]

Not necessarily. If your body covers 100% of your screen then position:absolute is fine. I tend to avoid fixed positioning for performance reasons. Look out for setting 100vh on iOS and its variable height when the navigation bars disappear.

[petrenko-alex]

I have a similar problem where I need to control the display area.
I'm currently trying to integrate AR.js into my Vue.js app. I also use Vuetify for UI. My layout is in the root div#app but

Does anybody know how to fix that?

[petrenko-alex]

You could do it just with CSS:

body video {
  top: 5rem!important;
  right: 10%!important;
  bottom: 5rem!important;
  left: 10%!important;
}

Or something similar.

This solution doesn't help.

[janpio]

Please open your own issue @gafk instead of hijacking unrelated ones.
(For layering problems the solution is usually to use z-index on one of the elements to instruct the browser to change the natural or existing order.)

[petrenko-alex]

Please open your own issue @gafk instead of hijacking unrelated ones.
(For layering problems the solution is usually to use z-index on one of the elements to instruct the browser to change the natural or existing order.)

Sorry hor hijacking. I thought the problem has the same root. So thath's why I write here.
And thank you. I've managed to fix my issue with z-index