I am not sure if this is really feature request but it suits better than bug report.
What is the current behavior?
When I use get started code into react project, object does not appear on marker. When I change enclosing div element inside index.html to span, object appears but shifted like 20-30 cm away. I have tried this behavior with get started script and same problem occurs there as well.
If the current behavior is a bug, please provide the steps to reproduce.
<body style='margin : 0px; overflow: hidden;'>
<div>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker preset='hiro'>
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
</a-marker>
<a-entity camera> </a-entity>
</div>
</body>
What is the expected behavior?
Works same as html element is not added.
mercem
All 43 comments
HI @mercem that is a strange issue... have you tried not with a-frame but "regular" AR.js and could be interesting to know something more about your react setup/project. Maybe starting from the simplest situation to debug and isolate the problem. Could be that some React Component causing the issue? I am learning Gatsby that is based on React, so i could give to you some little advice....
kalwalt
on 30 Mar 2019
Hi @kalwalt, I used this piece of code because one of the contributors told me that the this is the most recent get started code. I use basic create-react-app project and I added this inside of a default App.js file. So it is just this code wrapped with div element.
As I said even without react when I just wrap this code with div element inside of a body it does not work.
mercem
on 1 Apr 2019
Hi @mercem, I am currently experimenting with AR.js and React as well. However, I can't get AR.js to load properly. Did you include the AR.js library in the index.html file in public folder or did you import the module after installing it through NPM? Thanks for your help.
elailai94
on 10 Apr 2019
I added to index.html but as I said, it does not work properly since index.html wraps app.js with html element :(
If you manage to work with npm or directly from index.html, please tell me
mercem
on 10 Apr 2019
I've run into similar issues with Vue.js in the past, and ended up giving up.
I think the problem here is that AR.js is expecting to be the root element right inside of <body>. In general, AR.js makes a LOT of assumptions about the HTML structure.
As for loading the library, I've been able to load aframe with webpack, but AR.js is unfortunately not packaged in that way. I used webpack-script-loader for AR.js.
andreyrd
on 11 Apr 2019
@mercem @andreyrd i was able to make working the simplest example with aframe, if you want, try this code:
file index.html
<!-- file index.html -->
<script src="./aframe.js"></script>
<script src="./aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<div id=marker></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script type="text/babel" src="af.js"></script>
</body>
and file ar.js
'use strict';
const e = React.createElement;
class AF extends React.Component {
render() {
return (
<div>
<a-scene embedded arjs='sourceType: webcam;'>
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</div>
);
}
}
const domContainer = document.querySelector('#marker');
ReactDOM.render(e(AF), domContainer);
aframe.js and aframe-ar.js must be in the same folder, i taken from the master branch
In this test i didn't notice a shifting in the model, it was instead perfectly centered on the marker.
I tryed also with npx, that is creating an app with create-react-app command, but i hadn't luck at this moment. Maybe i will post the result tomorrow with more time and with an explanation and some piece of code. I hope that this can be helpful... and i would see your results.
kalwalt
on 25 Apr 2019
hi @kalwalt,
This is interesting workaround. Thank you for your effort. As you said I countered this problem when tried with create-react-app. I couldn't understand what is the difference between yours and create-react-app's except the minor differences.
mercem
on 26 Apr 2019
@mercem as i said i tried with the create-react-app cli and but i received some errors while yarn was compiling. Though i don't remember now exactly the error, maybe it's a question of Component location in the app.
I agree with you that there are not such big differences... Only one note to your code: your
I also discovered from the threejs page that there is a react-vr plugin i discovered that is based a lot on threejs maybe it can be proficient to investigate in.
I want to do other tests, maybe i will open a little repo to share these experiments....
kalwalt
on 26 Apr 2019
@kalwalt @mercem @andreyrd
I got a solution for create react app :D!!!
1) set the a-scene in the root of the body tag, keep also the <div id="root"></div> where is the point where create react app mounts the react app
2) wrap the the ReactDOM.render function located on index.js inside a setTimeout, and give it a delay of one second or so.
let me know if that works for you :D
fega
on 8 May 2019
@fega Wow! Great news ! I will try to reproduce your steps and i will inform you of my result.... :smile:
kalwalt
on 8 May 2019
@fega That's really really interesting solution mate grats!
@kalwalt Can you tag me to your result? I am really wondering if it works for you as well
mercem
on 8 May 2019
Unfortunately i have no luck :sob: maybe i had something wrong. My code compile but nothing happens...
Not sure what you did @fega but my code is available in this repo: https://github.com/kalwalt/react-aframe-ar-test
@mercem if you want to take a look, i will appreciate it.
set the a-scene in the root of the body tag, keep also the
<div id="root"></div>where is the point where create react app mounts the react app
i did but react already assign a <div id="root"></div> so not sure to understand, and it is not possible to assign another body tag ( you will recive an error!)
wrap the the ReactDOM.render function located on index.js inside a setTimeout, and give it a delay of one second or so.
This is really necessary?
kalwalt
on 8 May 2019
@kalwalt Please check the changes in my pull request.
fega
on 8 May 2019
@fega i'm looking into your PR , but it seems that still something is not working, maybe some missed dependencies?
kalwalt
on 9 May 2019
@fega @mercem i solved! For anyone else interested this is the repo: https://github.com/kalwalt/react-aframe-ar-test
kalwalt
on 9 May 2019
@kalwalt hehe yes I forgot to add the deps to the index.html file, sorry!
good to hear that you solved it :D
fega
on 9 May 2019
@fega no problem! It will be nice to use AR.j also as a package, i mean a node_module, i hope that in a future this will be possible.
kalwalt
on 9 May 2019
@kalwalt node module package is mandatory for AR.js. I hope they make asap.
@fega @kalwalt Thank you both for your effort!
mercem
on 10 May 2019
@kalwalt node module package is mandatory for AR.js. I hope they make asap.
@fega @kalwalt Thank you both for your effort!
Agree with you! You are welcome :smile:
kalwalt
on 10 May 2019
So I was thinking it is a common use case to have AR.js embedded on a framework App, like React.
I see you guys have achieved that! Can some of you have a repo for that? We can link it on the Readme under 'integrations with framework' section. it could be very useful for many devs.
nicolocarpignoli
on 10 Jun 2019
@nicolocarpignoli yes absolutely! all my examples are here: react aframe example and the other the first example i have to put online, but all the code is written above.
kalwalt
on 10 Jun 2019
You can find also the first example here
kalwalt
on 10 Jun 2019
One of the big benefits of using React is the ability to create Component Architectures. So, what if I want to use AR.js in one view/page/route in an application and not use it in another? Right now using Ar.js turns my entire application into an Web AR application. Thats because in React, the whole application is loaded between one div with an id of 'root' inside the index.html. You can see this taking place within the index.js if you use create-react-app. So, I think it would be beneficial to let users decide what parts of their apps contain WebAR elements and what parts dont, rather than having to deal with the entire app being an AR environment. Thoughts?
JustinStoddard
on 21 Jun 2019
@JustinStoddard absolutely. I will wait for someone who has already tried integration with React.
Please answer on this new thread about integrations with framework, also with react https://github.com/jeromeetienne/AR.js/issues/537
@kalwalt you have a solution for @JustinStoddard problem?
nicolocarpignoli
on 21 Jun 2019
@JustinStoddard I see in this very thread that this issue has been already found and solved by https://github.com/jeromeetienne/AR.js/issues/493#issuecomment-490303718 and https://github.com/jeromeetienne/AR.js/issues/493#issuecomment-490685501
just try and let us know if it works also for you
nicolocarpignoli
on 21 Jun 2019
@nicolocarpignoli Thank you!!
JustinStoddard
on 21 Jun 2019
@nicolocarpignoli @kalwalt I've been messing around with different ways to render the AR.js stuff. I got it to work with react but then I wanted it to only show up on a particular route. Below was my fix for that.
```const renderApp = () => {
if (window.location.pathname === "/webar") {
return
} else {
if (isMobile) {
return
} else {
return
}
}
}
const createMarkUp = () => {
return {__html: '
}
ReactDOM.render(
{renderApp()}
document.getElementById('root')
);
registerServiceWorker();```
JustinStoddard
on 21 Jun 2019
This allows me to use AR.js on different routes without it taking over the application.
JustinStoddard
on 21 Jun 2019
@JustinStoddard my approach was very basic, just to test the simplest approach to implement. I heaven't tried in a Component, and i think,as you point out, it's a reasonable idea. It is one of my next goal. Glad that you manage to make it works.
kalwalt
on 21 Jun 2019
@kalwalt So, I've got it working but only in fullscreen mode. Have you run into this issue?
JustinStoddard
on 22 Jun 2019
But if you inspect the page and take the "position: absolute" styles off the canvas element the object shows up.
JustinStoddard
on 22 Jun 2019
@nicolocarpignoli Sorry for the spam. I'm just close to getting this working. When I'm not in full screen mode the default yellow box in the starter code isnt showing up as expected. I think this is the reason.
<canvas class="a-canvas" data-aframe-canvas="true" width="2102" height="0"></canvas>
For some reason the height of the canvas has defaulted to 0.
JustinStoddard
on 22 Jun 2019
But when I enter full screen mode through the VR goggles button it changes to:
<canvas class="a-canvas" data-aframe-canvas="true" width="2399" height="1799"></canvas>
JustinStoddard
on 22 Jun 2019
Great job @JustinStoddard !
Two things:
- can you share the code of the working example, hopefully with a repo?
- you are not supposed to user the VR toggle button ever. It is not useful, if not causing bugs, on AR.js, cause it is thinked for VR, not AR.
nicolocarpignoli
on 22 Jun 2019
guys please use https://github.com/jeromeetienne/AR.js/issues/537 that is an open issue about integrations
nicolocarpignoli
on 22 Jun 2019
@nicolocarpignoli Sorry for the spam. I'm just close to getting this working. When I'm not in full screen mode the default yellow box in the starter code isnt showing up as expected. I think this is the reason.
<canvas class="a-canvas" data-aframe-canvas="true" width="2102" height="0"></canvas>
For some reason the height of the canvas has defaulted to 0.
Same thing happening to me. Did you find a fix?
joseocasioserra
on 31 Jul 2019
@joseocasioserra @nicolocarpignoli I think you guys will need to edit and css and attributes manually until you get it working, probably every use case is different and will not a valid solution for all.
fega
on 31 Jul 2019
@fega I have tried to play around with the attributes which results in offsets in the 3d object. I think it might have something to do with the rendering on react and calculating the height of the canvas since it is forced to 0 even if you try to change it.
One approach I tried was change the position from 'absolute' to something else and that results in offsets which is also problematic. I will leave it for now since it seems it's a bigger issue than just simple CSS management.
Thanks for the prompt reply!
joseocasioserra
on 31 Jul 2019
But when I enter full screen mode through the VR goggles button it changes to:
<canvas class="a-canvas" data-aframe-canvas="true" width="2399" height="1799"></canvas>
this is true, I had same problem. Have to investigate what caused it
nicolocarpignoli
on 6 Aug 2019
@joseocasioserra I have not found a fix. I've ben trying to edit the CSS manually but regardless of what I do it doesn't want to budge.
JustinStoddard
on 6 Aug 2019
@JustinStoddard Same issue here. I tried a couple of things, but there seems to be some code on the library that resizes elements. I guess we need to wait for a fix
joseocasioserra
on 6 Aug 2019
Hello, everyone! It looks like I have found one more way how to implement AR.js into React to use it as React Component. Here you can check my attempt.
denisstasyev
on 12 Oct 2019
Related issues
evaristoc
路
5Comments
Samsy
路
5Comments
usama-ghufran
路
5Comments
nicolocarpignoli
路
4Comments
lslzl3000
路
7Comments
Most helpful comment
I made a separate repository with the results of my work and tips for embedding AR.js in React. You can find it here. Hope it will help a lot of people.
It contains an implementation of AR.js as a React Component for any projects. You can see this component here.