DinoJust 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>
Uploading 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!
Click the image below to launch the model viewer and AR mode:
** ONLY WORKS IN iOS 12 **
And here’s a Meeple. Apparently that’s a thing for board game types:
** ONLY WORKS IN iOS 12 **
[…] it recognises USDZ files first. This is done by setting up custom MIME type in your CPanel backend. Here is a great write up on how to do […]
Hey there,
thank yoiu for your explanation. Unfortunately, visiting your page and trying out the examples, my iphone running 12.1 + Safari is always trying to download the .usdz presented here instead of opening it/ overlaying it with AR-Icon.
Also, this happens when I put it to the test on my page. Do you have any Idea why is that? Normal AR-Quicklook (eg. https://developer.apple.com/arkit/gallery/) is working flawlessly.
Thanks for your feedback. Best, K
Aaah, yes, I’ve just swapped web hosts so I have to reset the MIME type on this server so it knows what to do with a .USDZ file. Will sort this eve. Tanks for flagging!
Hi Dino,
any Idea why I am experiencing the same issue, even though I have added the Types ?
I am using the Plugin “WP Add Mime Types” and added the ones described above. Still not working.
Thanks! 🙂
All good. Figured it out. Works like you described in HTML-RAW.
Thanks! 🙂
Glad you figured it out. I’m not familiar with the WP Add Mime Types plugin but for anyone else who had that thought, it looks like it just allows you to upload different types of files to the media area in WordPress. The issue you probably had was that the actual web server responsible for delivering your site needs to know about the new MIME types too, not just the media uploader in your WordPress CMS. As you said, you need to get into your server (via Cpanel or similar) and start fiddling around there.
Hi how did you figure this out on WP? I’ve added the HTML to a section and i’m using the same MIME plugin but the code is only showing “width=” as a link (which when clicked doesnt do anything”..
I’m with 1&1 hosting and so don’t think I have access to the inner web server settings.
Sounds like you need to get into the MIME area of 1&1 to get it to work. I think they ‘can’ use Cpanel, but I’d just raise a ticket and ask them how to add a MIME type to your hosting. Sorry, never used them so can add much more than that.
Very interesting but I was wondering if Is there any special reason why in your examples I get first an Image then I have to click again to jump to the Object/AR view while in the apple examples I click the image only once?
That’s just how Apple likes it done I guess. Makes sense that have to actively choose to activate the camera.
Hello! Very interesting! But What I need for works in android too ?
You need Google’s AR Core. https://skarredghost.com/2019/05/10/how-to-show-a-3d-model-in-ar-inside-your-website/ Although the new Depth API is launching soon which will add some new awesomeness (mapping the 3D space to add the object in front or behind things). Not really worked with Android so can’t really guide much more than that, but AR Core is Google’s answer to Apple’s ARKit / WebAR.
hey, thanks for posting this. i’m getting closer to implementing AR in my Woocommerce shop. 🙂
Hi Dino,
I’ve set up the MIME types in CPanel and when i upload a USDZ file and access it directly, i can get the AR session but i what i’d really like to do is add this effect to a Woocommerce Product. any idea where i would add the code?
thanks
Did you manage to get this working? Saw this link but not sure if it’s as in-depth as you need: https://www.vectary.com/3d-modeling-how-to/how-to-embed-ar-usdz-files-to-your-e-commerce-website-ios-12/
I DID! thanks. figured it out by getting a Woocommerce plugin that allows me to simply add a URL (no code) to a product image. so i’m all set, it works perfectly. this tech is so cool!
and thanks for mentioning Google’s AR Core. i’ll be checking that out as well at some point.
Cheers!
Hi Dino,
tried it to bring it into the word press, but ended up getting a view of the thumbnail in broken thumbnail icon and in the website, it is just ? in the page. Could you please help me ?
Hey Dino, can you please help?
I added this but when I click on the image I get ASCII code.
iOS 15.4, Chrome v.99
Thank you!
Just checking, have you set the MIME type on your web server to recognise .usdz files?