ThreeJS in Background

Hi guys,

I’m new to custom code. But I’m trying to implement a ThreeJS script as a background for a project.

It’s this JS:

As far I can see in the code, the only scripts I need are:

<script src="…/build/three.js"></script>
<script src=“js/WebGL.js”></script>
<script src=“js/libs/stats.min.js”></script>

So, in my Custom code header-section, I’ve linked to the full paths at Github, ie:

And added the javascript code in an embed, in a div in my body.

But it doesn’t work. Isn’t it as simple as that? Newbie-alert.

My project:

Hi there. I was doing some experiments and pulled this of

Found this Codepen that I made into a Webflow project:

Here’a the read only:

Does this help you in any way?

Edit: Doesn’t work in Safari.
Edit 2: It now works in safari. Changed custom canvas css width to 100%


It sure did!

I duplicated your structure, with the canvas and added the scripts (ref’s + full scripts) in the same embed/custom fields as you use. But it didn’t work yet. But …

Then, I downloaded the scripts from github, and uploaded to my own server, and magical things happened. All of a sudden everything worked out.

Thanks a lot for your help, jorn!



Holy Sh-it balls!
Clone please?

Done :slight_smile:

1 Like

There you go! Awesome. Glad I could “help” :sweat_smile:

Don’t suppose you know how to make the background transparent for this effect? I’m trying to use the particles over a gradient rather than a fixed colour.

I’ll try to look into that.

Hmm, I tried a lot of things but didn’t pull trough. Sorry. @bart any ideas?

Has anyone had any luck using these as a background with content on top?

I’m struggling with putting content on top.


You can add content in the HeroWrapper which will place the content on top of the JS animation.

Hey @larshartmann

Thanks for your help. I got some of these three.js backgrounds to work, but not some other ones. I don’t know what I’m doing wrong.

Public link:
Source code for background:

Not working:
Public link:
Source code for background:

Any help would be appreciated, thanks in advance.

Hi there Larshartmann,

How did you upload the Github scripts to your own server? Looking to do this myself to gain full control over the ThreeJS scripts.



I downloaded the scripts from Github and uploaded them to my server.

Download here:

Hi guys,

I’ve implemented a Three.js particle logo on my site at:

The interactive element works perfectly on Chrome but then does not show on Safari nor mobile browsers.

Does anyone know how I can:

  1. More acutely resize and position the animation to be responsive (currently using the Webflow designer controls - probably not the best method)

  2. Get this working on Safari and mobile versions

I would happily remunerate anyone for their support.

Many thanks,


Hi guys,

I would love to learn how to clone the effect, if anyone has a step by step process to follow, will be very nice.

thanks advance!!!