Introduction: Embedding a Fusion 360 (3D) Model in Your Instructable

By

Here is a cool new way to enhance your Instructables with detailed interactive 3D models created using Autodesk Fusion 360. I'll take you step by step through the process of publishing your Fusion 360 model on the Fusion 360 Gallery and embedding it in your Instructable. Just for fun, I'll be using a model I created retrospectively for the chicken coop I've just finished building in my back yard. Here is the embedded 3D model for you to play with - so you can decide whether its worth reading the rest of this Instructable.

(If you can't see the interactive 3D model above, its probably because you're not using a WebGL-enabled browser, or you're using the Instructables Mobile app).

Step 1: Publish Your Model on the Fusion 360 Gallery

I'll assume you've already got Fusion 360 setup and you've created a model you want to show in your Instructable. Before you can import your model, you must first publish it on the Fusion 360 Gallery. To do this, open your model and click the Share to Fusion360 Gallery button (I've circled it in the image above). This will display a publishing palette on the right of your Fusion 360 model screen.

Select the renderings you want to include in your gallery post, make sure you check the '3D Model' checkbox, and enter a title and description for your model. (You'll be able to tweak or update your Gallery posting later, so don't worry about making everything perfect first time).

Click the 'Publish' Button, and you'll be notified that your Gallery project has been created. Click the 'Open Project' link to open the project in your web browser.

(Note - There may be a delay before your posting becomes fully public, as the Gallery team review your submission).

Step 2: Copy Your Iframe Embedding Code

Open your Gallery project and you should see the renderings you selected to be displayed. If you remembered to click the checkbox to include a 3D Model, you will also see a thumbnail with a little silver box in the bottom right corner. This is you 3D model.

Click that thumbnail and your 3D model will display. Go ahead and play with it.

When you've finished playing, click the "</>" button on the bottom right of the model viewer. This will display your iframe embedding HTML code - copy it.

Step 3: Embed the Model in Your Instructable

Now you're ready to embed the 3D Model Viewer in your Instructable. Navigate to the Step to which you want to add the model, and click the "</>" button on the left of the formatting toolbar to change to HTML view. Paste the iframe code you copied in the last step into the HTML where you want it to display. In the example in the screenshot I've wrapped the iframe element with a paragraph element ("<p></p>").

Your model is now embedded in your Instructable.

(Note: The viewer requires WebGL, and so will only display on a WebGL-enabled browser. That means it won't display on an iOS device at this time).

Step 4: Some Features of the Viewer

The viewer has some really cool features.

  • If the model has structure, you can activate the explode slider on the viewer menubar and explode the model to see how components fit together.
  • Right-clicking a component in the model displays a context menu, which allows you to isolate a component (the second screenshot shows an isolated framing stud - the rest of the model displays as a ghost so you can see the component in context).
  • The same menu also allows you to hide components (in the third screenshot, I've hidden the plywood paneling to look at the framing underneath).

Step 5: The Chickens Say 'hi'

I'm writing this Instructable the day after I finished building the real version of the chicken coop I used to demonstrate the viewer. Here's a photo of the real thing (the raccoon proof enclosure is still under construction). Last night was the first night in their new home for our five chicks.

Enjoy your 3D modeling! I hope the addition of Fusion 360 models will make it even easier for people to follow your Instructables.