-
Notifications
You must be signed in to change notification settings - Fork 948
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
AR.js with new ES6 standard and npm package #234
Comments
I sucessfully integrated AR.js in a Vue.js project and it works. https://github.com/LucaJunge/arjs-vue I noticed that I still get a warning: It doesn't work without the THREE import however.
I noticed some issues regarding the resize of the video element at load. See the comments in the ARScene.vue file for reference. Maybe that's a vue specific issue and "mounted()" is not the right point for the code. I will test that further. Using a framework like React or Vue opens up the possibilities of using a Single Page App together with routing. AR.js does not seem to support that, as the video and canvas elements get appended to the body of the page and also change its width and height, which breaks the layout of a Single Page App. I think we should be able to select an element where the width and height of the video and canvas change according to its size, right? |
Hi, i tried import in a Next js project, but not work, maybe by the dependencies of axios. |
that's great! thank you for testing, and yes i also saw that multiple instances of Threejs. I left a note on the PR.
why you need to do this? Anyway this is not important as we haven't yet a npm package. We will publish a beta package it when it will merged in the dev. I can say that it will be a scoped name as : @ar-js-org/ar.js because i created a npm organization.
It could be possible, that need more tests.
I think that will be space for more enhancement in a future PR, we should reach to an end and release it. That you question has a complete meaning. |
Yes post the code and some logs, thank you! 😄 |
This wasn't really necessary, thats true, but I wanted to follow your suggestion of using the ar-js-org package name but of course, this can be freely chosen right now when pulling it directly from github.
Yes, getting this library to work stable in ES6 at first is important. For now, I figured out a hacky workaround for Vue (and potentially React as well). I'm posting it here for anyone interested: React's equivalent seems to be |
Hi, i create a new react project and import with npm this repository, but said this message: npm i https://github.com/AR-js-org/AR.js.git#595a5c1c7020d3dd46f7082f63b5b7cca6d376e added 59 packages, and audited 2119 packages in 42m 138 packages are looking for funding 5 vulnerabilities (2 low, 3 high) To address issues that do not require attention, run: Some issues need review, and may require choosing Run |
Hi @jblnco-ing, that is strange... can you try pulling the Ar.js npm package from this this commit instead? |
@jblnco-ing have you tried again? Did you solved? Note: |
I'd like to help with developing the Typescript types to get intellisense when working in vscode. What is the best way to approach and contribute? Is it worth forking this project and building a |
Hi @karltaylor you are welcome! May we discuss this in another issue? i can say that first it would require to develop the artoolkit5-js version and then the typed AR.js version. |
Any progress about npm package yet? I tried this in my react app:
added this to my package.json: ERROR
Fixed: => First of all look that you change from the master branch to ES6 branch and copy the commit #hash from there for your package.json:
|
I've one question: is the ES6 branch recommended to use with A-Frame? |
Hi everyone, I made this example, integrating A-Frame + AR.js with Vue.js using Quasar Framework. source-code: https://github.com/thauska/peticov-ar |
Thank you @thauska for sharing! |
@thauska it seems that the aframe version works fine. Just got back from holidays, i have did some quick test with your vue App, so i would to know if you tried with different Mobile devices and how is responding. Last time i tried the basic aframe examples (not importing with npm) i had bad results, because some css issues. If we solve these last, we can think to publish a first raw beta npm package. |
@kalwalt I've test it with: The only issue is with the PNG file with transparent shader. It seems like he get lost to set the position on the marker sometimes. |
ok thank you!
You mean that it get lost the PNG? |
video_2021-11-03_08-37-43.mp4@kalwalt Mi Note 10 and Chrome |
Hi @thauska i have no idea what could be the cause, but maybe we can solve it in another step. |
This problem happens in pure HTML to, on some mobile devices. It's not an ES6 issue. I think that can publish the npm package. It seems fine. I can make some test to. Let me know the news. 🥰 |
Ok good to know! Then i will publish the first npm package. |
We have a first npm package! See and test please: https://www.npmjs.com/package/@ar-js-org/ar.js |
Super! I'm going to merge it in the dev branch. |
The ES6 branch is merged in dev! I have published a new npm beta package |
A new npm beta package |
Hi @antoniskamzel thank you for testing can you add some more detail? From your comment i think you tried the aframe code. In this last beta release i added only the threejs location based. Aframe still has some css issues that i didn't fixed yet; I'm not an Aframe guru so i find a bit hard to solve. Anyway @thauska made a vue example as mentioned in the top of the issue thread. |
with #359 i think i fixed the skewing issue of meshes/models onto the markers. Can someone test the code on a mobile devices?
|
PR #359 has been merged in dev branch and a new npm beta package has been published: |
Now the ES6 feature is in master now! new release |
New release |
Because ES6 feature is merged, we can close this issue. Please open a specific issue if you encounter a new one. |
@kalwalt sorry to comment it here, but is this possible to use for a GEO based AR ? I want to show some POI sign with text on buildings based on their lon/lat possition and position of the phone itself... |
Yes of course, look at location based version, now there are for both three.js and aframe. Please, If you have a specific issue open a new one. |
@gelinger777 specifically look at these examples: A-Frame: https://github.com/AR-js-org/AR.js/tree/master/aframe/examples/new-location-based three.js: https://github.com/AR-js-org/AR.js/tree/master/three.js/examples/location-based As @kalwalt says, if you have problems after looking at these examples, please open a new issue. |
Hi, do you have any example to use the npm package of AR.js with an basic node.js application (I only use Express framework for routing) ? |
HI @exagyde I do have a Node/Express-driven application which uses AR.js, though it doesn't currently use the npm package. Nonetheless it could be updated fairly easily to do so. It's the Hikar webapp (see https://hikar.org), available at https://github.com/nickw1/hikar.js Not sure if it's what you're looking for but might be useful. Incidentally the Discussions tab is probably the best place to ask this, as this is now a closed issue and might not get so much attention. |
sorry again to flood this closed ticket. First of all thank you very much @nickw1 for pointing out to those two examples. My actual problem is that I want to integrate this into an ionic based mobile app. We use Angular flavour of Ionic for the app. My main problem is that a) how to properly initialize the scene and other elements b) to understand which version to use aframe or threejs? Which one would better be in terms of npm packages, initializations and co . Basically what we want to achieve is something similar to the demo image of AR.js (second demo in the middle) |
I am also looking for a working Angular example. |
Hello guys. I tried to make it work with Vue as well with the new npm package. I got it to work as well, but only if you set it in VR mode. |
@commentatorboy i'm working to add type definitions to AR.js see this PR #506 If this can help. |
Hey @kalwalt I tried the following: Unfortunately still the same issue :/ |
Thank you @commentatorboy to test it, may we discuss this in #506 ? can you add a comment describing the issue? 😄 |
Hey there, I've been experimenting with A-Frame and AR.js in a React environment, and it seems to be working. However, I'd like to confirm if this is the correct way to integrate AR.js with React. Is there any official integration or guidance available for using AR.js with React, or has anyone else in the community tried this approach and can provide some insights? I'd appreciate it if someone could check my setup and offer any feedback or suggestions. If needed, I can share the code and an image to provide more context. |
Hi @sdmrf actually i don't think there is an official documentation about how to integrate AR.js with React, but as i know there is a github project by @j-era https://github.com/artcom/react-three-arjs maybe will help you, it will be nice if you open a AR.js/discussion to keep track of this specific topic. 🙂 |
I understand that there is no official documentation available for AR.js. However, I have successfully integrated AR.js with React.js. I would like to confirm if the integration has been done correctly. As evidenced by the screenshot above, it is implemented within React using AR.js. |
It works in development mode, but goes white once it's packaged for production |
🧑🏭 ES6 feature under development
We (@MikiDi @nickw1 @nicolocarpignoli and other) are working to make this a reality see #116 . At this time it is possible to import AR.js into a React environment. You can check it in my example repo react-AR-experiments. I made a simple set up for the THREEx API in this folder react-threex-example. You need to install the dependencies with
yarn
follow the instructionsThis is a simple example with a pattern HIRO marker,
This feaure is not yet ready, but if you want to test you are welcome.
🚚 Importing the package
At this moment we have not yet our npm repository you can import as a package in this way:
"@ar-js-org/ar.js": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"
where the
<GIT_COMMIT_HASH>
is the latest git commit hash,Install the package with NPM:
npm i @ar-js-org/ar.js
### ❗ Note:You need to change<GIT_COMMIT_HASH>
every time we push changes in the ES6 branch.📦 NPM package
We will setup the npm package as soon as the code will be almost ready to be merged in the dev branch (we are working on this too...).We have set up a NPM organization, so we will publish as a scoped package: @ar-js-org/ar.js
We have the first beta package at https://www.npmjs.com/package/@ar-js-org/ar.js.
🎮 Aframe version
I didn't yet made a working example with. I'm trying to do in react-arjs-example, but at the moment is not working properly. If you are an expert with AFRAME and React, a help is very welcome.
But @thauska made this project with Aframe-Vue https://github.com/thauska/peticov-ar if you want to test.
In addition @j-era and friends are developing react-three-arjs
📹 Live examples
There aren't Live examples yet, i will provide them soon...
Report here if you find some issues, but consider that not all the code was ported yet... and some bugs may arise. 🙂
The text was updated successfully, but these errors were encountered: