The complete guide to 3D web embed and how to use it
The biggest feature of Vectary 3.0 is web embedding. Here's a detailed look at what 3D web embedding is and how to use it to achieve your business goals
Update: June 4, 2019: Vectary web embed now supports both ARkit and AR core for iPhone and Android
If you don't speak any programming language, web embedding might still be not a part of your vocabulary, but that's about to change. Web embed, or embedded file, is any type of media you can simply insert into your website by pasting a piece of HTML code or script.
Whether you want to make your blog post more interesting, add an interactive element to your website, make your customers experience products in AR, or highlight a part of an article with a design element from popular social media networks, it can bring a lot of value to your website and customers visiting it.
These days internet users come across web embeds every day. These come in the form of social media posts, on news and media websites and many others. YouTube is probably one of the most recognized embeds. If you want to include a video in your blog post, more often than not, it will be a piece of code, that can be found under any YouTube video, and has been simply copy and pasted. 3D projects are moving in this direction too.
A 3D and AR web embed example
The image below is an interactive Vectary 3D viewer. Try to rotate it or open this blog on iPhone with Safari or on Android with Chrome to see it in AR:
How to prepare web embed in Vectary
Step 1: Create a 3D object or 3D scene
To embed an object on a blog or website, you need to plan where you want the embedded object to appear. Based on that you can prepare the embed so it fits naturally into the surroundings of the website. There are several ways you can create a 3D project that is web-friendly.
1. Import your own 3D model
If you’re already experienced in 3D modeling you will probably have a few models and files to start your 3D web embed. Simply import them to Vectary and wait until they load. Currently, we support over 60 file formats including: .obj, .dae, .stl, .gltf, .glb, .jpg, .png, .svg, you check out the whole list of all the supported formats here.
2. Use the library and access 3D repositories or pre-made collections
For beginners in 3D modeling, we created a set of curated collections which consists of assets, materials, and environments. For non-commercial use, you can also use already existing models from popular 3D platforms like Google Poly, MyMiniFactory, Sketchfab or The Noun Project. You can even search in these repositories if you’re looking for something specific. Once you’ve found it, drag & drop it onto the scene and continue with generating the embed.
3. Create a project from scratch
For advanced users, Vectary offers intuitive mesh-modeling in edit mode. Similar to importing projects, you can create it from scratch or edit an existing one you imported, or placed on the scene from the library. When you’re finished with 3D modeling, continue with generating your embed code.
Step 2: How to generate a 3D web embed code
Once you are ready and have your project and 3D object prepared, creating a web embed code is really easy and straightforward. Our software does all the work for you with a simple click on the Generate embed button. You might have to wait a couple of minutes as we process the object in real-time, compress it, bake the textures and create the UV mapping to make it a web-friendly all-in-one package accessible via a simple line of code. Once this is finished an iframe code is generated and is ready to be used in your HTML code.
Vectary 3D web embed settings
You have the option to customize the outcome of your embed in the advanced menu:
- Texture quality
The most important parameter that affects embed is texture quality. More detailed textures take more time to generate as they are very detailed. They might also have a slower performance when implemented on the website. On the other hand, smaller resolution textures are faster to load.
- Ambient Occlusion
Defines the shades on surface
Defines light on the surface
- Augmented reality
Last but not least, your project can be viewed on devices with AR support. Apple devices running iOS 12 and the newest version of Safari are one of the early adopters of this technology. Vectary Viewer now supports AR core technology for Androids. If you have an e-commerce business and you want visitors to experience the product in real proportions, or preview the product in their environment this is the way to go. By default, we keep this feature turned on. You can read more about it on our blog.
More settings coming soon
- 3D Viewer Presets
- Control Rotation Speed
- Custom Camera Settings
- Mouse Behavior Options
- Custom Camera Settings
- eCommerce Optimization
How to edit the 3D web embed code
Users familiar with HTML code can edit the generated iframe code. For now, only the basic parameters such as width, height, and border frame can be changed. In the future, there will be more customization and editable options available in the embed code. These will be accessible without the need for any coding skills. So for example, if you want to resize and make your embed smaller so it fits nicely onto your website, change the attributes “width” and “height” to fit your needs. We recommend keeping framerborder at value “0” to make the object blend in nicely with the background.
Step 4: How to edit the 3D viewer on your website
Embedded objects on the website are the final results of 3D designs created in the Vectary editor. However, Vectary takes it one step further and allows you to edit already embedded 3D projects and change them in real-time. Open the project in Vectary, make your changes and re-generate the code. All changes should be applied instantly.
Ready to start embedding a 3D/AR content?
Case studies wanted!
Have you used 3D web embed in your store? Tell us about your results on firstname.lastname@example.org
How much does it cost to use the Vectary 3D web embed?
You can use Vectary 3D viewer on your website for free. However, there are a few limitations with the free version: a watermark and limited bandwidth. Check our pricing to learn more.
Why should I use the Vectary web embed for augmented reality instead of the native USDZ embed code?
Your 3D design is embedded directly on the website and ready to use without the need to open the AR Quick View in Safari. Your 3D model is also not possible to download - this currently happens when a visitor clicks on the native USDZ embed in other browsers or on the desktop. Furthermore, Vectary Viewer supports AR core for Androids - so one 3D/AR viewer has a bigger reach.
How to put an interactive 3D or AR design on to a Weebly website
Vectary web embed is a great way to insert an interactive 3D element on to your Weebly website
How to put an interactive 3D or AR design on to a Shopify website
Vectary web embed is an easy way to input an interactive 3D element on your Shopify site.
How to put an interactive 3D or AR design on to a Squarespace website
Put an interactive 3D/AR element onto your Squarespace page. Vectary generates a piece of code that you paste into your Squarespace editor.
How to put an interactive 3D or AR design on to a Wix website
Vectary web embed is a great way to get an interactive 3D element on to your Wix website or blog.
Introducing Vectary 3.0: The future of the web is 3D and AR
Vectary is making the move to become the first 3D and Augmented reality CMS for the web. Vectary is closing the gap between web design and mixed reality.