Skip to main content

Embed 3D model on site

Here is the 3D model I built in Fusion360.

Embed model with Fusion360​

Process

The Fusion360 file can be share and open in browser with its basic function

  1. Open Fusion360
  2. Find you model at the left sidebar, right click it and find the "Share Link"
  3. Copy the link
  4. Paste the link in the .md file and inside the code <iframe scr=""> </iframe>
<iframe src="https://a360.co/3QdqBcr" width="700" height="500"></iframe>

The result is here:

Export the Fusion360 file

Export as stl format​

To export the model for 3D printing, we can save the 3D model to .stl. Right click the title bar of the model, choose "Save As Mesh" and save your model in .stl format

Export as other format​

To export the model for other format, right click the title bar of the model and choose "Export".

The format list is here:

Embed model with Sketchfab​

Sketchfab has 10 uploads credits per month for free.

Pumpkin by david.chan.lw on Sketchfab

Process

In this example, I use the stl model export in the last step from Fusion360.

  1. Go to Sketchfab
  2. Log in and press the upload button on the top right.
  3. After upload, click save and publish on the bottom right.
  4. Click the <\>Embed button on the bottom left
  5. Copy the code by click the bottom left button COPY TO CLIPBOARD and paste them in the site 
<div class="sketchfab-embed-wrapper"> <iframe title="Pumpkin" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered width="640" height="480" web-share src="https://sketchfab.com/models/2e154b444d1e42bdb071edc4a2e13afd/embed"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/pumpkin-2e154b444d1e42bdb071edc4a2e13afd?utm_medium=embed&utm_campaign=share-popup&utm_content=2e154b444d1e42bdb071edc4a2e13afd" target="_blank" rel="nofollow" style="font-weight: bold; color: #1CAAD9;"> Pumpkin </a> by <a href="https://sketchfab.com/david.chan.lw?utm_medium=embed&utm_campaign=share-popup&utm_content=2e154b444d1e42bdb071edc4a2e13afd" target="_blank" rel="nofollow" style="font-weight: bold; color: #1CAAD9;"> david.chan.lw </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=2e154b444d1e42bdb071edc4a2e13afd" target="_blank" rel="nofollow" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>

If you build the site with Docusaurus, you should convert code into "JSX" format:

<div className="sketchfab-embed-wrapper" style={{textAlign: 'center'}} > <iframe title="Pumpkin" frameborder={0} allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered width="640" height="480" web-share src="https://sketchfab.com/models/2e154b444d1e42bdb071edc4a2e13afd/embed"> </iframe><p style={{fontSize: 13, fontWeight: 'normal', margin: 5, color: '#4A4A4A;'}}> <a href="https://sketchfab.com/3d-models/pumpkin-2e154b444d1e42bdb071edc4a2e13afd?utm_medium=embed&utm_campaign=share-popup&utm_content=2e154b444d1e42bdb071edc4a2e13afd" target="_blank" rel="nofollow" style={{fontWeight: 'bold', color:'#1CAAD9'}}> Pumpkin </a> by <a href="https://sketchfab.com/david.chan.lw?utm_medium=embed&utm_campaign=share-popup&utm_content=2e154b444d1e42bdb071edc4a2e13afd" target="_blank" rel="nofollow" style={{fontWeight: 'bold', color:'#1CAAD9'}}> david.chan.lw </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=2e154b444d1e42bdb071edc4a2e13afd" target="_blank" rel="nofollow" style={{fontWeight: 'bold', color:'#1CAAD9'}}>Sketchfab</a>

The main different are labelled here:

The result is here:

Pumpkin by david.chan.lw on Sketchfab

Sketchfab supports many 3D file formats, including most of today's popular exchange formats.
You could even upload a compressed archive folder with your file(s) in it, such as ZIP, RAR, and 7z.

Recommended file formats

.obj (should always come with an MTL material library file)	
.blend	Blender
.fbx	Autodesk Filmbox, FBX
.gltf (+.bin), .glb	GL Transmission Format
.3ds	3DS
.abc	Alembic
.dae, .zae	Collada
.las	LIDAR point clouds
.ply	Polygon File Format
.stl	Stereolithography, Standard Tessellation Language
.usd, .usdz, .usda, .usdc	Universal Scene Description (USD)