Hello everybody! This is my first Three.js Interview video. The inspiration came from all those great people out there doing very cool projects with three.js. I want to share their innovations with others. If you know me, you know that I love talking about three.js. So, I would like everybody to have the opportunity to enjoy and learn from these three.js interviews. So three.js interviews are videos of around one hour where people are talking about cool things they do with three.js . Maybe you could get some ideas for your own project or simply partake on a subject you’re passionate about.

The idea is to have interesting people come and talk about cool things that they’ve done with three.js. Like Ben Houston, who is our guest in this first video. Ben is the Team Leader for Clara.io, a online 3D modeling and rendering tool that you can use inside you browser. Ben talks to us about the creation and the evolution of Clara.io and about all the interesting features it’s got!

I hope you enjoy it and stay tuned for the next Three.js Interview :)

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk aboutthreex.vertexanimation. threex.vertexanimation is a three.js games extension which provides easy vertex animation. You can see your object move as if it’s got a life of its own! You can use it to make the objects in your game bounce, dance or move in funky ways. You can add it in your games to get a Flubber effect. The best part about it is that you can get creative. You can morph or deform your objects to transform them into other objects. It is really fun to experiment with!

To see the other posts about one threex a day and forget our moto!“A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

• examples/basic.html [view source] : It shows a basic usage of the module.
• examples/demo.html [view source] : It simply add a more shiny example using reflexion and environment map.

How To Install It

You can install it via script tag

1

<script src='threex.vertexanimation.js'></script>

Or you can install with bower, as you wish.

1

bower install threex.vertexanimation

How To Use It

Here is a typical usage

12345678910

// instanciate the animation objectvaranimation=newTHREEx.VertexAnimation(geometry,function(origin,position,delta,now){// here you put your formula, something clever which fit your needsvarangle=now*2+position.y*10;position.x=origin.x+Math.cos(angle)*0.1;})// update the animation at every frameupdateFcts.push(function(delta,now){animation.update(delta,now)})

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk aboutthreex.suzanne. Suzanne is a classic. She is the blender famous model familiar to all blender users. It is also a three.js games extension extension which provides you with a monkey model. Blender wanted to create a less common test model, so Suzanne was born. She is more precisely a 3D model of a chimpanzee head. It is pretty basic but you can easily add it as a funky animal character and install it in your platform games!

To see the other posts about one threex a day and forget our moto!“A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

• examples/basic.html [view source] : It shows a basic usage of the extension.

How To Install It

You can install it via script tag

1

<script src='threex.suzanne.js'></script>

Or you can install with bower, as you wish.

1

bower install threex.suzanne

How To Use It

How to load the geometry ?

12345

