search

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.8k stars 2.22k forks source link

How to control display area #474

Closed Suresh3d closed 5 years ago

Suresh3d commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

droid001 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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