Uploading glb/usdz file to use with model viewer

[rianlukog]

**This is my first post on GitHub, I have always been terrified of using it because I always considered it to be a place for only the smartest of the smartest, but here goes,

I want to add a 3d model viewer + AR onto my wix site, I just cant seem to figure out how to "upload my glb/usdz file"**

[ThorstenBux]

My question would be what you mean with how to upload your glb 😀.
You can upload it to one publicly available web store that you have AWS S3, Google cloud store to name some popular ones. Then you take the public URL and use it when you add your model-viewer instance. There is nothing WIX specific there afaik.
Maybe you can post your code snippet of me to better understand.

[rianlukog]

Thanks for your reply,
https://imgur.com/a/UYNeqxy

What I want to achieve is something like the above ( Which I was able to do myself by using Vectary.com, where I uploaded a GLB/USDZ file and it returned an embed code which I then placed in the Wix HTML widget)
Problem is that this service is paid and I was wondering if there is another way to do this.

CODE: <iframe id="d47af27f-7536-4232-ad44-4a5a5693c6bf" src="https://www.vectary.com/viewer/v1/?model=d47af27f-7536-4232-ad44-4a5a5693c6bf&env=studio3" frameborder="0" width="100%" height="480"></iframe>

I suppose currently the GLB file is being read from vectary server

[rianlukog]

Update#1
I have uploaded my GLB file to a "bucket" in Google cloud, and found the link for its location, I then added that to the model viewer src

<div class="progress-bar hide" slot="progress-bar">
    <div class="update-bar"></div>
</div>
<button slot="ar-button" id="ar-button">
    View in your space
</button>
<div id="ar-prompt">
    <img src="https://modelviewer.dev/shared-assets/icons/hand.png">
</div>

My wix widget shows nothing except a hand icon holding a phone and a scrollbar

[rianlukog]

Update 2

Found an issue with the previous bucket setting where individual objects could not be accessed, I have changed it to public access, yet my model viewer issue persists.

https://storage.googleapis.com/gkn/T1.glb

[rianlukog]

update 3

[elalish]

Have you checked the console? There are usually logs about things like 404 or CORS header problems. I personally would bet on the latter (this is a setting on the server).

[rianlukog]

I am very new to this, but thanks for your advice, there seems to be many confusing parts, I used a working example from vectary code ( as above shown vase example) and replace only the 'src' with my google cloud link, however I still do not know what to do with id="d47a..... etc etc"

[ThorstenBux]

Yeah, most likely CORS:

Access to XMLHttpRequest at 'https://storage.googleapis.com/gkn/T1.glb' from origin 'https://192.168.1.134:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

https://cloud.google.com/storage/docs/cross-origin

[rianlukog]

UPDATE I GOT IT TO WORK by using glitch.me, uploaded the files (GLB,USDZ) to it and ran the below code and embedded it in wix, only missing this is the AR QR code button on web

<title>Model Viewer</title> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <style> model-viewer{ width: 400px; height: 600px;

}
</style>

<div class="progress-bar hide" slot="progress-bar">
    <div class="update-bar"></div>
</div>
<button slot="ar-button" id="ar-button">
    View in your space
</button>
<div id="ar-prompt">
    <img src="https://modelviewer.dev/shared-assets/icons/hand.png">
</div>

---

How can I embed the QR generation button ?

[Billelouazene]

hi !
im want to do exactly the same thing, ad a 3d object on wix with user interaction,
but can you be more specific on how you have done it with glitch please ? step by step ?
It would be very helpful !!

thank you so much.

[rianlukog]

[elalish]

I have no idea what you mean by QR generation, but if you want AR, you should put the ar attribute in. See the docs: https://modelviewer.dev/docs/index.html#augmentedreality-attributes