USDZ on Wix.com for free (on Mac)

Marcin Kulwicki
5 min readMar 27, 2021

Table of contents:

  1. Download model from Sketchfab.
  2. Convert model to USDZ.
  3. Upload model and preview image to GitHub.
  4. Insert USDZ on wix.com website.

Lets begin

First we need to download model, from sketfab we can chose with model format we want. A lot of models on sketchfab have unlocked option to directly download USDZ but not all then i will show how to convert model to *.usdz thus I suggest to download *.obj.

For example this one have locked USDZ option when i wrote this instruction.

Sometimes downloading obj is better than USDZ to see object after exporting. You can change materials or scale.

Next step is convert obj to USDZ using Reality Composer (only Mac).

Download and install. You don’t need paid developer account.

Using Reality Converter is very easy, you need to drop *.obj file to window, or File -> Import and choose chair.obj. I recommend turn on grid.

1. Pushing Command + G,

2. View -> Show Grid.

3. Tun on in Environment option

Scaling option is in Properties. Changing Base Units you can scale. In left upper corner is Grid Unit, for us chair should have no more than 400 millimetres.

Unfortunate chair sit is on 0. You can’t move or rotate on Reality Converter. You can fix it in two ways:

  1. Open *.obj file in, for example Blender and setup chair in right place.
  2. Download other model. You can get Chair2 .

I suggest to compare Chair and Chair2 on sketfab. It’s impossible to find out with one, have point 0 on sit. But in AR it’s a big different. We expect

There is only left to export USDZ file. File -> Export…

Ok, now we need make link to our chair2.usdz. GitHub is a good place for this. After creating or logging to account, we need to create Repository.

Next you will see

This is short instruction how you can use git repository. You have few option to upload your files. We will use 2 commands from “…or push and existing…”

But first. Make folder and put there all files, chair2.usdz and image.

Next:

1 ) Open terminal. Command + space, type Terminal.

2 ) Choose your directory cd /Users/<user>/Desktop/usdz\&image

3 ) Now type git init. You should see “Initialized empty Git repository in …”. If it won’t work, probably your system don’t recognise git commands. To fix this you can install Xcode Command Line Tools typing in termianlxcode-select --install and repeat git init

4 ) Now copy from github website your git remote command. You need to tell git where to send data. For me it was git remote add origin https://github.com/MarcinKulwicki/WixTestUSDZ.git

5 ) git add .to add all files from folder

6 ) git commit -m "fist commit"commit your changes (2 new files chair2.usdz and image)

7) Ending step is sending files to git repository git push origin master .You can be asked for login and password to GitHub. Write them.

Now on github you have:

Select image.png, right click and select Open Image in New Tab. We need the raw link reference.

1 ) Link to image

https://raw.githubusercontent.com/MarcinKulwicki/WixTestUSDZ/master/image.png

2 ) Link to usdz. Just change image.png to chair2.usdz

https://raw.githubusercontent.com/MarcinKulwicki/WixTestUSDZ/master/chair2.usdz

The last step is create website on wix and turn on Edit mode. In computer website preview window, click Add -> Embed -> Custom Embeds -> Embed a Widget

Important is to have chosen computer preview window

Select your HTML object -> Go to Settings and type Code

<a href=”https://raw.githubusercontent.com/MarcinKulwicki/WixTestUSDZ/master/chair2.usdz" rel=”ar”><img src=”https://raw.githubusercontent.com/MarcinKulwicki/WixTestUSDZ/master/image.png" alt=”” width=”300" height=”300"></a>

Click Update. And go check your phone view

If everything's fine, publish your website.

And that’s it. Everything should work perfectly. But we don’t know without testing. Then, let's test it on iPhone or iPad.

Prof https://youtu.be/Neehp_rQgog

--

--