How to create a cool 3D space warp effect as background for your website using JavaScript and Three.js.
Source Code: https://redstapler.co/space-warp-background-effect-three-js/
Nebula Cloud Tutorial: https://youtu.be/5f5wwQb22tE
=== Follow us on ===
Facebook: https://www.facebook.com/theRedStapler
Website: http://redstapler.co/
Twitter: https://twitter.com/redStapler_twit
#ThreeJS #JavaScript #WebDesign
Original source
17 responses to “3D Space Warp JavaScript Effect – Three.js Tutorial”
how can we give the stars variation in opacity?
wonder how to make the effect like the thumbnail..
Love the tutorials very straight forward … I just thought of a new project after seeing this lol
I put the renderer on a Canvas but it don’t resizing correctly in responsive 🙁 How to do that ? Thx for the video
Guys for this tutorial you need to serve the files from a server for whatever reason. The stars weren't showing up for me and I was getting no console errors but once I set up a server it worked fine. You can set up a simple http server with npm.
I am not changing to background color. I change either 'black' to 'blue' or 'purple' and it doesn't work. Already tried for '#fff' '# 011579' and nothing happens. Can you tell me or why?
I just tried this and I am getting a console error. The screen is black with the text boxes but no stars. I even downloaded the source code and the same result. The console error I am getting is:
index.html:70 Uncaught ReferenceError: stargeo is not defined
at animate (index.html:70)
at init (index.html:61)
at index.html:87
animate @ index.html:70
init @ index.html:61
(anonymous) @ index.html:87
index.html:1 Access to image at 'file:///C:/Users/Craig/Desktop/space%20warp/star.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
star.png:1 GET file:///C:/Users/
Can you make a video for threejs with mouse move interaction for this example?
help me plz someone. i did similar effect, but i've already spent 2 days to modify it, and there is nothing. I wan't this effect be moved in dependence om mouse like here: http://uprockfym.tilda.ws/
OR here: https://threejs.org/examples/#webgl_effects_anaglyph
help me some one please…
Wont work as a background for me. Just ends up down below any content I add
Can you make a video for threejs with mouse move or scroll interaction
how to import three.js bro make a video on it
Hi! Very urgent qn here, do you know if i could change that yellow rectangle box restraint to another shape? (which an obj. file)
I wish you've made the same effect as video's thumbnail
How to make the effect look like the thumbnail (with streaks)?
This would be a great tutorial if they actually explained everything that is going on with the code. It's easy to reproduce tutorials when you watch it being done, but actually understanding why things are done is a deeper level that tutorials rarely going into.
Thnk U!
Your example not work
https://f.usemind.org/f/WebGL/