3D Space Warp JavaScript Effect – Three.js Tutorial




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”

  1. 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.

  2. 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/

  3. 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.

Leave a Reply