Skip to content

Commit

Permalink
more work on learningthreejs news
Browse files Browse the repository at this point in the history
  • Loading branch information
jerome etienne committed May 27, 2015
1 parent 21e87dc commit a9cef74
Show file tree
Hide file tree
Showing 9 changed files with 64 additions and 6 deletions.
Expand Up @@ -4,28 +4,29 @@ title: "See-through Effect for Augmented Reality On Your Phone"
date: 2015-05-10 19:25
comments: true
categories: [AR, three.js]
published: false
published: true
---

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 but this see-throught is the base of Augmented
Reality in a phone.
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 :)


<!-- more -->
<a href='http://jeromeetienne.github.io/demo.seethroughphone' target='_blank'><input type="button" value='Try Demo Now' /></a>

<iframe width="420" height="315" src="//www.youtube.com/embed/q7uRkul5prI" frameborder="0" allowfullscreen></iframe>


<!-- more -->

## How It Is Coded
Webcams are great for interactivity.
We will read the webcam thanks to [WebRTC](http://www.webrtc.org/),
Expand Down Expand Up @@ -66,7 +67,9 @@ So it must be robust to window resize and orientation change.

## Source

Here is the full source of the effect. Enjoy!
Here is the full source of the effect.
It is in a [github repo](https://github.com/jeromeetienne/demo.seethroughphone).
Enjoy!


```html
Expand Down
@@ -0,0 +1,55 @@
---
layout: post
title: "LearningThree.js News: Stay Tuned with Creative 3D Demos"
date: 2015-05-27 15:53
comments: true
categories: [news]
published: false
---

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

<iframe width="420" height="315" src="//www.youtube.com/embed/DgPv6IIVDFQ" frameborder="0" allowfullscreen></iframe>

<!-- more -->

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
![screen shot 2015-05-26 at 10 42 57](/data/2015-05-27-learningthree-dot-js-news-stay-tuned-with-creative-3d-demos/inconvergent_waves.png)
[Inconvergent waves](http://inconvergent.net/waves/) is a nicely done demo by [Anders Hoff](https://twitter.com/inconvergent). 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]( http://inconvergent.net/) to check out the developing process.

## Interactive WebGL globes
![screen shot 2015-05-26 at 10 57 30](/data/2015-05-27-learningthree-dot-js-news-stay-tuned-with-creative-3d-demos/interactive_webgl_globe.png)
[Interactive WebGL](http://projects.delimited.io/webgl-globes/example_4_interactive_globe.html) globes is a great way to improve your geography skills! This very educational and fun demo is a creation of [Steve Hall](https://twitter.com/delimitedtech). You mouseover the countries that you want and turn around by clicking on the interactive globe. Don't hesitate to read Steve's [blogpost](http://www.delimited.io/blog/2015/5/16/interactive-webgl-globes-with-threejs-and-d3) to know more about his implementation of D3 and Three.js.

## Spiral Circle
![screen shot 2015-05-26 at 10 58 52](/data/2015-05-27-learningthree-dot-js-news-stay-tuned-with-creative-3d-demos/spiral_circle.png)

[Spiral Circle](http://projects.delimited.io/subunit/demos/spiral-circle-v2.html) is another cool demo created by Steve Hall. It is based on [mbostock’s](http://bl.ocks.org/mbostock) [example](http://bl.ocks.org/mbostock/2472e84f78fd03df443f). 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
![screen shot 2015-05-26 at 11 00 53](/data/2015-05-27-learningthree-dot-js-news-stay-tuned-with-creative-3d-demos/hatsune_miku_threejs.png)

[Hatsune Miku](http://en.wikipedia.org/wiki/Hatsune_Miku) is a Three.js example [demo](http://takahirox.github.io/three.js/examples/webgl_loader_mmd.html) done by [takahiro](https://twitter.com/superhoge). 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](https://www.youtube.com/watch?v=YSyWtESoeOc)...yeah i'm not kidding! We are even trying to bring her to life in [AR](https://twitter.com/LearningThreejs/status/600740523574439937).

## Race Against Oblivion
![screen shot 2015-05-26 at 10 59 58](/data/2015-05-27-learningthree-dot-js-news-stay-tuned-with-creative-3d-demos/race_against_oblivion.png)

Race against oblivion or [Timeshift](http://www.timeshift165.com/game) is an original game made by [Utranoir](http://www.ultranoir.com/en/#!/home/). 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
![screen shot 2015-05-26 at 11 03 05](/data/2015-05-27-learningthree-dot-js-news-stay-tuned-with-creative-3d-demos/a_particle_dream.png)
A Particle dream is a [demo]( https://www.chromeexperiments.com/experiment/particle-dream) created by [Nop Jiarathanakul](http://www.iamnop.com/). 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](https://www.leapmotion.com/) in this demo.

## Our Galactic Neighbourhood
![screen shot 2015-05-26 at 11 02 06](/data/2015-05-27-learningthree-dot-js-news-stay-tuned-with-creative-3d-demos/our_galactic_neighborhood.png)

[Our Galactic Neighbourhood](http://charliehoey.com/threejs-demos/our-galactic-neighborhood.html)
is another very educational demo. Developed by creative coder [Charlie Hoey](http://charliehoey.com/) 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.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a9cef74

Please sign in to comment.