Sketchfab: Embedding an interactive 3D viewer

Posted on Apr 17, 2014 in Autodesk Maya, Sketchfab, Tutorials, Workshop

Recently, I had the opportunity to present a workshop at the Biomedical Communication Academic Meeting(BAM@TO). At this meeting, all four accredited medical illustration graduate programs across North America gathered to share ideas and their work. Karyn Ho made this year’s conference especially special by re-branding the student exchange as a student run conference. I was lucky enough to not only present at the workshop but also be involved in the symposium team.

Anyways, let’s get back on topic and talk about Sketchfab! I wanted to do a workshop that was useful for students from all the other schools. Different modeling programs are used between each school, so instead of teaching a modeling technique specific to the programs I know, I decided to do a workshop on Sketchfab, which is an interactive 3D web publisher that any 3D modeler could use!

You can watch the screencast of my workshop and read the instructions that goes with the workshop below!


 

You can download a pdf of the workshop handout here:
ManSan_BAM_Handout


Introduction

If you are a medical illustrator that creates beautiful scientifically accurate 3D models, why showcase your work as a 2D image? Sketchfab is a platform that allows interactive 3D content to be published, shared and embedded online without a plug-in. Your model can be embedded on any web page and shared across platforms like Tumblr, WordPress, Bēhance, Facebook, Kickstarter, Linkedin, Deviantart and the list goes on. This document will give a brief introduction on how to easily and quickly embed a 3D interactive viewer within a few clicks!

The technology behind Sketchfab

Sketchfab utilizes WebGL technology. WebGL is a JavasScript API for rendering 3D and 2D graphics within browsers without the use of plug-ins. WebGL utilizes the <canvas> element in HTML5. Understanding the inner workings of WebGL is unnecessary to use Sketchfab, but if you would to learn more about WebGL, you can read Joshua Lai’s blog post on how to use WebGL to code your own interactive 3D viewer: http://jlai3d.blogspot.ca/?view=classic

Browser Support

Since sketchfab is powered by webGL, and webGL is in turn run with the <canvas> tag, sketchfab will only fully function on browsers that support the <canvas> tag. The <canvas> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.sketchfabBroswersuppoer

However, Sketchfab has built an image-based backup so that if the browser does not support WebGL, it will automatically default to a 360° view of your model. This means that even if your audience not on a WebGL enabled browser, they will still have an interactive 360° model to view. You can view an example
here: https://www.youtube.com/watch?v=6fSh422JPVM

3D file support

Sketchfab allows you to upload 28 different 3D file types. You can find out more here: https://sketchfab.com/faq/upload#which-formats-are-supported

Getting Started

First you will need to create a Sketchfab account. There are two types of accounts: Basic and Pro. The free account has more than enough features to get started with. Throughout this document I will list some of the differences and options you can have with a Pro account. You can find out more about the account types here: https://sketchfab.com/plans.

Uploading model and materials

There are many methods of uploading your model onto Sketchfab, but this document will only go over how to upload your model in the zipped format. I have chosen to go over this method because it is suitable for anyone to use with any 3D modeling program. The other options not discussed in this document include uploading to Sketchfab with an exporter directly from your 3D modeling program (eg. Maya, Cinema 4D, etc.) or natively (eg. Photoshop, 3D coat, etc).

To upload your materials with your model, you can zip together (.zip, .tar) a folder that contains all your texture files (.jpg, .png, .psd, .tiff), material file (.mtl) and your model file, and directly upload the zipped file. (I have found that sometimes this does not always work, if that is the case, you can upload your 3D file and then import your textures and maps separately)
Upload> Choose file

Screen Shot 2014-05-25 at 6.45.19 PM

You can now insert a model name, description and choose a category. You can always revisit and change these settings by going to your model’s properties.

Screen Shot 2014-05-25 at 6.46.11 PM

3D Settings and Material editor

Once your model is uploaded, you can modify the textures, materials and settings of your model. Go to
Settings> 3D settings.

Screen Shot 2014-05-25 at 6.47.57 PM

This will bring you to the scene where you can edit the model’s orientation and the camera’s field of view for when your model initially loads for your site. Here you can enable image-based lighting by loading an environment. If you have a Pro account, you can upload your own environment. In this example I did not use an environment, I just set my fixed background to “clean_dark”.

Screen Shot 2014-05-25 at 6.49.08 PM

You can access the Material Editor by going to the Materials tab. Here you can add various maps to texture your model. Click on the square> Import image> find your texture and material file.

Screen Shot 2014-05-25 at 6.55.57 PM

For each material, here are the settings you can control:

