Just seen the new iOS “Quick Look 3D” feature in iOS 12 and wanted to see how easy it was to embed an AR file in WordPress. It turns out this is really easy! Ok, it only works on iOS but Android and MacOS will catch up soon enough.
Here’s how it looks:
The code is pretty much just an <a> tag with a thumbnail…
<a href="stratocaster.usdz" rel="ar"> <img src="stratocaster.jpg" alt=" width="250" height="250"> </a>
Upoading the thumbnail is pretty simple, just add it via your Media uploader. The .usdz file will most likely be rejected by the web uploader interface. You need to upload it directly to your server via FPT or the File Manager if you have CPanel. I uploaded the thumbnail via WordPress then found the same folder on the server and added the .usdz file in the same folder. It’ll probably be in:
/public_html/wp-content/uploads/<most recent year>/<most recent month>/
The only other issue is that this is a new file type on the internet and chances are, your web server doesn’t know what to do with a .usdz file, so you have to tell it. If you don’t, chances are your web page will try and treat it as a ZIP file or just try and download it. This is where the MIME type of the file comes in. It’s essentially a note to your server to tell it what kind of file goes with each file extension. For example, extensions .jpe, .jpeg, .jpg are all variations of a “jpeg” image so the MIME type is “image/jpeg”. Anyhoo, you need to set this for .usdz so your server knows it’s a swanky 3D model.
If you have CPanel on your server, it’s pretty easy. On your CPanel home page, scroll down until you see the “Advanced” panel. Click the “MIME Types” icon. In the form at the top, add these two MIME types, clicking “Add” each time.
MIME Type: model/vnd.pixar.usd Extension(s): .usdz MIME Type: model/usd Extension(s): usdz
Then you’re good to go!