Sketchfab: Embedding an interactive 3D viewer
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.
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
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.
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.
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”.
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.
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.
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
ปั้มไลค์
May 16, 2020Like!! I blog quite often and I genuinely thank you for your information. The article has truly peaked my interest.
elikikeptib
May 27, 2020I 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
elikikeptib
May 29, 2020You 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
Celebrities Public Display Of Affection Gone Viral
August 13, 2020Hey, 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!
fqzkpfsltday
August 17, 2020Каталог – фильмы http://bitly.com/film-online-online-cinema – смотреть фильмы без регистрации бесплатно дивитись безплатно фільми онлайн #фильмы #Смотреть #кино #2020
cuci-gorden-blackout-petojo-selatan-gambir-jakarta-pusat
August 27, 2020Excellent 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
cuci-karpet-pinangsia-tamansari-jakarta-barat
August 30, 2020First 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!
cuci-karpet-cilincing-cilincing-jakarta-utara
August 30, 2020Hmm 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.
daharu
September 3, 2020Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
Свежие базы для GSA
cuci-spring-bed-serdang-kemayoran-jakarta-pusat
September 6, 2020I have read so many articles regarding the blogger lovers but
this post is genuinely a pleasant paragraph, keep it up.
bruguu
September 21, 2020Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
базу для хрумера скачать
bruguu
September 21, 2020Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
базы для хрумера
vikaduri
September 21, 2020Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
базы для хрумера купить
vikaduri
September 21, 2020Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
продвижение сайта
from this source
September 30, 2020Pretty! This was an incredibly wonderful article. Many thanks for supplying this information.
cuci-gorden-lagoa
October 5, 2020It’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!
elikikeptib
October 6, 2020Hey 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
click here
October 12, 2020I couldn’t resist commenting. Well written! http://www.filedropper.com/webdesigntutorialslearnthebasicswzhdd
read more
October 13, 2020I couldn’t resist commenting. Very well written! http://ge.tt/7cpdud73/v/0
Kash
October 17, 2020Check out my music please
에비앙카지노
October 17, 2020Hello, 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!!
Charlesemids
October 18, 2020Заработок на просмотре рекламы. Моментальные выплаты в режиме онлайн. Проходит акция Проходит5 рублей на счет выплаты за активного реферала.
зегистрирвотся можно по ссылке яндекс.толока заработок в интернете без вложений
더킹카지노
October 18, 2020I 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!
cuci-karpet-kamal
October 18, 2020Hurrah, that’s what I was seeking for, what a information!
existing here at this web site, thanks admin of this website.
social media
October 19, 2020The Official Site of Kash, featuring music, photos, videos, social media,
and news.
더킹카지노
October 20, 2020hello 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.
Charlesemids
October 21, 2020Заработок на просмотре рекламы. Моментальные выплаты в режиме онлайн. Проходит акция Проходит5 рублей на счет выплаты за активного реферала.
зегистрирвотся можно по ссылке яндекс.толока заработок в интернете без вложений
rimmfus
October 22, 2020Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
Henrietta
October 25, 2020Wow, this piece of writing is pleasant, my younger sister is analyzing these kinds of things, therefore I am going to convey her.