Adding 3D Model Integration through Marmorset Toolbag

Hi!
After some research I have reached the point that I just do not know what to do. I would like to integrate a 3D model into my website using the Marmorset Toolbag viewer. To do this I need to add a scene.mview and an html. to a specific page with FTP access. How exactly do I do this in Bubble.io?

Even if I try to use external data through an HTML element (<iframe width=“640px” height=“480px” src=“https://www.artstation.com/embed/665067″ frameborder=“0″ allowfullscreen mozallowfullscreen=“true” webkitallowfullscreen=“true” onmousewheel=”” scrolling=“no”> ).
nothing happens

Documentation: Getting Started With Viewer | Marmoset
Documentation 2: Viewer Integration Guide | Marmoset

lovely day,
finn

1 Like

Hey!!
Unfortunately, I’m not so familiar with Marmoset, but are you using it because you need to have a 3D model with certain realism?

I build a web app in Bubble that allows you to upload 3d models in .glb format and then after integrating them via an iframe.

The app is quite simple and you don’t have all the features of Marmoset, but I thought if you are just looking to add a simple 3D model, maybe it could be useful to you!

Let me know if you run into some issues if you decide to try it! :slight_smile:

Hey Design.agx!
First of all, thanks for the incredibly fast response. I did not expect that.

Indeed, I would be happy about some realism. I would just like to see an animated 3D model (animal) with transparent or no background. Sketchfab offers the possibility to add models in the way with iframe, but it is useless without their pro features (100 euros a year - too expensive). Therefore I thought Marmorset Toolbag would be a good alternative.

I like your app very much but am still undecided how realistic the representation will look with my own models, I will give it a try!

Edit: the documentation is empty for some reason, therefore not quite sure how to implement it into my page though :slight_smile:

Hey there!

Well, animations are supported in Glb! and for textures, it will help a lot if you bake them before exporting to .glb

Transparent background is something I should add actually, If you ever try it and have some requests, I would love to talk to you to have some feedback in a quick call if possible!

I’ll add the transparent background tomorrow :slight_smile:

1 Like

the documentation is empty for some reason, therefore not quite sure how to implement it into my page though

Yes it’s empty still, but i’ll walk you through it.

Firts you need to sign up
Then you will be taken to your dashboard.
Click on the button on the right corner for uploading your 3d model.
After it you will arrive to the editor. Here you can make some changes on light and shadows or add more models to the viewer.
Click on the button on the down right corner saying Generate AR.
It will take you to another Page where you can tweak some AR settings.
Click on the button go back to dashboard and you will see your model on your dashboard

Click on the 3 dots menu and click on Embeded Code.

Now you just need to paste this code in an iframe on your page!

Sorry for the documentation Ill try to get it ready this week also I’m still working n this project :slight_smile:


Thanks mate,

I was able to insert the model, however it takes over the whole hud, which I obviously don’t want. Is there a way around it? Looking forward to the transparency function!

By the way, the upper model is the integration of Marmoset toolbag, but there is problematic that it has a loading screen, which I also do not want.

Hey!!
So now it’s possible to have a transparent background. When you are picking the color in the editor, there is a slider for arranging opacity :slight_smile:

You should be able to embed your model now without all the other elements around!
You need to copy/paste the embed code to try it!

I had to do some changes behind the scenes but I’ll add all of these options in the editor this week.!

Let me know what you think and if you have other inputs/ requests I’ll be more than happy to look into it :slight_smile:
I must say this is a side project so I can’t be working on it full time and right away into it so just to let you know to be a little be patient if in the future some other changes take more time to be applied!

@design.agx Hello Sebastian, hope you are doing well man.

I do have a 3D model need for my web application and with your expertise on the subject, i’d like your recommendations on how to acheive it.

So basically, I am building and app for a transport company. They have two types of vehicules (see pictures).

I understand that with .glb format files of those vehicules, i easily can implement them on the app and until there, everything fine.

The problem, is that they also need the 3D models to be clickable on everypart and add crosses of different colors to represent shocks on the vehicule.

I know this seems complicated and i am only wondering if this is possible to do.

Any thoughts?
Chassis 1

Kind regards,
Clem

Hey @clement4 !

I think you might need to use three.js for this.

I suggest you to try Spline 3d, is a no code tool that is based in three.js

You can add your models there and all type of interaction you might need.

And then you can add an embed code to show it as an iframe in your app :slight_smile:

@design.agx Thanks buddy, i’ll check that out :slight_smile: