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.

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.

Cheers,

JC

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

Download here:
https://github.com/mrdoob/three.js

Hi guys,

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

https://preview.webflow.com/preview/vovi?utm_medium=preview_link&utm_source=dashboard&utm_content=vovi&preview=05814d42c5fb011e452e4052b75dc28e&mode=preview

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,

TJ