Most of us know about the 3D warehouse, where you can upload your Sketchup models and share them with the world. But what if you wanted to upload you models not so other people could download them, but so they could interact with your model right from their browser?
Showcase your 3D models with Sketchfab
If you noticed in my last post, I had embedded a model of a house I built in Sketchup. The cool thing was that you could actually interact with the model by orbiting and zooming around. And it works REALLY well.
How did I do this? I uploaded my model to my account on Sketchfab. Once you upload, your model will show up on your dashboard, and you can copy and paste the embed code onto any website. The great part is that the end user does not need to download any special plugins. Since Sketchfab is built on WebGL technology, they only need to have a modern browser like Google Chrome, or Mozilla Firefox. (If you use Internet Explorer, you’ll have to install the Chrome frame explorer)
Sketchfab embed example:
Here’s the new Iphone 5, as modeled by Mestaty. Just click and drag the model to orbit. Scroll to zoom, and middle mouse button click to pan.
Sketchfab offers a free account that allows you to upload 10 models. For about $12/mo, you can upgrade to Pro and Sketchfab will host up to 100 models for you. The thing I really like about Sketchfab is how simple it is to use. Everything just works!
How to upload your model to Sketchfab
You can upload your models to Sketchfab manually, in .dae or .kmz format from your Sketchfab dashboard. But, if you’re looking for an easier way to export directly from Sketchup without having to convert the file format, you can use the Sketchup exporter plugin for Sketchfab.
- Create an account on Sketchfab Go to Sketchfab and create your own account. Currently, you can login with your existing Twitter or Google account, making the setup that much easier. (I used my Google Account to login with. It’s nice because as long as you’re logged in under your Google account, you’ll never have to fill out a username and password when you go to Sketchfab.)
- Download the Sketchup Exporter/Uploader Sketchfab has an Uploader plugin for Sketchup, thanks to a Sketchfab fan, Alex Schreyer. This makes it very easy to upload your model to your Sketchfab account right from the file menu in Sketchup.
- Install the extension Once you’ve downloaded the Sketchup Uploader, you’ll need to tell Sketchup that you want to use the plugin. From within Sketchup, go to
WINDOW -->; PREFERENCESand click on
EXTENSIONS. Then, install the extension by clicking on
INSTALL EXTENSION...Navigate to the Sketchup Exporter file you’ve downloaded, and install it. You should then see “Sketchfab Uploader” in the window. Make sure that box is checked. (Click the image below to enlarge)
- Find your API token OK, don’t get intimidated by the programmer talk. Finding your API token is really simple. You can think of it as a unique, secret password. With your API token, it provides you a special key to upload models to your Sketchfab account remotely (aka, from Sketchup) You can find your API token on your Sketchfab Dashboard on the right hand side. Copy this API key.
- Insert your API token Once you have your API token, go back to Sketchup and open the model you’d like to upload to Sketchfab. Then, from the
UPLOAD TO SKETCHFAB. You’ll see a window pop up where you need to paste your API token from the previous step.There are other things you can add like the Model title(required), a Description, and Tags. Tags are like keywords that will help people find your model when doing a search on Sketchfab.
- Upload your model Once you’ve filled out all the model info, click submit model. This is where the weird part happens. When you click submit, a window will pop up (If you’re running Windows), warning you of a file download. You can just cancel it. I know, it’s not the most graceful part of the upload process, but don’t worry, nothing went wrong. Hopefully, in the future, they’ll figure out a way to not have that window pop up.
Note: You’ll only have to look up your API token one time. Once you set it up, it’s saved within Sketchup.
Embed your Sketchfab Model on a website
Once you’ve successfully uploaded your model to Sketchfab, you should see it on your Sketchfab Dashboard. You can then send people to your model by linking to it, which is cool because they’ll also be able to browse other models you’ve uploaded. Or, you can embed your model right onto your website. There are also some ways you can have your model on Facebook too, but it requires an additional Facebook App that allows iframes. Iframes are bits of code that insert one web document into another. In this case, we are inserting the 3D model into a webpage.
Link to your model
The simplest way to share your Sketchfab model is to link to it. Each model you upload will have a special hyperlink that you can use. From your dashboard, click on the model you want to link to, and click on the “chain link” icon to pull up the link menu. You’ll see the hyperlink there. Just copy and paste it to direct people to your model on Sketchfab.
Embed your model
(This is how I inserted the model right into my blog post.) You just click the “Embed” Button, and a window will pop up with some HTML code. You just copy that code and paste it into your website and it works! If you want to customize the code a little bit, there are a few parameters that you can adjust.
For example, by default, the width of the iframe is 854, so I need to adjust it to 600 so it fits within my website layout. Let’s take a look at some of the parameters you can adjust with the Sketchfab iframe.
Custom embed attributes
There are two types of attributes you can customize with the embed code. The first type are the attributes that define the iframe tag. The second type are the variables that get passed to Sketchfab when retrieving your model to display on the page. These are Sketchfab specific attributes.
These attributes are native to the iframe property, so they don’t really have anything specific to do with your Sketchfab model. But they are still important, since the iframe is what encloses the model on your page.
- frameborder – Specifies whether or not to display a border around the iframe.
- height – Specifies the height of the iframe tag This is how tall you want the model window to be.
- width – Specifies the width of the iframe tag How wide do you want the model window to be?
- allowfullscreen – This specifies whether you want the iframe to be able to go to fullscreen mode
These are attributes that are specific to Sketchfab. They control different parameters that affect how your model will load, and how the end user will interact with the model.
- autostart(0,1) – With autostart enabled, your website will take longer to load because it has to load the model at the same time. If you want to make your page load quicker, you can have the model load only after they click on it.
- transparent(0,1) – If set to 1, the background will look like a grid. If set to 0, it will be transparent.
- autospin(any #) – The number set will make your model auto rotate. The higher the number, the faster the spin
- controls(0,1) – If set to 0, the controls will not be shown.
How exactly does Sketchfab work?
I was really fascinated by the technology behind Sketchfab, and how well the model performs in the browser. I reached out to Alban Denoyel, Co-founder & COO of Sketchfab to ask him a few questions about Sketchfab.
How does Sketchfab differ from the 3D warehouse?
Sketchfab enables you to render any 3D model just as well as a 3D software running on your computer, but instead, inside the browser and without a plugin. The 3D warehouse is more a sort of database or index of 3D models made with SketchUp, with a 3D viewing option which is quite poor: it’s just a pre-calculated set of images in low resolution, and the user cannot choose his view point. On Sketchfab, you can visit your model as you would on SketchUp, it’s even more fluid. And as it’s inside the browser, you can share it with anyone, and even embed the viewer on your own website.
And as we have an exporter for SketchUp, you can publish your models online in 1 click directly from within SketchUp.
How is WebGL different from other 3D rendering browser engines/plugins?
WebGL is the first open-source standard enabling you to render 3D models in the browser in real-time without a plugin. There have been many attempts to display 3D online in the past, but everything was plugin based. You could for example make the comparison with video: before YouTube, you could already play videos online, but you had to install the Windows Media Player (or another player), thus video never took off. Then YouTube arrived, it was a revolution, and video became the new media of the web. We aim to do the same with Sketchfab, it’s a bit like YouTube but for 3D files, we want to democratize this new media on the web.
Who is the Sketchfab team? What lead you to creating Sketchfab?
The Sketchfab project was initially launched by Cedric Pinson, who started working on it as soon as WebGL was there, almost 2 years ago. He has worked for 12 years in the 3D industry, and when WebGL arrived he quickly realized this was going to become the standard for 3D online. As his background was in the videogame industry, his goal with Sketchfab was to provide 3D artists a way to showcase their work to other people. I (Alban Denoyel) joined the project in January of this year, and we are full time on it since March 2012. We are now a team of 6 people, based in Paris, France.
How often do you update Sketchfab? Are there any cool features you are currently working on that you can share?
We do our best to update Sketchfab every Tuesday, you have an updated list of releases here: sketchfab.com/changelog
Among the cool features we are working on, to release in the near future:
- We want to improve the layout, so that each Sketchfab user can have a complete online 3D portfolio. Users will also be able to customize some aspects of the layout.
- We’ll add a poly-counter, to know how many polygons are in a given model.
- We’ll soon release a fallback for non modern browsers, or mobiles, where WebGL isn’t supported yet.
We are always looking for feedback from our users on what features they are missing the most, so if you want to help us build the future of our service, you can fill this 30 sec poll: http://goo.gl/LPh7X thanks!
Thanks Alban for taking the time to answer a few questions about Sketchfab.
In the short time I’ve been using Sketchfab, I’ve already noticed improvements being made to the platform. These guys are hard at work making this the best place to host your 3D models. Check it out, I’m sure you’ll be thoroughly impressed. Let me know what you think, leave a comment below!