• Diffuse Color – Use the color picker to tint the model or upload your own diffuse map.
• Lightmap – Pre-baked lighting on your models for shadows you have rendered onto the model.
• Specular Color – Controls the intensity of the texture meant to reflect in light.
• Glosiness – Controls the sharpness of the specular map
• Normal Map – You can import a normal or displacement map in this section.
• Opacity – Controls any transparancy in your materials, or the overall transparancy of the part of the model selected. You can only select a texture not a color, if you select a color it will disable the texture. If you don’t use the texture only the factor will affect the rendering.
• Emission – For parts you want glow or self-illumination.
• Environment Reflection – This setting is used only if you enabled a environment under the scene tab. This factor is multiplied by the specular color.

You can find out more about the specific settings here: http://blog.sketchfab.com/post/63679785587/how-to-match-your-materials-on-sketchfab
When you’re done, take screenshot to save your thumbnail and save settings.

How to share and embed Sketchfab’s 3D viewer on your website

There are many methods of embedding your 3D model on your website (ex. WordPress offers a plugin). We will focus on the simple method of using the embed button at the bottom of your Sketchfab 3D viewer. Here you can click on any of the social media icons to share. If you want to embed the 3D viewer in your website, you can take the <iframe> code from and paste it into the html of your page (the <iframe> tag defines an inline frame- an inline frame is used to embed the 3D viewer hosted on
Sketchfab and place it within another HTML document such as your website).

To see more options, click show options. Here you can define the size of your <iframe>. By default, the 3D viewer will display the screenshot of the model with a “play” button and will only launch if the user
clicks on it. If autostart is checked, then the viewer will launch immediately once the page is loaded. I like to keep this option unchecked so that it does not overload the user’s browser. I typically check off hide model infos so that my user isn’t taken off my website to my Sketchfab account.

Screen Shot 2014-05-25 at 7.00.59 PM

The options within the iframe code:

• Frameborder: specifies whether or not to display a border around the <iframe>.
• Height/width: specifies the height/width of the iframe. If you change the values to a percent
(eg. embed = 100% of parent’s window size) then you can make your viewport responsive. (ex.
height= “500px” width= “100%”).
• Webkitallowfullscreen & mozallowfullscreen: allows full screen functionality
• Src: this is the address of where your model is stored on Sketchfab.com

You can read more about the embedding options here: https://sketchfab.com/faq/share
Once your iframe is modified to your liking and pasted on your HTML document, you’re done!

Comparison with other interactive 3D viewers 

The two main competitors of Sketchfab are Verold and p3d.in. Here is a brief breakdown on their similarities and differences:

Similarities: All three platforms run WebGL in the browser and allow a large number of 3D file types to be uploaded. All three products are fairly new and were launched in 2012.

Differences:
Verold: More invested in their material system and shaders. It supports advanced material features like subsurface scattering, iridescent effects, transmissive properties, fresnel shading, ability to set another layer of specular information for metallic-looking surfaces, etc.
p3d.in: It can display your model without displaying any information about itself. Sketchfab will have the company logo (unless you upgrade to a pro account, in which cause you can upload your own watermark). No option to upload as a zip file.

Resources

Josh Lai’s blog about webGL

Sketchfab also provides a portfolio website (Sketchfab.me) for Pro account users. If you are a student it
is FREE!

Plug-ins

Model used in this workshop was by Andrew Q Tran, visit his website to see more of his work!

