I’ve seen many cool effects created with Three JS for quite some time and I always wanted to experiment with it myself but just didn’t find the time… until now! I like to share some stuff I made with ThreeJS on this page. In this article I’ll show them to you. I’ll add more demo’s here in the future as I go along…
I’m sorry this is not so much a turorial this time. I’m still learning a lot myself. Perhaps later I’ll put some tutorials about ThreeJS and WebGL on this blog. It should be something there aren’t already so many very well created tutorials about like on Three.js Fundamentals or Red Stapler. Check them out if you’re interested!
Please click on the images of the demo’s below to play around with them yourself. Hope you like it as much as I liked creating these scenes!
Retrogrid in space
Beware… Nerd alert!
This retrogrid uses a custom fragment shader. ThreeJS creates it’s own shaders, but the framework does not restrict you from altering it for your needs. Therefor the lines in this grid aren’t created through geometries, but by a fragment shader on a plane geometry. With some lights added with ThreeJS, the grid seems to glow!
You can also use transparency by making the initial MeshPhongMaterial transparent, updating its fragment shader and returning a vec4 to gl_FragColor.
Macarons on a plate
Aside from that I like how this Macarons demo looks, it is quite standard for people who know ThreeJS. What stands out for me is the use of a shadow on the plate and also, I love how the bumpmapping on the table looks.