Streaming live at 10am (PST)

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:
https://threejs.org/examples/#webgl_points_waves

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:

https://github.com/mrdoob/three.js/blob/master/build/three.js
https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js
https://github.com/mrdoob/three.js/blob/master/examples/js/libs/stats.min.js

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:
https://preview.webflow.com/preview/threejs-bg?utm_source=threejs-bg&preview=659f707768684f868d54aa92db15eb2d

Hi there. I was doing some experiments and pulled this of https://jorns-beautiful-project-063ea4.webflow.io/

Found this Codepen that I made into a Webflow project: https://codepen.io/kevinsturf/pen/AJtmF

Here’a the read only: https://preview.webflow.com/preview/jorns-beautiful-project-063ea4?utm_source=jorns-beautiful-project-063ea4&preview=a8c5c55780eb863f4c6b34b839109f82

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!

View: https://threejs-bg.webflow.io/

2 Likes

@larshartmann
Holy Sh-it balls!
Clone please?

Done :slight_smile:

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.

Best,

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.

Working: https://three-js-1.webflow.io/
Public link: https://preview.webflow.com/preview/three-js-1?utm_source=three-js-1&preview=f7e7ad01abcb7befe79568aa44fbd821
Source code for background: https://github.com/mrdoob/three.js/blob/master/examples/webgl_points_waves.html

Not working: https://three-js-2.webflow.io/
Public link: https://preview.webflow.com/preview/three-js-2?utm_source=three-js-2&preview=597c8dd62cc3e700b44d8efa7523ff91
Source code for background: https://codepen.io/anon/pen/MRdOXd

Any help would be appreciated, thanks in advance.