Learning Three.js

or WebGL for Dummies

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.

Hatsune Miku Dancing in Augmented Reality

This demo shows Hatsune Miku dancing in augmented reality within your browser! This is great and surprisingly easy to do. All that running on your browser, based on web standards. I did it to show it was possible to do AR within the browser. I wanted to share the code to see what you guys can do with it.

Best of all, it even runs on mobile phones that support WebGL and WebRTC. The screenshot on the right is made on a nexus. So we can do augmented reality within the browser on mobile

We can do augmented reality within the browser on currently deployed mobile phones today! There is nothing to wait for.

How is it coded ?

It is mainly a link of 2 parts. First webar extensions for three.js. They bundle what is needed to handle augmented reality with three.js, from the webcam setup to the marker localisation. Second part is the mmd loader which loads the model. It loads the Hatsune Miku model and its animations.

Once you got those 2 parts, things are simple :) you just have to display your model where your marker is. To know the tech details, you will have to dig in the code. I will likely talk more about AR tho.

Now Let’s Do a Bit of History

I did this to show it was possible to do AR within the browser and to share the code to see what you guys can do with it. It was for a AR oriented hackathon in Dublin. It recently landed a new job at Daqri. Part of my job is developer relations, so I get to help people doing AR. I love it :)

All the code to handle Hatsune Miku is from Takahiro Aoyagi. He did a fork on three.js to load mmd formats, the format used to store Hatsune Miku. It may be included in three.js soon. Here is his example for three.js It all started with his mmd viewer in pure webgl. The original contains a LOT of neat features like inverse kinetic, physics for the hair, a toon shader to make the color more cartoonish, a edge shader to enhance the outline of the model like a drawing. He is doing excellent work. Check him out on twitter as @superhoge.

Let’s have a word about Hatsune Miku herself. It is such a nice story. She is a Japanese star but she is purely virtual. She is a humanoid persona which appears as a drawing or as a hologram. There is no human behind, even for the voice! When she sings, what you hear is a voice synthesizer from crypton All that is crazy but true :)

She even does concerts where thousand of fans are go to see her. Actual human fans I mean, not virtual ones. As you can see, Hatsune Miku is no stranger to augmented reality. I love her!

How To Run The Demo ?

You may want to run this demo obviously. Here is how to do it. First you put the demo url in your browser. It will read your webcam using getUserMedia. When it asks for permission, allow it :) Then you need to put this AR marker in front of the camera. You can print it and point the camera toward the paper or you can load the marker web page and put the phone in front of the camera. And now you can see Hatsune Mike Dancing in Augmented Reality.

Now let’s look at it in action in this little screencast.


If you want to experiment with augmented reality and three.js, checkout threex.webar. It is so cool to make augmented reality on the web! I hope you have as much fun as I had doing it :) I can’t wait to see what augmented reality will do on mobile’s browsers.

That’s all folks. Have fun.