AR.JS Make Box Flat
Question
I am using my AR.JS to display an image over the AR pattern. I am wondering if it is possible to make this not a full box but instead only one side so when I move the camera up I cannot see the size and top of the box? I thought changing position/size would do it but that does not work. Anyone got any ideas? Does not seem to be much info on this as most people want 3D.
My code is attached:
<!-- include a-frame -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include ar.js for aframe -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>
<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
<!-- add some info at the top of the page -->
<div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1; color:white; font-size:30px;'>
<a>Prototype Coffee</a>
</div>
<!-- Define your 3d scene and enabled ar.js -->
<a-scene embedded arjs='trackingMethod: best; debugUIEnabled: false;'>
<!-- Create a anchor to attach your augmented reality -->
<a-anchor hit-testing-enabled='true'>
<!-- Add your augmented reality here -->
<a-box position='0 1.0 0' material='side:single; src:https://.com/playground/aframe/examples/img/coffee-01.png;'>
</a-anchor>
<!-- Define a static camera -->
<a-camera-static/>
</a-scene>
</body>
1 answers
solution1
1 2018-06-11 14:55:30
Try using an <a-plane> instead:
<a-plane position='0 1.0 0' material='src:https://.com/playground/aframe/examples/img/coffee-01.png;'></a-plane>
Working codepen here .
If you don't see the plane, it could be a matter of rotation:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.