Embedding 3D models into your website with Modelo

 

Schroder house By Qi Su Modelo »

 

So you want to show off your 3D modeling skills… Well, we want to help you! Embed your 3D Revit, Rhino, SketchUp, 3DS Max or Vectorworks model into your blog or portfolio website using a small piece of code we provide through Modelo. This small snippet of code creates what is called an “iframe” (an inline frame of html, embedded within a website). If the blogging tool you use supports iframes, then you should be in luck. Now onto the embedding!

 

1. View your Model in the 3D viewer

Once you upload your model, navigate to the 3D view page, which looks like the screenshot above.

 

2. Click the Share icon and select “Embed”

 

From here it’s easy. Click the share icon at the far right of the toolbar and select the “Embed” option. This will open an Embed Options popup, which provides you with your html code for the iframe.

 

3. Choose your Embed options

Let’s look at each of the elements in the image above individually:
  • Embed code: This is the text you will copy and paste into your blog or website’s html. Click the text once to select it, copy it, then paste into your site. (We’ve included some helpful links to iframe how-to’s for some of the most popular blogging sites below)
  • Size: This sets the size of the embedded model. The default is 640 x 360 – experiment with this to find the best fit for your purposes and the format of your website’s content. Pro-tip: you can adjust the width to 100% in order to have an adaptive window.
  • View: Default / Current View allows you to set the angle or perspective of the model when it loads on your site. Selecting Default will display the model in your embedded viewer as you see it when you first open it in Modelo. If you have a particular angle you want the model to be displayed at when it loads, cancel the Embed, rotate the model to your preferred position and then select Embed and toggle to “Current View”
  • Autostart: Automatically loads the model on your site so that a user can immediately begin rotating it. Keeping Autostart turned off will display a preview of your model with a Play button superimposed on top. The user must click the Play button to be able to rotate the model. If you are planning to embed a number of models on a single page, you should consider keeping Autostart turned off, otherwise the load times could slow down significantly.
  • Show view switch button: In the top right corner a small cube is displayed. Hovering over this cube pops out three different perspective views that allow your visitors to quickly change angles of view between: Top/Bottom, Front/Back, Left/Right and Default.

 

4. Copy and Paste your Embed iframe html

With your Embed settings selected from Step 3 copy the iframe text (which will change slightly based on your preferred settings). Switch to the page in your blog or website in which you want to embed, select the embed option and paste!

Here’s what it would like in Squarespace (for example):

Embedding_3D_models_into_your_website_with_Modelo_—_Modelo_Blog.png

 

First add a block and select the “Embed” option outlined here in red, then paste your copied iframe html code into the box.

 

Keep in mind: You will probably need to play around with the settings a bit and explore the embed support options within your own publishing platform.

 

Here are some links to helpful support pages for a few different publication platforms:

Register for a Free Modelo Account

 

Next tip: learn how to customize your settings in Modelo before you share with clients or colleagues here.

Leave a Reply

Your email address will not be published. Required fields are marked *