Learning Three.js

or WebGL for Dummies

Learning Three.js News # 15: Creative 3D Demos of the Week

Hello everybody

Welcome to a new edition of Three.js News. In this episode we have gathered some of the most impressive demos of the past weeks. We will play with fun webgl games, matrix-like maps and visit beautiful landscapes. We will also discover apocalyptic experiences, large terrains and original animations.

Vortex Spheres


Vortex Spheres is a swirly webgl demo by David Li. It is a wild vertically growing mass of green and blueish spheres. You can tune variation, radius or just let it drop.

Learning Three.js News #14: Creative Demos of the Week

Hello everybody!

This post is about edition 14 of Three.js News. Our favorite demos of last week were very fun to play around with. There were some set above the clouds, staring directly at the sun. Some were cool webgl experiences inspired by games and movies. Some showed a brilliant use of shaders and VR technology. And we even met a three.js sock puppet!



This breathtaking project is a photo-realistic CGI-rendered 3D Virtual Reality film on three.js player. “It takes the viewer on a journey from one beginning to a new beginning.” It was made for Vrse.

Learning Three.js News #13: Creative Demos of the Week

Hello everybody

Welcome to a new episode of Three.js News. This time we will discover some artistic and abstract demos. We will go through them at fast speed, see them grow, expand and dissolve. We will also get a bit spooked by a creepy head!

Bjork’s website


Beause arty design is also a three.js matter, here is a beautiful demo created by Vince Mckelvie from M/M design agency in Paris. It’s singer Bjork’s new website.

Learning Three.js News #12: Creative Demos of the Week

Hello everybody,

This post is a special edition of Three.js News. We have decided to change the format a bit. We will continue publishing the most interesting and creative 3D demos on the web. We will collect the ones that we have tweeted during the week and highlight each one. It’s more of a Newsletter kind of style. Hope you like it :)

Icosahedron Snake

screen shot 2015-08-10 at 10 43 09

Fun and twisty three.js demo by Thomas Hooper on Codepen.io. It’s a spiral snake making its way in a funky pink background.

Three.js Inspector in Chrome Devtools: v1.2.5 Released

Hey everybody,

We recently announced three.js inspector. This chrome devtools extension allows you to inspect the three.js within your page, directly from devtools.

It is also a great debugging tool! With it you can learn how three.js demos are made, interact with them and modify their parameters. You can grab it on chrome web store and give it a try. It is definitely fun to work on :) We had some long week ends with sleepless nights, and now the Three.js Inspector 1.2.5 is released !

Install THREE.js Inspector

LearningThree.js News # 11: Stay Tuned With Creative 3D Demos

This post is another edition of Three.js News. We have collected some original demos with skilful effects and lots of style. There is a high degree of talent displayed on these projects. In this episode, we will cycle through the daring climbs of the Tour de France. We will turn around decadent blue worlds, play with colourful Rubik’s cube and take the new Renault Espace for a test run. We will also merge and morph with creative experiences and investigate fascinating generative compositions.

Three.js Inspector in Chrome Devtools

Hey guys,

Recently people started to experiment with three.js and Chrome devtools. The excellent @thespite first did Shader Editor Extension and then Three.js Editor Extension. @mrdoob did it too here where he links directly to the three.js editor itself. The goal is to make an extension which allows to inspect your page when you are debugging three.js.

All that is very early work, but the concept seems really promising. It will allow to interact with almost all three.js demos out there. It is a great tool to debug your own work, or to understand how a demo is done. You can even use it to fine tune your parameters.

I loved it so I decided to give it a shot. I forked @thespite work and looked at it over the last weekend. I reused the UI layer from the three.js editor, improved the UI a bit, and applied it to the Chrome Dev tools. The implementation still clearly has some quirks, but I love the concept. I believe it can be a very strong tool to debug three.js.

You can find the Three.js Inspector Extension on chrome app store and play with it.

Install THREE.js Inspector

LearningThree.js News #10: Stay Tuned With Creative 3D Demos

This post is about the 10th episode of Three.js News. We are very happy to share exceptional demos with you every week. In all the 3D experiences we have shared on previous episodes, we have witnessed talent, dedication and skill. Without so many creative projects we wouldn’t have been able to continue with the news. So, to celebrate this 10th edition, we are going to travel through space, time and even dimensions.

In this episode, we will explore other worlds and make musical journeys across decades and light years. We will wonder around the Parisian metro in a different light and be amazed by the simple beauty of land and stone. We will interact with the futuristic and be repelled by the terrestrial. We will learn to safeguard and preserve our cultural heritage through online 3D, and finally, take a walk through the magical woods of the imagination.

LearningThree.js News # 9: Stay Tuned With Creative 3D Demos

This post is part of the Three.js News series. If you have a taste for innovation and digital creativity in 3D, this series is for you. For this edition we have collected some very artistic demos. We will take a look at some unique projects. Everything from subversive and divergent experiences to particle libraries has a place in this post. We will play around with funny and endearing characters and explore objects around Earth’s orbit. We will spin around colorful cities and visit impressive one man portfolio. All of these developers are taking creativity one step further.