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>
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
jorn
February 18, 2019, 12:57pm
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.
3 Likes
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/
3 Likes
Nir
February 19, 2019, 9:42am
4
@larshartmann
jorn
February 19, 2019, 12:50pm
7
There you go! Awesome. Glad I could “help”
johnPrimal
April 13, 2019, 11:37pm
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.
jorn
April 14, 2019, 6:00pm
9
I’ll try to look into that.
jorn
April 14, 2019, 7:03pm
10
Hmm, I tried a lot of things but didn’t pull trough. Sorry. @bart any ideas?
kettler
May 1, 2019, 6:50pm
11
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.
arlind
May 7, 2019, 1:34pm
13
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:
More acutely resize and position the animation to be responsive (currently using the Webflow designer controls - probably not the best method)
Get this working on Safari and mobile versions
I would happily remunerate anyone for their support.
Many thanks,
TJ
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!!!
