What's new
By:

Learning help - how to display Alibre 3D on Website

P

PaulProe

Senior Member
I am reaching out to the braintrust to seek help on the best way to display Alibre 3D drawings on a website. There are a bazillion different programs and methods but as I go down each hole, there is always hiccups and issues. I am curious what others have found as the best solution to them. Google brings up all the praises of how this program works better than that program but never do you see that this program won't work with that combination of pieces.

My goal is to be able to post a 3D PDF/Illustration on a website and have a viewer be able to twist and turn as he is on the page.

What methods have others used

Thanks

Paul
 
Stephen,
Thanks for looking at this. I tried your web version exporter and it does generate the HTML page with the image from Alibre. Well Done

However, I am unable to paste that into an existing HTML page. I suspect it is due to the code trying to paste a second header and second body.

Is there a way to capture the resulting image and add it to an already existing HTML page?

I admit I have a cursory understanding of coding and add-ons however I am unable to find the addon for Alibre and I am not interested in opening an account with Notion.

What am I missing?

Paul
 
Last edited:
This depends on how you are adding the viewer to the site. If you are adding to an existing html page you need:

The style (#viewer and #label or delete it with the div tag):

1785778252142.png

Everything in body:

1785778198813.png

If you're using WordPress or another CMS site, they typically have plugins and ways in embed custom content. They often accept iframes which make integration easier, but you have to host the model.html yourself or use their service if supported. If the hosting part is where you need ideas, I can make a GitHub site that demo the concept. I have one already that's hosted on Netlify. The project isn't public yet.

<iframe src="https://your-host.com/model.html" width="800" height="600"></iframe>

model.html = the output from the addon or the web app.

Can you explain the website platform you are using and how you add or upload content?
 
Last edited:
My longer-term goal is to have a configurator exported using Alibre configurations. I made a version a few years ago but abandoned it because PDM was missing configuration support and an API. I plan to revisit the code at some point.
 
Stephen,
I am trying to paste the 3D image into a Wordpress site, using Elementor as the editor. The editor has a block that accepts HTML and I was trying to paste the code into it without success. Typically you can paste HTML code into the block and they it renders along with the rest of the page.

This is the page I was trying to do it on. Front Frame As you scroll down the page, you'll notice a screen clip of an Alibre screenshot. I tried adding the block just after that picture but the code would not insert.

Paul
 

I made a demo page for the iframe code testing with the output html files from the addon. It works on WordPress see my screenshots.

HTML: 
<iframe
src="https://alibredesigncommunityprojects.github.io/alibre-webviewer-addon-demos/model4.html"
width="100%"
height="600"
style="border:0;"
allow="fullscreen"
allowfullscreen loading="lazy"
title="model4.html">
</iframe>


1785917499961.png1785917483209.png

You need the 3D viewer + model stored and accessible online for the embed to work. This is what 3D viewer websites do for you. This site is basically a 3D viewer hosting service.

Sketchfab example:
sketchfab.com

Sketchfab - The best 3D viewer on the web

With a community of over one million creators, we are the world’s largest platform to publish, share, and discover 3D content on web, mobile, AR, and VR.
sketchfab.com sketchfab.com
app.notion.com

sketchfab embed example | Notion

Hosted by Notion Sites — The easiest way to get a website up and running.
app.notion.com app.notion.com


Marmoset Viewer is what I use, but it lacks CAD features I want:
marmoset.co

Marmoset Viewer - Interactive 3D Renders In Your Web Browser

Viewer delivers WebGL-powered 3D rendering to the web and now supports animation! Export directly from Toolbag to showcase your artwork in interactive 3D!
marmoset.co marmoset.co

My goal is for alibre-webviewer-addon to make this use case easier for Alibre Design data. I don't know if it's worth adding more advanced viewer features and options. For my own usage I want configurations, view styles and PDM.
 
You must log in or register to reply here.
Back
Top