29 Comments

  1. ปั้มไลค์
    May 16, 2020

    Like!! I blog quite often and I genuinely thank you for your information. The article has truly peaked my interest.

  2. elikikeptib
    May 27, 2020

    I was wondering if you e’er advised driving the toy of your portion? Its sincere artefact script; I entity what youve got to say. But maybe you could a mushy politician in the way of inwardness so grouping could append with it revised. Youve got an dreadful lot of schoolbook for selective having one or 2 pictures. Maybe you could reach it out meliorate? https://www.embromix.com

  3. elikikeptib
    May 29, 2020

    You are so intriguing! I do not consider I somebody construe anything suchlike that before. So uppercase to experience somebody with a few novel thoughts on this outlet. Seriously.. thanks for starting this up. This computer is something that’s necessary on the web, someone with a bit of originality! https://www.embromix.com

  4. Celebrities Public Display Of Affection Gone Viral
    August 13, 2020

    Hey, I think your blog might be having browser compatibility issues.

    When I look at your blog site in Safari, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a quick heads up!

    Other then that, terrific blog!

  5. fqzkpfsltday
    August 17, 2020

    Каталог – фильмы http://bitly.com/film-online-online-cinema – смотреть фильмы без регистрации бесплатно дивитись безплатно фільми онлайн #фильмы #Смотреть #кино #2020

  6. cuci-gorden-blackout-petojo-selatan-gambir-jakarta-pusat
    August 27, 2020

    Excellent weblog right here! Also your web site
    quite a bit up fast! What host are you the use of?
    Can I am getting your associate hyperlink on your host?
    I want my website loaded up as fast as yours lol

  7. cuci-karpet-pinangsia-tamansari-jakarta-barat
    August 30, 2020

    First of all I would like to say superb blog!
    I had a quick question in which I’d like to ask if you do not mind.
    I was curious to find out how you center yourself and clear your thoughts before writing.
    I’ve had a hard time clearing my thoughts in getting
    my ideas out there. I truly do take pleasure in writing however it just
    seems like the first 10 to 15 minutes tend to be wasted just trying to
    figure out how to begin. Any ideas or tips? Thank you!

  8. cuci-karpet-cilincing-cilincing-jakarta-utara
    August 30, 2020

    Hmm is anyone else encountering problems with the pictures
    on this blog loading? I’m trying to find out if its a problem on my
    end or if it’s the blog. Any feed-back would be greatly appreciated.

  9. daharu
    September 3, 2020

    Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
    .Так же собираем базы Обратесь всегда будем рабы вам помочь
    Свежие базы для GSA

  10. cuci-spring-bed-serdang-kemayoran-jakarta-pusat
    September 6, 2020

    I have read so many articles regarding the blogger lovers but
    this post is genuinely a pleasant paragraph, keep it up.

  11. bruguu
    September 21, 2020

    Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
    .Так же собираем базы Обратесь всегда будем рабы вам помочь
    базу для хрумера скачать

  12. bruguu
    September 21, 2020

    Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
    .Так же собираем базы Обратесь всегда будем рабы вам помочь
    базы для хрумера

  13. vikaduri
    September 21, 2020

    Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
    .Так же собираем базы Обратесь всегда будем рабы вам помочь
    базы для хрумера купить

  14. vikaduri
    September 21, 2020

    Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
    .Так же собираем базы Обратесь всегда будем рабы вам помочь
    продвижение сайта

  15. from this source
    September 30, 2020

    Pretty! This was an incredibly wonderful article. Many thanks for supplying this information.

  16. cuci-gorden-lagoa
    October 5, 2020

    It’s a shame you don’t have a donate button! I’d most certainly donate to this superb
    blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account.
    I look forward to fresh updates and will talk
    about this blog with my Facebook group. Talk soon!

  17. elikikeptib
    October 6, 2020

    Hey this is somewhat of off topic but I was wanting to cognise if blogs use WYSIWYG editors or if you fuck to manually encipher with HTML. I’m starting a blog presently but someone no writing know-how so I desirable to get guidance from someone with undergo. Any refrain would be enormously apprehended! https://www.embromix.com

  18. click here
    October 12, 2020

    I couldn’t resist commenting. Well written! http://www.filedropper.com/webdesigntutorialslearnthebasicswzhdd

  19. read more
    October 13, 2020

    I couldn’t resist commenting. Very well written! http://ge.tt/7cpdud73/v/0

  20. Kash
    October 17, 2020

    Check out my music please

  21. 에비앙카지노
    October 17, 2020

    Hello, i think that i saw you visited my weblog thus i came to “return the
    favor”.I am attempting to find things to improve my site!I suppose
    its ok to use a few of your ideas!!

  22. Charlesemids
    October 18, 2020

    Заработок на просмотре рекламы. Моментальные выплаты в режиме онлайн. Проходит акция Проходит5 рублей на счет выплаты за активного реферала.
    зегистрирвотся можно по ссылке яндекс.толока заработок в интернете без вложений

  23. 더킹카지노
    October 18, 2020

    I don’t even know how I ended up here, but I thought this post
    was good. I do not know who you are but certainly you are going to a famous blogger if you
    aren’t already 😉 Cheers!

  24. cuci-karpet-kamal
    October 18, 2020

    Hurrah, that’s what I was seeking for, what a information!
    existing here at this web site, thanks admin of this website.

  25. social media
    October 19, 2020

    The Official Site of Kash, featuring music, photos, videos, social media,
    and news.

  26. 더킹카지노
    October 20, 2020

    hello there and thank you for your info – I’ve certainly picked up something new from right here.

    I did however expertise a few technical issues using this web site, since
    I experienced to reload the website lots of times previous to I could get it to load properly.
    I had been wondering if your hosting is OK? Not that I’m complaining, but sluggish loading instances times will sometimes affect your placement in google and can damage your high
    quality score if ads and marketing with Adwords.
    Well I’m adding this RSS to my email and can look out for a lot more of your respective exciting content.
    Ensure that you update this again very soon.

  27. Charlesemids
    October 21, 2020

    Заработок на просмотре рекламы. Моментальные выплаты в режиме онлайн. Проходит акция Проходит5 рублей на счет выплаты за активного реферала.
    зегистрирвотся можно по ссылке яндекс.толока заработок в интернете без вложений

  28. rimmfus
    October 22, 2020

    Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
    .Так же собираем базы Обратесь всегда будем рабы вам помочь

  29. Henrietta
    October 25, 2020

    Wow, this piece of writing is pleasant, my younger sister is analyzing these kinds of things, therefore I am going to convey her.

Leave a Reply