Streaming live at 10am (PST)

ThreeJS in Background

#1

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

#2

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%

#3

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
#4

@larshartmann
Holy Sh-it balls!
Clone please?

#5

Done :slight_smile:

#7

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

#8

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.

#9

I’ll try to look into that.

#10

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