How to embed 3D models into a Wix website
I have dealt with digital 3D models for pretty much all of my adult life. Lately, I have been diving into the world of augmented reality and off the back of that I have found some new uses for 3D models and one of those is the ability to embed them directly into a webpage and create an interactive 3D model.
Take a look at the model below. You should be able to interact with it, spin it around, zoom in and out and if you're on a mobile, you should be able to view it in augmented reality too.
How?
Getting this content into a webpage is actually not too complicated but the documentation, as it seems with all of these developer-type processes, is not great and requires a lot of trial and error for people like me who aren't software engineers. I have tried to break this down in simple terms for simple folk like myself.
The process can be split into 4 parts and they are:
3D Models
To start the process we need a 3D model to show, you could create your own model if you wanted to, using an application like Blender, or you can use an existing one. I have attached two demo models for you to use if you wanted to follow along.
Now for this process, you can't just use any old model, we need to be working with a .glb file. So make sure that is what you have. If you have a .obj file or something else, either find a different model or look at converting it. Again, Blender could help you here.
Note: If you are looking to create an AR experience you may want to have a .USDZ file as well to support any iOS users out there. This isn't completely necessary however for reasons I will explain later.
Glitch
Wix is a little restrictive in what we can do when it comes to building web pages and one of those restrictions is playing around with the underlying code of a page. In an ideal world, we would like to build the models directly into the Wix site itself but we can't, so we have to build our functionality elsewhere and then link to it from Wix.
To build this functionality I used a website called Glitch. I am no expert in web development but in essence, it seems to be an online web development platform, and for what we are doing it is completely free.
It is probably best to create a Glitch account for this but I don't think you have to. I have already made a Glitch project which you can copy and modify to save yourself some time.
You can do this by following this link and selecting the Remix button in the top left. You will now have your own version of the code that you can modify and store as your own.
Upload models
Before we do anything else, let's get the models that we need to be uploaded to Glitch.
Head over to the “Assets” folder on the left-hand side of the screen and then select "upload assets".
Upload your .glb file and your .usdz file if you have one.
Preview
Open "index.html" from the side panel to view the code and then at the bottom of the screen select “Preview” to show a preview of the webpage we are building.
This preview window will automatically update when you make changes to the code so you can easily see if everything works or is to your liking.
Model-Viewer
The code you can see in the “index.html” is, unsurprisingly, HTML and is what we will be modifying in order to display your model. I have broken down the code below and provided descriptions of what each part does, below that is a list of attributes that describe how your model will be displayed and what functionality it has, but before that, we will get you up and running.
Connect your Model
Copy the URL of your .gbl model and paste it into the value of "src=" in the HTML document. Be sure to keep the quotation marks.
Do the same for your .USDZ file and paste the value into the “ios-src=”. If you don't have a USDZ you can delete this line of code.
You should now have a working 3D model that you can interact with in the preview panel.
Jump to the final section if you just want to put this into Wix now.
Code Breakdown
The first section of code we don't need to touch and is simply setting up the basic information that Model Viewer needs.
You can, if you wish, change the title which is the bit between <title>...</title> elements.
The next section defines the size of the viewport where our model is displayed
Alter the values for both width and height to change the size of the viewport.
This is the main bulk of code and defines how Model Viewer behaves, what it shows, and a few other settings. This is done with attributes and I cover these further down the page.
Finally we have this last bit wrapped inside the <script>...</script> element. You can delete this if you want to but I was having an issue with the display of Model Viewer on iOS. Everything was very pixelated and so I added this to improve the rendering quality.
Attribute Breakdown
Below are all the attributes I have used to define my model, Some of them are required to make things work, and the others are for fine-tuning, tweaking, and titillating, so make sure that you play around with them to find out what they do. There are plenty more to look at in the documentation as well.
Required attributes to get model viewer working.
width, height & margin
Alter these values to adjust the size of the viewport that your model will be displayed in.
src
This is the link to your 3D model/.glb file that is stored within Glitch
ios-src
The link to your .USDZ file stored in Glitch
This is only required if you intend on creating an AR-compatible 3D model for iOS. Even then it is not always required. model-viewer will in fact convert a .glb on the fly for iOS but it doesn't support some of the features, like animations. In those instances, we need to provide the model viewer with an iOS option. See documentation
ar
Required for AR- Enables the ability to launch an AR experience.
ar-modes
Required for AR - A prioritized list of the types of AR experiences to enable. See documentation Optional attributes you can add for additional functionality.
title
This is simply the name of the file. Feel free to change it if you want to.
bounds
This option defines the bounding box that encapsulates the model. I had issues with a model that looked like it was floating and adding this setting resolved that issue. See documentation
camera-controls
Enables the user to rotate & spin the model.
enable-pan
Enables the user to pan/translate the model using the left mouse button.
orientation
This will set the initial position of the 3D model. I have modified this value so you can delete it altogether or set all the values to "0" to reset it.
exposure
Effectively this sets the brightness of the model.
poster
Displays an image instead of the model. See documentation
shadow-intensity
Controls the opacity of the generated shadow. You can set this value anywhere from 0 to 1.0 See Documentation
autoplay
This will automatically play an animation if your model contains one. Upload to Wix
The final step is to get our model into a Wix page. We have done all the hard work so this is pretty trivial.
Copy your Glitch URL
Embed an HTML Element into your Wix site/blogpost
Enter your Glitch URL
Set the dimensions of the element to match that stated in your glitch project.
Wrap up
You should now have a 3D model embedded into your Wix site! Well done. I am sure there is plenty more that can be achieved with Model Viewer and it appears to be under constant development.
I am by no means an expert in this department and I would love to see what you can all achieve with Model Viewer so please do leave a comment and a link to your creations.
If you found this helpful please do like and share.
The Fourth Wall.