Turn your ThreeJS project to a CDN to host in website building services

Questions
1

Hi! A hobby programmer here. I’m currently testing a theory. I’ve made a ThreeJS project from scratch. It’s quite a big project - multiple scenes, meshes made using reusable JS classes, scroll-animations, etc.

I’m ready to publish it. This will be linked to Webflow using its custom code block. You can write ThreeJS script on the platform and it will work wonderfully as shown here; unfortunately, Webflow has a 10000 character limit. For bigger code projects, they advise linking the script using a CDN.

Problem here is how do you it? What’s a good approach? How do you link multiple ThreeJS files into a CDN? Do I need to manually combine all classes and functions into one file? It feels counterintuitive and time-consuming if that’s the case. Any help would be appreciated.

2

Not sure how you’re already making things inclusive for Web flow if you’re using es6 code blocks it sounds like you could use module exports to create a library of dependencies

3

That could work. My idea was to bundle all JS files using Webpack, etc. then use the resulting build JS file then use jsDelivr to create the CDN link. I haven’t tested this out though.

4

yes, you can definitely do with multiple files. That’s what I’m doing for Polygonjs. When you export a scene to be used for Webflow, the js and all models/textures get bundled in as many files to they are all loaded in parallel.

See this short tutorial to see it in action.

You’ll need to make sure any absolute path is updated accordingly to your cdn, and that all files are uploaded in the right folders. And you’ll have to check for caching too, if you update the files, as your CDN rules may need to be tweaked for the right files to be cache busted.

5

I saw the short tutorial. Polygonjs looks like an interesting implementation; i’ll definitely check this one out.

1 Like
6

UPDATE: I got this procedure to work. For those who have the same issue, I’ll summarise the different solutions I’ve found:

Solution 1:
1.) Use a bundler like Webpack to consolidate all JS files.
2.) Create a repository in GitHub and push your project there together with the bundled file (place it in a dist folder).
3.) Use jsDelivr to create a CDN link based on the location of the bundled file in your repository (see their instructions)
4.) On Webflow, paste the script tag with the CDN link within the body tag. HTML can be placed using a custom code block or referencing an element with a ID (depends on your project). CSS can be placed within the head tag

Solution 2:
Another solution by @gui is to use PolygonJS. From his tutorial video, it’s easy and straightforward.

I guess it’s a matter of choosing the right solution for your project.

Additional resources that helped me get the solutions:

1 Like