newTHREEx.Suzanne.GeometryLoader(functiononLoad(geometry){// this function is notified when the geometry is actually loaded// geometry is a THREE.Geometry of suzanne model})

How to create a mesh with it ?

1234567

newTHREEx.Suzanne.GeometryLoader(functiononLoad(geometry){// create a mesh with the geometryvarmaterial=newTHREE.MeshNormalMaterial()varmesh=newTHREE.Mesh(geometry,material)// attach mesh to the scenescene.add(mesh)})

Sometime it is not desirable to wait for the loading to complete before adding the object to the scene. To avoid this, we create a container which will contains the model once loading is completed. Thanks to the scene graph inheritance, any position/quaternion/scale changes made on container, will be reported to the children meshes.

123456789101112

// create the containervarcontainer=newTHREE.Object3D();// add the container to the scene without waiting the end of loadingscene.add(container)// start to load the geometrynewTHREEx.Suzanne.GeometryLoader(functiononLoad(geometry){// create a mesh with itvarmaterial=newTHREE.MeshNormalMaterial()varmesh=newTHREE.Mesh(geometry,material)// attach mesh to the containercontainer.add(mesh)})

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk aboutthreex.cubecamera. threex.cubecamera is a three.js games extension which provides a helper for cube cameras. It is very useful when a given object must reflect a texture cube live. Just look at it, you can see the reflection as clear as a real life mirror! You can give your texture the color you want, for example in the demo I created a “gold” sphere to give it a shinier look. Be careful though, this requires 6 renderings of the scene every time you update it. It becomes expensive fast.

To see the other posts about one threex a day and forget our moto!“A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

• examples/basic.html [view source] : It shows the most basic usage of this extension.
• examples/demo.html [view source] : It shows a little bit shinier demo.
• examples/discoball.html [view source] : It shows a little bit shinier discoball. TODO to port in its own demo. It doesnt even use live rendering. Use the “minecraft goes party” from nextgamefrontier talk.

How To Install It

You can install it via script tag

1

<script src='threex.cubecamera.js'></script>

Or you can install with bower, as you wish.

1

bower install threex.cubecamera

How To Use It

First you need to create a classic mesh, the one which gonna reflect the live texture cube. In this example, we gonna create sphere with the color ‘gold’ like this.

123456

var geometry= new THREE.SphereGeometry(0.5, 32, 16)var material= new THREE.MeshPhongMaterial({    color   : 'gold'})var mesh= new THREE.Mesh(geometry, material)scene.add( mesh )

Now we needs to create the cube camera which gonna update the texture cube live. We do that like this.

12

var cubeCamera= new THREEx.CubeCamera(mesh)scene.add(cubeCamera.object3d)

Don’t forget to update it when needed (likely at every frame)

1

cubeCamera.update(renderer, scene)

Now that we got the textureCube, we set the mesh material to reflect this texture cube.

1

material.envMap = cubeCamera.textureCube

This is it! Now you got the live texture cube on your sphere :)

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk aboutthreex.transparency. threex.transparency is a three.js games extension to easily handle transparency. Transparency is a tricky business in Webgl, but this extension makes it approachable. It is worth trying. Do you remember the transparency between the leaves of a tree in 3D games? Well, with this extension you will be able to add it to your own game. You can also make clouds appear transparent in the sky you have created for your game. It is easy to include and it gives a nice polish finish, a professional touch.

To see the other posts about one threex a day and forget our moto!“A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

• examples/basic.html [view source] : It shows a basic usage of this extension.

How To Install It

You can install it via script tag

1

<script src='threex.transparency.js'></script>

Or you can install with bower, as you wish.

1

bower install threex.transparency

How To Use It ?

The algo is well described in thisopengl tutorial about transparency. We just adapt it to fit three.js. First you setup all the objects that you want to be transparent

1

THREEx.Transparency.init(objects)

It will change the THREE.Material to make it support transparent. Second you need to update all your objects at every frame.

1

THREEx.Transparency.update(objects, camera)

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk aboutthreex.poolball. threex.poolball is a three.js games extension which helps you build pool balls. It provides dynamically generated models of pool balls, so no model download needed. It may be fun to play with when you start with three.js, funnier than a plain sphere for sure :) You can use it for your bar games, having your characters bet when playing pool, or even your Marble Table games, as I did, adding cool granular sounds when the balls roll.

To see the other posts about one threex a day and forget our moto!“A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

• examples/basic.html [view source] : It shows a basic usage of this extension
• examples/demo.html [view source] : It shows multiple pool balls setup like on a pool table :)

How To Install It

You can install it via script tag

1

<script src='threex.poolball.js'></script>

Or you can install with bower, as you wish.

1

bower install threex.poolball

How To Use It

Here is the default usages

12

var mesh= THREEx.createPoolBall();scene.add(mesh)

this is with custom arguments

123456

var mesh= THREEx.createPoolBall({    ballDesc    : '0',  // the text which gonna be written on the ball    stripped    : true, // true if the ball must be stripped, false otherwise    textureW    : 512   // the width/height of the created texture for this ball});scene.add(mesh)

Some ball description are already done.

• cue will return an unstripped white ball
• black will return an unstripped black ball
• 1 to 9 will assign the official colors for nine-ball pool

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk aboutthreex.terrain. threex.terrain is a three.js games extension which provides a procedural terrain generated from a simplex noise, the Perlin noise. As you can see you have different zones that make the terrain more varied, the blue zone represents water, the green one represents trees or grass and the white zone at the mountain top is snow. Imagine your video game character walking on these 3D mountains or flying over them, pretty cool eh? You can take him through river, forest, wind and snow if you want ;)

To see the other posts about one threex a day and forget our moto!“A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

• examples/canvas.html [view source] : It shows a perlin terrain in a canvas 2d.
• examples/planegeometry.html [view source] : It displays the terrain in 3d with three.js.
• examples/height.html [view source] : It show how to test the height in a 3d terrain
• examples/minecraft.html [view source] : It show a minecraft character walking on perlin terrain

How To Install It

You can install it via script tag

1

<script src='threex.terrain.js'></script>

Or you can install with bower, as you wish.

1

bower install threex.terrain

How To Use It

To allocate a heightMap with a width of 100 and a depth of 200, do

1

varheightMap=THREEx.Terrain.allocateHeightMap(100,200)

To generate some heights based on a simplex/perlin noise, do

1

THREEx.Terrain.simplexHeightMap(heightMap)

If you want to display it in three.js, built a THREE.PlaneGeometry for it

1234567

// build the geometryvargeometry=THREEx.Terrain.heightMapToPlaneGeometry(heightMap)// init the materialvarmaterial=newTHREE.MeshPhongMaterial();// create the mesh and add it to the scenevarmesh=newTHREE.Mesh(geometry,material);scene.add(mesh);

To get the ground height of this mesh, use the following

1

vary=THREEx.Terrain.planeToHeightMapCoords(heightMap,mesh,x,z)

It is possible to enhance the rendering of this heightmap with some vertexColor, and a smoother shading if you want.

123456789101112

// build the geometryvargeometry=THREEx.Terrain.heightMapToPlaneGeometry(heightMap)// set the vertexColor in the geometryTHREEx.Terrain.heightMapToVertexColor(heightMap,geometry)// init the materialvarmaterial=newTHREE.MeshPhongMaterial({shading:THREE.SmoothShading,vertexColors:THREE.VertexColors,});// create the mesh and add it to the scenevarmesh=newTHREE.Mesh(geometry,material);scene.add(mesh);

To get the height with heightMap coordinates, just use

1

vary=THREEx.Terrain.heightMapToHeight(heightMap,x,z)

If you want to display the result in a canvas 2d, just do

12

varcanvas=THREEx.Terrain.heightMapToCanvas(heightMap)document.body.appendChild(canvas)

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk aboutthreex.text. threex.text is a threex game extension for three.js which makes it easy to add 3d text in your game. You can use it to create a big logo on top of a shop or a big sign of any kind Las Vegas style. Up to you to see :) It is very flexible. You can fine tune lots of parameters to make it fit your needs. You can choose the fonts, the size, the bevel, the weight etc…

To see the other posts about one threex a day and forget our moto!“A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

• examples/basic.html [view source] : It shows a 3d text.
• examples/requirejs.html [view source] : It show a 3d text and it is all loaded thru require.js

How To Install It

You can install it via script tag

1

<script src='threex.text.js'></script>

Or you can install with bower, as you wish.

1

bower install threex.text

How To Use It

Here is a very basic usage

12

var mesh= new THREEx.Text('THREEx')scene.add(mesh)

Here is another example with more parameters. The options are passed directly to THREE.TextGeometry. See three.js docs for details.

1234567

var mesh= new THREEx.Text('THREEx', {    font        : "droid serif",    weight      : "bold",    size        : 1,    height      : 0.4,})scene.add(mesh)

Hello everybody!

It’s been nearly a month since I started publishing “One threex a day” challenge. The idea was to share with you the many three.js games extensions that I had written over time. I wanted to show you how they could be useful, fun and easy to include in your very own three.js game. I came up with a motto “One threex a day gets your game on its way”. I was all set up and ready to go. This was a challenge inspired by John Resig’s article called “Write code everyday”. I deeply agree with his theory for making progress, increasing productivity and getting the work done. I wished to try something similar on myself.

Let me tell you though… it WAS challenging! Keeping the publication rhythm was hard. It takes a lot of discipline and organization to get it done everyday. I had the best intentions, but unfortunately I got sick and I felt bad for most of last week. Additionally I had some day work on the side that I needed to get done. At this rate of publication, it was very hard to keep up! At first I wanted to publish the threex extensions for a period of two months but I think it is best to rest for a while. So a week ago I published the last three.js game extension of phase 1.

The good news is that I’ve had a very interesting experience. I’m pleased with the results. Obviously, some posts got more attention than others. I think this was because the three.js game extensions I published weren’t all for hard-core developers or game creators. Some were pretty basic, but still had educational value for people just starting with three.js. I wanted them to be directed to all kinds of audience, amateurs and experts alike. I really appreciated the process of sharing these extensions, and overall I had a great response. I got some verycoolretweets and a lot of positive echo from you guys. Thanks a lot! Don’t hesitate to contact me and give me some more feedback.

I stopped publication last week, but wait…I’m not saying I’m giving up though. Far from it. I have promised myself, and I promise my readers, to come back with more three.js extensions. Especially, because I still have a lot to publish, there are still some tricks up my sleeve ;) For the moment I will concentrate on regaining my strength, writing more code and documenting it for the next threex batch. I hope to deliver and publish it soon.

