Embed 3D elements (Spline) from hosted JS files

Hi all,

Here is my site Read-Only: LINK

I’m trying out a new design tool called Spline. In Spline, you can create 3D designs and easily implement it in webprojects.

I am trying to add multiple designs to a webflow project. This is possible with iFrames as stated in their documentation. However adding multiple iFrames to a page will drastically reduce page speed and user experience.

Another way to embed Spline designs in your webproject is by hosting the JS files and calling them. The 3D model needs to be generated in a canvas element with the id “canvas3d”.

I can get it to work on webpage I fully coded from scratch, but I cannot use the same method in Webflow (using an embed element). This is what I have in my embed element:

And this is the working custom code.

I need to have the code working from an Embed Element, as I want to have multiple Spline Designs in a Collection list.

Can anybody help me to get the 3D elements to display?

Thanks in advance!

David

2 Likes