You can embed the Sketchfab 3D model viewer anywhere that supports an HTML iframe, just like embedding a YouTube or Vimeo video.
You can also embed private and password-protected models even if they don't appear publicly on Sketchfab.
Here's an example:
Embed Instructions
Just click the </> Embed option on the model page, below the viewer, and find the iframe HTML.
To embed the 3D model viewer on another website, copy the iframe code from the Embed viewer pop-up and paste it into your website's HTML code. This will work almost anywhere on the web - if the HTML iframe tag is supported, you can embed a Sketchfab model.
You can also embed models on specific websites and platforms, including:
Embed Customization
Each Sketchfab membership plan offers a number of ways to customize the Sketchfab viewer and embed your models. Check out what your plan has to offer.
Comments
145 comments
Is there a way to start in first person view mode?
@benoithudson - Not at the moment, but we hope to add more settings and/or URL parameters to allow this in the future.
My use case is displaying a building interior (I'm with @imgspc). In that case, first-person generally makes more sense than orbit.
I look forward to your supporting this either via embed parameters or API!
I see, that makes sense. Thanks for the details. I'll add your +1 to the feature request.
Another +1 from me. I've created a street situation which should be navigated with first person mode by default. Orbiting is quite confusing in this context.
I was thinking to upgrade to bussiness plan to have clean embeds in my website but it seems that the sketchfab logo will remain.
Is that true ?
If so I think it ruins the bussiness plan as visitors can still get away of the page and get access to other models and authors.
I understand that you want to maximise sketchfab visitors but by paying high fees I would expect that you renounce to it.
@fredlucazeau - You are correct, we don't offer a full white label viewer at this time.
Keeping our small icon is the only way for us to offer a free or very affordable service. We also don't know of any 3D viewer offering a full white label solution. We work with global brands like HTC, LG and Microsoft who are happy with it, hope this can meet your needs as well:
HTC: https://www.facebook.com/HTC/posts/10153739024758084
LG: http://www.lg.com/fr/montres-connectees-lg-g-watch/lg-Watch-Urbane-W150
Callaway: http://cmp.callawaygolf.com/2015/07/07/3d-images-get-to-know-the-md3-wedges-inside-out/
Ok, you need to have the link. But user should be able to choose whether or not the link takes to users profile or just to sketchfab.com
We need to hide the other models from other users.
@tjt - If your models are private, they won't be visible on your profile.
any plans for an API? For example, I currently have the 3D view hidden in favor of a 2D view and if people select the 3D view it appears over the 2D view. It would be nice if there were a way to tell the player to activate (I preload textures, but I don't want it running when it's not in view and possibly tying up resources) so the user doesn't have to click again to access the model. I also have to use my own control to let the user "close" it and hide it again. It would be nice to have a function fire when the "Disable Viewer" control is clicked so I could hide it with that
@KSA_MissionCtrl - You could use the
viewerreadyevent as well as theapi.start()method to automatically activate the viewer (or addautostart: 1andpreload: 1to theclient.initoptions)And then you want additional events for
viewerstoppedandviewerstarted? Or someisStartedattribute maybe?As for tying up resources, if you've already preloaded the textures, starting the viewer won't really affect anything. When the camera isn't moving, we don't render frames.
Are there any way to make the background transparent, and remove the little cube in the corner?
@iversen - You can make the background transparent with the transparent parameter.
At the moment, we don't allow anyone to remove the Sketchfab logo in the bottom left.
thanks for the answer James. I had the animation set to autospin when activated, so that's why I didn't want to autoplay it. api.start() sounds good but based on that alone I don't know how to access/use it - are there some docs I haven't found? a viewerstopped event sounds perfect
I have a few intro tutorials here (http://blog.sketchfab.com/search/viewer+api+part), but they might not be useful for your specific use-case.
I've made a fiddle for you here with start/stop buttons: http://jsfiddle.net/PadreZippo/j6bmxp0y/
You could do the same thing when your users hit the 3D thumbnail or the 2D thumbnail buttons.
Here's another approach that keeps the start/stop event handlers within the success function, but I prefer to define the API object globally so I can use it anywhere and keep the callbacks a bit simpler: https://sketchfab.com/developers/viewer/startstop
thank you James. If I have any other questions I will let you know but looking over this seems to provide what I need.
Hello I've just upgraded to Business plan. I thought it was gonna be impossible for my visitors to go to YOUR website and embed and share my PRIVATE stuff. How can I process please ? Thanks
@boispe
At the moment, you can remove everything except the logo (bottom left) with a Business account.
Example here: https://help.sketchfab.com/hc/en-us/articles/203497057
Details above in this article.
If you make your models private ( https://help.sketchfab.com/hc/en-us/articles/202484576-Model-Security#private ), they are 'unlisted', so they won't appear in public searches or be indexed by search engines.
Thanks.
Yes BUT I don't want my private visitors to share or embed my private 3D sketches when they click on your logo. I mean this is very different…
Is it possible ?
@boispe
I'm sorry, it's not possible at the moment. I will add your feedback to this feature request.
Ok thanks you James. Let me say it's gonna be a big problem for me and maybe more people. Apart from this, your service is great.
It would be convenient if there was a way to transfer models with their settings from one sketchfab account to another.
@scicomm - It's something we hope to offer in the future. I'll add your '+1' to this feature request.
Is there any way to set the parameters for a default render mode, for example to set the default to HD. I ideally want to share models fullscreen(embedded), autoloaded and autostart... at high res. I can get most of the way there with
{modelURL}/embed?autostart=1?autoload=1
@ardensoftware
(There's no autoload parameter, do you mean preload?)
(Also, only the first query parameter has '?', the rest should use '&')
You can do it with the pixel_budget parameter. You could set it to any number really, but these are the equivalents:
So it would look like {modelURL}/embed?autostart=1&preload=1&pixel_budget=0
Just keep in mind that the pixel budgets are there for a reason, and forcing HD could cause performance issues or crashes on less powerful machines, like mobile.
That's great James, exactly what I was after. Works a treat, though I acknowledge your warning about performance issues.
is there any way to stop the user from interacting with the sketchfab app all together?
I would like to control it through the API only.
@rourker
Maybe you could overlay a div that catches all mouse/keyboard events and prevents the iframe from being focussed?
Thanks James!, that is what I came up with as well.
Hello, I am posting to FB however it doesn't show a thumbnail....what am I going wrong?
tnx
Please sign in to leave a comment.