Stay tuned! I’ll be back.

Hello everybody.

This is a new Three.js Online Meeting post. The idea is to interview people using Three.js in their projects. I think it is a great way to learn from each other and share our experiences. You know me, I love three.js and I love talking about it. In this video of about 1 hour you are gonna see some interesting people really passionate about games and three.js

For this interview, i talked withJérôme CHOAIN andMichel Gutierrez , the guys behind Jocly Games. They have over 113 web board games with very cool features as you will see. You can play on and off line with your friends, or just you and your computer. They also have some mobile apps that make their games even more accessible. You can dowload their games from Facebook, Google Play and iTunes. And good news for developers: you can create and embed your own games! It is tons of fun. Be sure to check it out.

I hope you enjoy it.

This post shows how to read your phone camera and make it appears as transparent, aka to act as a see-through. It may seems unrelated to 3d at first but it is extremely useful in augmented reality. I know it may seem silly :) But this see-throught is the base of Augmented Reality in a phone. This and other AR tech will be the subject of future posts.

It makes your device ‘appears as transparent’ So when the user is looking at her device, she is seeing the reality. You just have to display your augmented part on top and you got augmented reality. A Picture is Worth a Thousand Words :)

How It Is Coded

Webcams are great for interactivity. We will read the webcam thanks to WebRTC, html5 API which can be used to do video/audio conferences like Skype or Hangout.

In our case, we just get the video from the webcam with the getUserMedia() function. we dont need all the network part. It is quite widespread according caniuse which is great! You can learn more about it on mdn or html5rocks

Now that we know how to get a video, which camera to pick ? This demo is intended for phone. They often got multiple cameras nowsadays. typically a front camera for selfies a back camera for the normal photos.MediaStreamTrack will list all the media source available in your browser. In webrtc vocabulary, front camera is called ‘user’ facing video back camera is a ‘environment’ facing . So we try to get the environment video camera if we can.

For the see-through effect to be convincing, we need to be careful. first we display the video stream in full screen, thus it is more real to the user. We display it in the background of the page with the proper css Additionally we ensure we keep a properaspect ratio, no matter the size of the browser window. So it isn’t streched. So it must be robust to window resize and orientation change. All that makes the resize function more subtle than usual. but nothing dramatic

Source

Here is the full source of the effect. It is in a github repo. Enjoy!

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101

<!DOCTYPE html><metaname="viewport"content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body,html{height:100%;}</style><bodystyle='margin: 0px;; overflow: hidden;'><script>// shimnavigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;;(function(){'use strict;'// create video elementvarvideo=document.createElement('video')video.setAttribute('autoplay',true)document.body.appendChild(video)/**         * Resize video element.          * - Made complex to handle the aspect change          * - it is frequent when the mobile is changing orientation         * - after a search on the internet, it seems hard/impossible to prevent browser from changing orientation :(         */functiononResize(){// is the size of the video available ?if(video.videoHeight===0)returnvarvideoAspect=video.videoWidth/video.videoHeightvarwindowAspect=window.innerWidth/window.innerHeight// var video = document.querySelector('video')video.style.position='absolute'if(videoAspect<windowAspect){video.style.left='0%'video.style.width=window.innerWidth+'px'video.style.marginLeft='0px'video.style.top='50%'video.style.height=(window.innerWidth/videoAspect)+'px'video.style.marginTop=-(window.innerWidth/videoAspect)/2+'px'}else{video.style.top='0%'video.style.height=window.innerHeight+'px'video.style.marginTop='0px'video.style.left='50%'video.style.width=(window.innerHeight*videoAspect)+'px'video.style.marginLeft=-(window.innerHeight*videoAspect)/2+'px'}}window.addEventListener('resize',function(event){onResize()})// just to be sure - resize on mobile is funky to say the leastsetInterval(function(){onResize()},1000)// get the media sourcesMediaStreamTrack.getSources(function(sourceInfos){// define getUserMedia() constraintsvarconstraints={video:true,audio:false,}// to mirror the video element when it isnt 'environment'// video.style.transform   = 'scaleX(-1)'// it it finds the videoSource 'environment', modify constraints.videofor(vari=0;i!=sourceInfos.length;++i){varsourceInfo=sourceInfos[i];console.log('sourceInfo',sourceInfo)if(sourceInfo.kind=="video"&&sourceInfo.facing=="environment"){constraints.video={optional:[{sourceId:sourceInfo.id}]}// not to mirror the video element when it is 'environment'// video.style.transform   = ''}}// try to get user medianavigator.getUserMedia(constraints,function(stream){// set the video.src with the userMedia streamvideo.src=URL.createObjectURL(stream);},function(error){console.error("Cant getUserMedia()! due to ",error);});});})()</script></body>

This post is about Three.js News, a fun and brief newsletter about demos in three.js. The idea is to present the new and interesting 3D creations on the web. Our goal is to keep the audience up to date and tuned with Three.js most recent developments. We will upload videos and collect information of the latest demos. Let’s take a look at this episode

In this second edition of Three.js news we have collected very creative and funky demos. Some of them were developed for both desktop and mobile phones. Some are games, some are just pure fun. Using the latest technologies, they are all a clear example of what’s possible to do with web 3D today.

Inconvergent Waves

Inconvergent waves is a nicely done demo by Anders Hoff. You can create waves by moving your mouse around. It’s like making ripples on the water. This technique is actually used as a method for generating landscapes. It’s very reactive and the movements are smooth and natural. Visit the inconvergent website to check out the developing process.

Interactive WebGL globes

Interactive WebGL globes is a great way to improve your geography skills! This very educational and fun demo is a creation of Steve Hall. You mouseover the countries that you want and turn around by clicking on the interactive globe. Don’t hesitate to read Steve’s blogpost to know more about his implementation of D3 and Three.js.

Spiral Circle

Spiral Circle is another cool demo created by Steve Hall. It is based on mbostock’sexample. It is extremely hypnotic and it has kind of a disturbing texture, like the skin of a snake monster or something. You can pan to the left to divide the circle in two. Be careful, it’s alive!

Hatsune Miku

Hatsune Miku is a Three.js example demo done by takahiro. It’s a very fun demo even if takahiro is still working on improving it. This very cute blue hair girl is Japan’s sweetheart. She dances in holograms and does live concerts…yeah i’m not kidding! We are even trying to bring her to life in AR.

Race Against Oblivion

Race against oblivion or Timeshift is an original game made by Utranoir. Inspired on the story of a unique French car : The Delahaye 165, you have to race against time to save this one of a kind automobile. The presentation of the game is outstanding, it has great design, background and effects. Bonus, it can be played on both desktop and mobile!

A Particle Dream

A Particle dream is a demo created by Nop Jiarathanakul. It is one of the latest Chrome experiments. It is a wonderful simulation of particles moving smoothly around. You can choose the shape you want the particles to morph into. The music and the ambiance mix together for a very relaxing result. Oh and you can actually use Leap Motion in this demo.

Our Galactic Neighbourhood

Our Galactic Neighbourhood is another very educational demo. Developed by creative coder Charlie Hoey this demo is a simulation of the charted stars in our Galaxy. You are able to explore the stars travelling both in space and time. Have you ever wondered how the stars are like lightyears away from Earth? Or how will they be thousands of years from now? This demo is your interstellar adventure.

Conclusion

In this blogpost we reviewed some 3D demos for Three.js News. They are all very diverse. We saw games, educational projects, simulations and funky characters. What they all have in common is their creativity and the use of 3D technology on the web. Some even go further and incorporate fun control sensor like the Leap Motion device. Have fun checking out all these demos. I hope you enjoy them as much as we did.

Stay tuned for more Three.js News and see you next time.

This post presents another edition of Three.js News. In this episode we have gathered some wonderful demos, web documentaries and very artistic experiences. They have all different genres but each of them show a wide range of skills.

It is inspiring to see how many great demos are out there in the 3D world. I wish I could make them fit all in one episode. But it’s okay, I’ll do my best to keep up with your creative minds.

Nightmarish Tentacles

This is demo is so cool. It was created by the imagination of Gregoire Divaret and it is fantastically twisted. It is perfect for a Halloween night! You can see the tentacles moving like snakes entwined with each other. Zoom in very close in full screen for a great fright.

Generative Tree

This is another demo developed by Gregoire Divaret. The tree grows from the beginning and expands into shape. It is beautifully designed and it has a really nice lighting. You can turn around and see it from different angles. Be sure to check out Gregoire’s website for all his cool experiences with WebGL

The Fallen of WWII

The Fallen of WWII or fallen.io is a data drive documentary about war and peace. Directed and coded by Neil Halloran it examines the human cost of the second World War. It can be watched on video through mobile, Apple TV and Chromecast. You can also watch the interactive version which allows you to pause at key moments in the video to interact with charts and numbers. This touching project is a way to remember and never forget the devastating consequences of war.

Gugelmann Galaxy

Gugelmann Galaxy is a very artistic experience created by Matthias Bernhard. This awesome demo is a great way to explore the image galaxy live in the browser with three.js. It is very educational, you can arrange the paintings by color, technique or description. Bonus points since it also has a Google cardboard version. Don’t forget to check out the blogpost to see how it was developed.

Procedural Star

Procedural Star is an excellent demo with great colors and effects. It was designed by Bruno Simon. The star is great for any space game, you can turn it around, zooming in and out and see the smooth movements it has. You can also change the parameters to customise it as much as you like. Bruno’s website is filled with other amazing projects he has worked on.

Enough

Enough is an interactive picture book created by Isaac Cohen or Cabbibo. It is a beautifully artistic and immersive adventure into a world of dreams. It makes the technology appear as if it were alive. It is wonderfully designed and it has a oneiric sense to it. In Cabbibo’s website you can see all his other creations and be amazed by his skill.

Experiment for Google IO 2015

This is a very fun and playful demo coded by Jaume Sanchez for the latest Google IO. You play with the Is and the O by clicking on them. They react, with very good physics, by jumping around. There is also an option to change the camera and look at it from different angles.

Pregoneros de Medellin

Pregoneros de Medellin is a breathtaking and very interactive street walk experience developed by Thibault Durand and his talented team. It was created using a GoPro and Javascript. You can read the post on how it was produced. In this web documentary you walk around Medellin city in Colombia and listen to the street-vendors cries, which are very traditional in the cultural Colombian landscape. You can click on each vendor to watch a video of his typical day to day life. I just loved it!

Conclusion

In this blogpost we talked about some wonderful demos and very artistic projects. We were very impressed by the rich experiences that lead to web documentaries and interesting publications. All these demos are very interactive and show the amazing things we can do with 3D on the web.

We also want to thank our readers. We love it when developers out there send us their stuff, new and creative demos that we can share.

Stay tuned for more Three.js news. See you next time.

This post introduces another episode of Three.js News. In this edition we explore dynamic and constantly changing experiences. With the featured demos we will travel through time, discover new worlds and parallel universes. We will also get into fun and procedurally generated experiences that never repeat themselves twice; they are different every time, no matter how much you try them out. We will enjoy psychedelic effects and interactive experiments.

Ancient Earth

Ancient Earth is a very educational experiment found in the dinosaur pictures website. It is a globe of how Earth used to look like, from 20 million to 600 million years ago. There is a list where you can choose any period on the evolution of our planet. For example, when multicellular life was first developed or when plants and flowers first appear… or even jump to dinosaur extinction! You can also remove clouds to see Earth’s transformation and use the left and right keys to travel through time.

Dennis

Dennis is a very colourful generative 3D experience produced by Always & Forever computer entertainment and presented by NHX. It is a fun music video with music from popcorn_10. Frames are created in real time. Nothing is pre-rendered. Each scene is procedurally created every time you press play. You’ll never see the same video twice. Check out the about page to see how it was developed.

Growing Tree

This demo displays the beautiful and natural growth of a tree. It was created by Greg Tatum. You can check out his blog to see the other works and animations he has done. It starts out at the root, from seedling to tree with small incremental additions. It shows a dynamic growth of the 3D tree structure. Nice colours and lighting make it truly mesmerising.

Another End Game

Another End is a procedurally-generated game with an interesting story and a thread to follow. It was developed by Ryan Bottriell and his team. Inside the adventure, you are a player, created by Entity to reunite the 4 Glyphs which are essential to the world. You can have great powers; you can be Architect, a Protector, an Illusionist. Plus there are experimental versions to play it with Leap Motion and Occulus Rift. Follow them on twitter and take a look at all their developments.

Simple Ball

Simple Ball is a traditional pinpall game for the web browser using Three.js. It a Chrome Experiment developed by Andreas Rominger. It is very interactive and fun. You will have a very good time trying to keep the ball inside the game. The trick is to shake and tilt!

Sanoran’s Valley

Sanoran’s Valley is an exceptional experience imagined by Samuel Honigstein. It is a desert vision of the city inspired by Alberts Camus quote about the big city “being the desert we should seek to remedy life in society”. Very philosophical! It has great shader effects and it actually uses Google Street View, so you can tap in any address you want and see how would it be like transformed into a desert. Check out Sam’s portfolio to take a look at his other creations.

Box Physics

Box Physics is a very cool and creative demo. It was developed by interactive coder Silvio Paganini. We can see applied physics in the boxes using oimo.js. They react with a click of your mouse and they change color. There is also a very cool screen effect. You can visit Silvio’s website to try out at all his experiments online.

Magic Mirror

Magic Mirror is another Chrome Experiment created by Alexey Roudenko. It is an original psychedelic artwork demo. It is actually web camera triangulation, great for animation in a game. It is amazingly cool, you can use your webcam and see yourself in kind of a distorted reality. You can change the opacity and effect of the triangles and see the cool effect it has.

Conclusion

In this blogpost we explored some very dynamic and exciting demos. We experienced ever-changing worlds where 3D is ever-present. We played some immersive games and enjoyed fun and altering animations. I hope you liked them as much as we did.

Stay tuned for more Three.js News. See you next time

This post explores original demos with lots of knowledge. In this episode of Three.js News we will take a tour around 4D dimensions and creative subdivisions. We will also travel over webs of information and have fun with wildlife games. There is a lot of diversity in these projects, but one thing is for sure, they are all developed with the utmost skill and created for the maximum effect.

Paranoid vs. Shy Birds

This is a very fun demo created by Yakudoo on CodePen. The bird characters are so cute. The one in the middle is the paranoid one. You can move his head around and see how he interacts with the small shy birds. The HTML, CSS and Javascript are visible on the scene.

Threepark

Threepark is a cool editor developed by liguocn. Easy to understand and to use, great for artists and 3d lovers. You can create different models and designs. You even have a library of templates to use. Subdivide a model as many times as you like in the cagemodeling canvas. You can also store your models in the cloud and export them into 3d printing format. Great way to unleash your creativity.

Parrot Hunt

Very funky retro game, and also a Chrome Experiment, created by Magnus Persson aka nergal . The idea is to shoot only the parrots, not the flamingos. You can move around and reload your rifle to keep shooting at your prey. Fortunately its not real hunting! You can get really serious and try to improve your score every time like I did! It’s really enjoyable and it makes you feel like a great aim.

Ntype

Ntype is another Chrome Experiment demo developed by Kevin Zweerink. It shows us a compelling and interesting way to explore 4D. The typography is extruded into the 4d dimension. You can change the parameters and settings and customise the rotation planes. You can even modify the trails that the letters leave behind them. There are also a lot of other designs to explore in Kevin’s homepage

WikiGalaxy

WikiGalaxy is a beautiful and original demo created by Owen Cornec. This experiment takes us to a fantastic space that we actually already use everyday life. We can visualise Wikipedia as a galactic web of information. It’s a marvellous world of knowledge. There is a map where you can fly over the planets, zoom and search. Wikipedia articles are stars, interests are nebulas. Have a good time learning! You can see more WebGL visualisations in Owen’s portfolio

Multivers3D

This is the first video game demo released by the multivers3d team. It supports multi-users, cross platforms and it has zero install. This first episode is called Earth Creed. You are a honey bee and you need to harvest pollen and nectar from your environment. You have to use your judgement to equilibrate the balance of the ecosystem. This game will definitely make you love nature.

Conclusion

In this post, we discovered some varied and original demos. We traveled through a space of information and explored 4D dimensions. We also played very funky games and designed 3D models with various subdivisions. The experience each of these demos give us is unique. Keep creating such wonderful projects.

Stay tuned for more Three.js News. See you next time.

This post is our new edition of Three.js News. In this episode we will be amazed by cinematographic experiences and awesome effects. Some of them will even give you goosebumps or make your hairs stand on end. We will explore physics engines, blockbuster movies coming soon, particles, portfolios. We will take a look at everything from a manga universe to a world of change. There is also a show off, a very special mention to a great experience that we found, combining 3d animation, motion capture and projection. These vivid experiences are unforgettable and all too real.

Cardboard With Oimo

This is a very fun and colourful demo created by Marcio Puga using oimo.js. Oimo is a great physics engine developed by lo-th. In this demo you can see how the spheres change color and react when they touch each other and the surface around them. It’s very cool and you also have a view for google cardboard.

Insidious movie experience

This awesome cinematographic experience will make your hairs stand on end. The first two episodes of the Insidious movie saga really frightened me. I’m anxiously waiting for the new one. This demo is not reassuring. I think i’m gonna be even more scared! You explore the room around you and click on the hot spots, the story will develop with each click. The effects will have you screaming your heart out!

1 Million Particles

This demo shows us a beautiful and subtile way of creating particles in codepen.io. Developed by Edan Kwan using curl noise and fbo on three.js. He produced a very professional and fascinating effect. You can change the color of the particles, the size, the speed.

Aaron Meyers portfolio

In his portfolioAaron Meyers creates a very cool environment. We can see his skills as a developer in this original homepage.Turn around in the room and by clicking on each TV screen you can explore the works he has done. You can also click on Aaron himself to know a bit more about him. This is hands down one of the most creative portfolios I have seen.

Realize project

If you liked the movie Ghost in the Shell you are going to love this project It is an homage made by true fans. Ghost in the Shell is a manga by Masamune Shirow, there was also a movie made of it. This demo captures the universe of the manga pretty well. You can turn around and decide which icon to pop-up. There are very cool neon lights in the space, it gives it kind of a Tron aspect. You can also take a look at posts on VR and AI from other news-based sites.

A world of change

This demo is part of Google Trends. It is a great idea for social impact. Through google search you can click on topic (recycling, energy, water, natural environment, pollution) or a city, and see how those searches reflect the way the world thinks about climate change. You can discover what certain cities are doing about the environment. It is an eye opener and a great way to encourage sustainable development

Terminator Genisys

Terminator Genisys is another successful and cinema based demo created my Paramount Pictures. You can get an amazing inside of the characters by rotating the camera to explore 3d models. You can also zoom in and click on hotspots for information and videos about the movie coming soon. It is very fun.

Show Off “Le Petit Chef”

Special mention to this great experience that we found. Le Petit Chef is a masterpiece created by the guys at Skull Mapping, Filip Sterckx and Antoon Verbeek. They experimented with projection on a dinner table. Combining 3d animation and motion capture, a miniature chef turns your dish into a grill and cooks right in front of your astonished eyes. I wish I could book a place at this table! It is an awesome experience that I’m sure you will love.

Conclusion

In this episode of Three.js News we have seen awesome projects. All very vivid and lifelike. Some movie related and some really scary, others more realistic and down to protecting earth. They all have their own universe. We experienced physics and particles, projection and motion capture. Regardless of how or by whom they were developed, all these experiences show us what is possible to create in the amazing universe of 3D.

This post is part of the Three.js News series. In this episode we will see some very cool editors, we can share assets and create WebGL experiments with. They are useful, practical and easy to use; they are also a great way to start designing your own 3D models. We will take a look at some impressive demos with cute animals, multiple icons, shaders and crazy skills. All these projects are very fun to play with!

Poonya

Poonya is an active community and a cool portal for sharing assets. That is, you will be able to share models, material, textures, animations and scripts with SEA3D Studio for web. An easy to use editor that allows you to create models and to share them with others. You have a wide range of tutorials to help you get started and discover all the functionalities. You can also take a look at all the projects, contributions from other developers.

Chill de lion

Beautiful demo created by Yakudoo. We saw paranoid birds in another three.js news. Now its time for the king of the jungle. You will see a very cute animation of a lion who is in desperate need of chillin’ and refreshment. It must be a very warm summer day for him. By clicking you activate the ventilation and when turning around with your mouse you make wind blow in every direction. The lion will definitely appreciate. He will actually smile.

Holy Running Cow

This is another demo done by Yakudoo. He really has a talent for creating fun animal characters! You can see a very cute cow running around. When you press and drag the scene rotates, and the cow tries to pick up the pace.

Mighty Fish

We just love Yakudoo’s demos. This one is called Mighty Fish. In it you will see a very determined fish, swimming with or against the current. Kind of Nemo’s father when he couldn’t find Nemo. You can move your mouse to change speed and direction and see how adorably funny it is.

Many Icons Using Three.js

Funky demo created by Yasunobu Ikeda in codepen.io. It shows various icons and letters that come together and turn into one, flowing in a replaying cycle. It changes color every time and it sometimes gives you the impression of being inside the Matrix. This demo was created using the Time Remap effect with Three.js and TweenMax. You can visit the Clock Maker website to see all Yasunobu’s experiences in this interactive motion lab.

Unstable Clock

This one is a captivating demo and a Chrome Experiment developed by Tomasz Slawnikowski, a freelance html developer. It measures time in an original frame. Every second is drawn according to the hour passing by. If you look a it for a while you will feel in a state of unreality, in a haze, hypnotic state. Even if it appears unstable, the clock is ticking!

Crazy Skills

Crazy Skills is a very cool project created by Panasonic. If you are a football fan you are definitely gonna enjoy it. It is an awesome presentation of football player Neymar incredible sport skills. Just in case you don’t know him, Neymar is a recognised and adored Brazilian football player who plays for FC Barcelona and is captain of the Brazilian national team. He is very talented as you can see it in this motion museum dedicated to him. There a a set of skills you can click on and see how Neymar’s avatar plays on the field.

Fiddling with shaders

Very kaleidoscopic experiment created by Chris Chua. In this demo Chris plays around with shaders in WebGL to simulate force over an area. You can click and drag your mouse around to see how a trail is designed, go faster or slower. It almost resembles a small fish in the water.

I’ll be back

Amazing project brought to us by the team at Goo Create. Here is another cinematic and life like demo inspired by the last Terminator film. The effects and sound intensify the experience and the ambiance around is purely immersive. On their website you can try out their great WebGL creation tool for ads, games and interactive experiences. Their editor is impressive by its simplicity and accessibility.

Conclusion

In this episode of Three.js News we discovered some great ways to create 3D models and share assets. There are vast possibilities when using great editors and tools. We discovered letters and numbers that form together in time and space. We also played with fun and lovable characters and professional football skills. We hope that you will really enjoy experimenting with all these projects.

Stay tuned for more Three.js News. See you next time

This is another post for Three.js News. In this eighth edition we are going to travel and dance with cubes, discover Swiss ground with points, and do some commuting with lines. We have a couple of educational viewers, one for asteroids and another, less space related but equally exact, for terrains. We will enjoy turning around with funky vertex and spinning helix. We will discover some beautiful models skillfully displayed in Three.js. We will also be able to measure and forecast happiness.

The Happy Forecast

The Happy Forecast is a beautifully made and innovative social experiment. It was created by the team at Clubhouse, an interactive design studio. In this project they measure happiness in every region and postcode of London. They did this with over a year social wellbeing research. Everything from public interactions to body language and audio factors are taken into account. You can visit their website to learn more about their cool projects

Point Cloud Viewer

The point cloud viewer experiment is amazing. It measures the exactness of land, making an accurate replica of it. They have displayed the Swiss canton of Neufchatel. You can navigate through it, keeping above ground, increasing the moving speed, flying or changing controls. The ground will materialize before your eyes.

Double Helix Spin

This fun demo was created by Thomas Hooper. The helix have a predefined motion, their trajectory is spiral and never ending. You can see them entwined as snakes each with a different color, it is a very cool effect! You can see some of Thomas very artistic projects on his website stainless vision

Fluuuu

Fluuuu is a fun and rythmic demo created by Silvio Paganini. Silvio is a very talented developer, we featured him in previous Three.js news. In this demo, you can see cubes dancing as if to a beat. They were inspired by Conway’s game of life. You can change their size and color. Silvio did this for FLUUUID, a London creative-tech collective that converges art and technology.

Asteroid Model Viewer

This educational demo was developed by Ian Webster. We featured his Ancient Earth project, which we loved, in previous episodes. Now Ian has created an asteroid viewer with lots of models to choose from. You can see various types of asteroids; a lot of research has been put into this demo. You can even see them in wireframe mode.

Metrogram3D

Metrogram3d is a wildly interactive and creative demo by nulldesign. It is a time lapse simulation of the Tokyo metro. You can see what is happening in the web of lines in real time. It makes you feel dizzy sometimes. We can realize the pace we are living at when we commute every morning…maybe we should slow down a bit!

Cube Travelling

Cube Travelling is a very cool interactive demo created by Rauri on Codepen.io. The effect of the cubes or bars, depending on which was you see them, is fantastic. In this version, you can change the camera perspective and view. You can also toggle the colours. The motion is very fast and the effect is enthralling. In his funky vector website you can check out all the demos Rauri has developed.

Maya models converted to Three.js

This demo was created by Alex Stockdale. You can see custom Maya models and materials beautifully and skillfully converted to Three.js. You can turn around the models set on the table, zoom in to see them more closely. There is also some great shadow casting in this demo. Alex is an interactive artist, we can see that in his portfolio where he mixes code and creativity in his projects.

Conclusion

In this edition of Three.js News we travelled with cubes, points and lines. We discovered how happiness can be measured and forecasted in a determined region. We enjoyed dancing, spinning and converting models to Three.js. All of these projects reflect researched studies, skills and creativity, and the elliptical never ending wonderment of web 3D.

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 thecode. 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 fromTakahiro 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.

Conclusion

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.

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.

Like to Death

This demo is a subversively intelligent project to show us the sometimes empty shell of social media ‘likes’. It was created by Geoffrey Lillemon and Stööki, an independent design collective. How many times a day do we “like” something on the web? These clicks have a lot of power over us. In the demo you can see the figure of death and her demons on the middle. As more and more people like the project, it will get destroyed. Our “likes” will totally disintegrate the scene.

Particulate.js

Particulate.js is a JavaScript particle physics micro library. Developed by Jay Weeks, it is simple, fast and stable. The movement of the particles is amazing, you can see them flowing in and out and control them with your mouse. They come together in a compact cloud of matter.

Sneeze the Dragon

This creative, fun and very interactive demo was created by Yakudoo on Codepen.io. Yakudoo is a very talented developer who truly has a gift when it comes to imagining fun demos like this one. The more you keep clicking the harder the dragon sneezes, be careful, that’s fire he is breathing out!

Blend4Web Player

In this project we can see a great real time cartoon model created by Yadoob for Blend4Web, a tool for interactive 3D visualization on the internet. You can turn this funny Yoda like character around and look at the awesome shadows the model casts. Visit the Blend4Web website to see all their different demos and designs.

Christmas experiments

Christmas Experiments is an advent calendar which features digital artists from the creative coding community and their web experiments each day leading up until Christmas. Some of the artists include Michael Anthony, Damien Mortini, Matt DesLauriers and Eiji Muroichi. There many experiments and artists you can choose from. Each experience is magical, wonderful and it will make you jolly with Christmas spirit.

My shards

My shards is an abstract experience developed by internet artist Ezra Miller. It is diverse, divergent and very creative. Every time you click on it you will get a new texture on the screen. The change in color and design are awesome.

Bruno Quintela’s profile

This is the impressive portfolio of Bruno Quintela. You can take a tour around his website and see the wonderful forms that contribute to the digital adventure. The WebGL aesthetics is amazing. It is polished and beautifully presented. A true masterpiece.

Stuff in Space

Stuff in Space is a sideral demo created by James Yoder. It is a realtime 3d map of objects that are in Earth’s orbit. You can explore all the waves and transmissions surrounding our planet. The website updates daily with data from space track and uses satellite.js a cool Javascript library to calculate satellite positions.

Circular City

This interactive demo was developed by Mombasa on Codepen.io. You can follow the movement of a very colourful and revolving city. Nice way to build it using three.js You can see the streets and buildings closer to you as it moves around and uncovers itself. Codepen.io is a code editor in your browser, excellent for designers and developers to create wonderful projects.

Conclusion

In this episode of the Three.js News series we saw demos bursting with artistic innovation and creativity. All developers featured here are true artists of the digital and 3D world. Their characters are memorable. Their ideas and profiles are designed to make a lasting impression in our minds. Their creations are aesthetic, useful, inspirational, filled with knowledge and skill. I hope you appreciate and enjoy their talents.

Stay tuned for more Three.js News. See you next time