Man-San Ma http://mansanma.com/ (647) 447- 3769 • [email protected]
How to Publish and Embed Interactive 3D Models with Sketchfab
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!
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
Browser Support
Since sketchfab is powered by webGL, and webGL is in turn run with the
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)
How to Publish and Embed Interactive 3D Models with Sketchfab 1
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.
How to Publish and Embed Interactive 3D Models with Sketchfab 2
Man-San Ma http://mansanma.com/ (647) 447- 3769 • [email protected]
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.
How to Publish and Embed Interactive 3D Models with Sketchfab 3
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