Embedding 3D Models

This is a step by step guide for embedding a 3D model into your WordPress post.

Modelled using: Rhino
Material allocation with: VRay 3.0 for Rhino or with SketchFab in-built system
File hosting with: SketchFab

An example:

Default upload to SketchFab

Bras Basah Complex – Clean
by jingzhi22
on Sketchfab

Edited version using native SketchFab settings

Bras Basah Complex – Editted
by jingzhi22
on Sketchfab

A sample unfinished model

Option Studio Test
by gracehong
on Sketchfab

Step 1: Exporting in .obj

Clean up your model as best as you can. SketchFab is a free hosting site with a file upload limit of 40mb.

Save your model with the .obj extension and follow the settings as seen in the image on the left. .

Once saved, you should have the following files:

  1. One model file in .obj
  2. One material file in .mtl
  3. Several material textures in .jpg (if you have allocated materials to your model)
Step 2: Uploading your files to SketchFab

Create a SketchFab account and upload all 3 files that were exported by Rhino (see Step 1).

Complete the uploading process and preview the model to ensure that the model has been uploaded successfully.

It is advised to set your content as “free download” if you are using a free account as there is an upload limit if you choose to make the file private.

Take note of your model ID in the URL (highlighted in yellow).

Step 3: Embedding your file in WordPress

While in SketchFab, click on the </>Embed icon and copy the embed code. Return to your blog post and create a Shortcode block. Copy the code and paste it into the block.

This is how it will look when you first embed the Shortcode in your post. You would not be able to see the model until you have updated and previewed your post (as seen in the above sections).

Bonus: Customise with Sketchfab settings

If you would like to make some changes to the look of the model, just return to your model on SketchFab and click on Edit 3D Settings (located at the top right-hand corner) for more options.