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.
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.
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.
UPDATE: I got this procedure to work. For those who have the same issue, I’ll summarise the different solutions I’ve found:
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
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: