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.

Metropolitan IO

This project by Dataveyes was made to represent the metro network of the Parisian underground. It is a Webgl data visualisation experience. It gives commuters information about the metro system, like journey times and people touching in at each station. It is dynamic and interactive. Dataveyes’ mission is to transform human data into the best user experiences.

I Want To See Other Worlds

I want to see other worlds by Primitive. Have you ever dreamed about traveling through space and time? If the answer is yes, then you are gonna love this demo. Primitive is a demo group with outstanding projects in their record. In this webgl demo you can see various elements floating through space. It is raw and pure at the same time. You will see transformations, visit fantastic universes and be driven through planets of the imagination

Everything Is Fashion

Everything is fashion is a design and rhythmic demo created by Ninjadev. It is colourful, fun and its got style. You feel as if you are travelling through time with the music. You go through decades, 80’s, 90’s…etc. The transitions are impressive and keep up with the beat, great and simple effects. It is both old-school and futuristic

Light Year

Lightyear is a very cool experience developed by Mike Lacher, Mika Chernov, Brian Moore and Chris Baker. In this awesome demo you can hear how far music hits have travelled through Space. Music waves from radio broadcasts leave Earth at the speed of light. You can scroll to move away from Earth and you will hear songs that go way back ….even 100 light years.

Bon Appetit

Bon appetit is a “creeping on your skin” demo by creative coder Mario Klingemann. It will truly make you loose your appetite. It is a realistic and big slimy worm crawling on your screen. The texture is very cool and life-like. The slithering creature is in the form of a torus knot which makes it even more disturbing when it moves!

Future Citizen

This demo is a funky presentation of Future citizen, a studio making interactive web experiences for brands. It is creative and hypnotic. You can see the net of waves flow towards and against the letters. If you move your mouse around to trigger the effect, you will see that the interactions are pretty neat.

Kessler Syndrome

Kessler Syndrome is a Chrome Experiment developed by Will Field. In this demo we can see the amounts of space trash that have been produced by space travel. The idea is to track some of that trash in real time. The red dots are points where the debris fly past each other at close range. In the bottom left we can fast forward to see all the potential future collisions of trash around Earth.

Red Stone

Red Stone is a beautifully polished demo made with Goo Create. It was done by Magnus Östergren, their creative director. The scene is like a desert with some subtle wildlife on it. It has wonderful lighting and shadow casting moving around the stone. It was made with an iphone 6. This is just an example of the cool things you can do with the Goo Create tool.

Mount Rushmore

Mount Rushmore is a 3D representation of the famous national memorial in the US South Dakota state. It was created by CyArk, an organisation using digital technology to create and share 3D online libraries of the world’s cultural heritage sites. Their mission is inspiring, they want to safeguard and preserve these sites to assure their existence for future generations. Visit their website to learn more.

Way to go

Way to go is an interactive experience created by Vincent Morisset and his team: Philippe Lambert, Edouard Lanctot-Benoit and Caroline Robert. It is a magical walk in the woods which everybody can enjoy. It is fresh and fascinating with its wonderful animation, great old-school characters and 360° video. You can discover the world around you, interact with nature and explore your surroundings admiring the breathtaking effects.

Conclusion

In this episode we travelled far far away, through some exceptional worlds. We experienced fashion extravaganza and music playing in distant light years from Earth. Our journey took us from underground Paris to primitive and futuristic worlds. We explored possible collisions and beautiful life-like scenes. We also protected our cultural heritage and discovered, in the woods, a magical way to go.

Thank you for your contributions. Keep them coming! Stay tuned and see you next time.

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

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.

Metropolis

Metropolis is an impressive demo by Alex Stockdale. It is a spheric vision of an urban world in destruction, or construction, depending on how you see it. It has a decadent aspect to it, the light is like the shadow of a dream and there is a hazy bluish shade in the atmosphere. This project is not only interactive and skilful but it is also a great example of what we can do with three.js.

The Climb of Alpe d’Huez

This demo by Andrew Mason, Troy Griggs and Lawrence Ostlere, is a 3D representation of the Tour de France. We cycle a trail following the iconic Alpe d’huez climb. Step by step we learn about its history, about details of the trickiest passings and challenges to get to the summit….wonderful work by the talented devs at the guardian!

Roobix

Roobix is a very fun game created by Marco del Valle on Play Canvas. It is a Rubik’s cube simulator with great animations. The rotations and puzzle combinations are extremely fun to play with. The cube is very reactive and the twinkling colours are part of the features that make this game unique.

Renault Espace

This demo is an interactive prototype of the New Renault Space by Guillaume Collinet. It is a webgl visualizer using real time 3d. You can go inside the car as if you were gonna take it out for a test drive. The interior and animations are life-like and will make you feel like you own it! You can visit Guillaume’s little workshop for more stylish experiences.

Omm Experience

Omm Experience shows us the fantastic world created by Jean Helfenstein. At first, there is an awesome lens flare effect with a halo of light glowing around a revolving asteroid. As the demo evolves, there are 3 chapters about creativity with great morphing and merging animations that transform and deform the object as if it was a ball of water.

Gridiron

Gridiron is “an exploration of generative compositions based on vertical structures fighting for space” developed by Kyle Phillips. We can see procedurally generated geometries that rain up and fill the screen. We can also modify their properties and play with the effects. It kind of reminds me of chemistry class.

Conclusion

In this edition of Three.js News we saw the talent behind daring and challenging experiences like the Tour de France, behind life-like animations and reactive games like Rubik’s cube. We floated through procedurally generated worlds and through spheric decadent visions of a city. We took a drive around our imagination and witnessed creativity in its abstract form.

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

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

Some of these new features include cool stuff with textures, material shading, shadow casting and practical exporting and tuning options. We will be writing posts to highlight each of these new features. Here is the ChangeLog with the features recently added to version Three.js Inspector 1.2.5, revised and improved.

ChangeLog

• massive cleanup of the scene capture code
• added range limit to material.opacity
• added ability to create a texture from material popup menu
• added export-in-console for material and geometry
• added upload support for texture
• added dragdrop support for texture
• added “about” tab
• added texture.sourceFile it is now possible to change texture
  • external texture needs to be on a CORS server
• added ‘visibility toggle’/’export to console’ and better css on treeview
• added an object is now relative to the selected parent
  • better controls over the scene tree when you build something
• added support for face material
• added texture.anisotropy
• added texture handling - repeat/offset/wrapS/wrapT
• added help button linking to three.js documentation
  • good for learning
• added object3d.castShadow / receiveShadow
• added material.shadding
• added left/right/top/bottom for ortho camera
• fixed Sprites crash + castShadow support
• added viewVertices + viewFaces in geometry menu
• added a Config.js and save autoRefresh
• added bounding sphere in geometry
• added linewidth, dashSize in material
• added auto refresh to on by default
• fixed bug in case of typedGeometry, PointCloud
• ‘export in console’ in object3d inspector popup menu
• implemented a tab for setting
• added autoRefresh setting to periodically refresh the inspector
• added the ‘no’ panels for a better visibility in the UI
  • simply show it with a object3d selected and without
• uniform live tuning for shader material
• implemented better number tuning with the mouse.
  • if shift is pressed, it goes 10 times faster
  • it meta is pressed, it goes 100 times faster
  • if shift+meta are pressed, it goes 1000 times faster

Do not hesitate to try it out. If you have any suggestions, feedback or questions please contact us.

Thanks for sharing this project :)

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

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.

Vortex Pair Warp

Generative net of cells from Turing pattern with gradient flow. It’s got twin vortex mouse and cool shaders. The demo is by Felix Woitzel.

Harvest

This demo is a 3d platform using three.js. Work in progress by James Milner. Based on the three.js PointerLockControl example.

BLCK4777

This demo is all about realtime audio visual animations with “good’ole 2D canvas”. Great project by Mathieu ‘p01’ Henri.

Sneakers

Sneakers is one of Travis Irby’s first experiments with webgl javascript framework three.js. It is interactive and it works on mobile too.

Particle Shader

Shiny shader based particles running with three.js and GLSL. Smooth and colourful demo by Philipp Wambach.

The Thing From Limbo

Cool 3d design and animation by Army Chiu for the WebDesignerPro. It’s got good use of shaders and shadows.

Conclusion

Okay guys, that’s all for this week. The demos featured here are all awesome projects that deserve to be recognised and shared. So don’t hesitate to check them out.

Stay tuned and see ya next time.

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.

Fluid Experiment

This demo is an experiment with Fluid particles in Webgl. It was developed by George Corney and it has great effects. It is both hypnotic and mesmerising.

Meander

Meander consists of randomly generated organic sand-storm clouds that dance around the screen. Its author, Anders Hoff shared this via Codedoodl a tool to create original code sketches.

Arrows

Like a painting in a canvas, this demo by Cabbibo is abstract and bursting with colour. The arrows wander around like small brush strokes in 3D. You can also find it at Codedoodl.

Signal barrel

Signal barrel is a demo created by Austin Mayer and inspired by a similar project by Beeple. It is a very cool tunnel like recreation on CodePen. You will want to follow it ‘til the end.

Fungal State

This evolutive demo was created by the talented Greg Tatum. It shows us a dynamic and realtime growing fungus shape. It is part of Greg’s Growth series.

Creepy Head

This demo is a creepy morph animation made with javascript. It was created by Sascha Sigl on CodePen. The way the mouth moves and the eyes follow you is kind of disturbing and spooky :)

Conclusion

Okay guys, that’s all the news for this week. We discovered some very artistic, abstract and fast paced projects. Some evolving and expanding, morphing and growing…and some freaking us out! In any case, they are all creative and fun.

Stay tuned and see you next time.

This post is to announce Three.js office hours. A practical and easy way to get answers to your questions. The principle is simple: you post your questions on twitter with #learningthreejs hashtag and we will try to answer them.

It is a direct channel for the three.js community. We told ourselves that since our blog is about learning three.js, our mission is to coach and guide willing learners. We are starting it as an experiment, we will try it out and see how it goes. We noticed that people out there have many queries. Whether you are working with it as part of a project, or experimenting with it as a hobby, three.js can be tricky. We have been receiving emails and notifications with kind words (thank you for that!)… and a lot of questions too :) You expect answers and we want to deliver them.

So the idea behind Three.js office hours is to help you get around your troublesome issues. If you are stuck and don’t understand something we encourage you to post your questions in the Twitter hashtag #learningthreejs. If you have sent us queries before and we have overlooked them (sorry for that), please don’t hesitate to ask about it on the hashtag.

We will then pick up questions that you guys posted and record a short video. We will answer them one by one, giving you detailed advice and useful pointers. In addition to that, we will write a blogpost about the content of the video, and publish it so you can come back to it whenever you want.

Thanks for participating in this experience with us. We are sure your questions will benefit the whole three.js community, so don’t be shy!

There is always something new to learn ;)

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!

Evolution

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.

Above The Clouds

Mesmerising journey above Earth, interactive experience created by Plus 360 Degrees where you travel around the world, floating with the clouds.

Auto Exposure

A wonderful sunny demo developed by Rasmus Karlsson. A scene with only a camera, you turn around the field, look up at the sky and see the light.

Share The Force

With this webgl experience made for Target you can explore Star War memories. If you are a fan you are gonna love it. Type in your favorite character to discover its universe.

Casino

Casino is an extremely accomplished and interactive experiment released by PlayCanvas. The quality of the rendering and the level of detail are excellent.

Small Island

This is a fun project by Christian Östman on Codepen.io. Small islands are randomly generated every time you load. You can ass trees, mountains and clouds to the scene.

Flux Core

Flux Core amplifies and concentrates energy. This powerful demo was created by otaviogood on ShaderToy. Be sure to try out the high-quality non-realtime renderer and use it for your shaders.

Puppetic

This charming character is a three.js sock puppet. This interactive demo is a creation of mediosyproyectos, they’ve got a cool website. You can make him move the way you choose and change his mood.

Conclusion

Okay guys, that’s all for this time. We hope you will play around with these demos and become a fan! You can even get inspire and try out your own :) Thanks for sharing and see you next time.

Stay tuned for more Three.js News.

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.

LOD terrain

LOD terrain is a great example of how to efficiently render a large terrain in 3D. You can check out Felix Palmer’s detailed tutorial on how to build it using webgl and three.js.

Spring

Beautiful webgl spring. Great light sets the natural mood on the landscape. You will feel like walking barefoot on the grass. Created by OutofSociety moxiecode.

Reshaping Excellence

This project is Sennheiser’s own webgl experience. It takes us to an apocalyptic and inspiring world. Descending monoliths carry us to a monument of sound. Done by Sehsucht, there is also a mobile version that you can try out.

Mapzen

This matrix-like demo is developed by Mapzen, an open source mapping lab. Tangram is a flexible mapping engine, designed for real-time rendering. It is a new wireframe way to look at your city with a wow effect.

Keep Out

Keep Out is a fun dungeon game for the brave. It was created by Little Workshop, company crafting fine experiences and games for webgl. There is a lot of action, monsters to kill, gold to loot, weapons to win and levels to clear!

Cycle Through The Night

This original Codepen demo was developed by Sascha Sigl. It’s a skeletal animation made in three.js. A modern dandy riding a high wheel bicycle towards a full grey moon gives it an intelligently comic atmosphere.

Conclusion

Ok guys, that’s all for this edition. There were some awesome demos these weeks and featuring them all in a post is a challenge. The ones we listed here are our personal favorites. We will be back soon with more Three.js News…stay tuned.