X_ITE React implementation questions

[WellZ3n]

Hi, I'm working with X_ITE on a React project, but I'm not so sure on how to implement this tool in my app. I've tried to use it as a NPM dependency, but got confused as to which <> tag should I use or how to import it and it just didn't work. Then I decided to use the import on header method using the https://cdn.jsdelivr.net/npm/x_ite@9.1.10/dist/x_ite.min.js, example on your website which allowed me to use the x3d-canvas tag and to provide a base64 encoded source, and it worked like a glove.

My problem is that I can't rely on this link, as a colleague of mine pointed out, there could be some errors when visiting the site from China for example. So I downloaded the .zip file, extracted it and tried that way, importing from the local files, but just like the npm install, I had no luck, it always says that X3D isn't being imported, or isn't found, which doesn't happen in the jsdelivr method.

Can you guys shine some light on how to use it locally instead of importing it from jsdelivr? I've searched for React implementations but couldn't find any, I had 2 other projects to base myself on, but they were different frameworks.

Thanks in advance.

[create3000]

Unfortunately I am not firm with React, but what I can say, there is no difference between the jsdelivr and zip release. Because X_ITE consists of a lot of files, from which some are only loaded later on demand, it could be that React does something to prevent this. If this is the case, then there should be some error messages reported to the web browsers console. If so, please post these messages here.

I don't know what you doing with React, but when you publish it to the web, you could put the X_ITE zip folder on the sever you use and point to the URL in your program.

[create3000]

If you use import X3D from "https://create3000.github.io/code/x_ite/latest/x_ite.min.mjs"; statement, you should be aware of the suffix .mjs instead of .js.

If you use it from <script> tag .js is fine.

[WellZ3n]

So first off, thank you for your quick reply. And what I'm currently doing which is working with jsdelivr is like this: And that's fine, the Helmet tag is there just to fit it into the header even when inside a child component (all working). But, when I change the src to my directory like so: It gives out only a error and refuses to render the whole thing: this should at least give the canvas failed to load world error, such as: Also, this error happens with both .js and min.js

[create3000]

I now have created a minimal react app and encountered several problems, but when I load the script via a server URL it works as well. What I can see is that react does something with the local script and the script will fail, and can therefore not provide the \<x3d-canvas> element.

What I can recommend for now is to put X_ITE on your server, ie. 'https://www.example.com/.../.../x_ite.js' or what you like, and reference this absolute URL. This prevents React from rewriting or doing something with the script.

[WellZ3n]

Thank you very much, I think we will keep with the jsdelivr implementation for now, as I think it will satisfy the biggest portion of our users, but we will also consider having it stored in a server.