atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Category: three.js | Learning Three.js]]></title>
  <link href="http://learningthreejs.com/blog/categories/three-dot-js/atom.xml" rel="self"/>
  <link href="http://learningthreejs.com/"/>
  <updated>2015-09-01T13:36:39+01:00</updated>
  <id>http://learningthreejs.com/</id>
  <author>
    <name><![CDATA[Jerome Etienne]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Learning Three.js News #14: Creative demos of the week]]></title>
    <link href="http://learningthreejs.com/blog/2015/09/01/learning-three-dot-js-news-number-14-creative-demos-of-the-week/"/>
    <updated>2015-09-01T13:26:00+01:00</updated>
    <id>http://learningthreejs.com/blog/2015/09/01/learning-three-dot-js-news-number-14-creative-demos-of-the-week</id>
    <content type="html"><![CDATA[<p>Hello everybody!</p>

<p>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!</p>

<h3>Evolution</h3>

<p><img src="/data/2015-09-01-learning-three-dot-js-news-number-14-creative-demos-of-the-week/screenshots/evolution.jpg" alt="evolution" /></p>

<p>This breathtaking <a href="http://vrse.com/watch/?id=6">project</a> 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 <a href="https://twitter.com/vrse">Vrse</a>.</p>

<!-- more -->


<h3>Above The Clouds</h3>

<p><img src="/data/2015-09-01-learning-three-dot-js-news-number-14-creative-demos-of-the-week/screenshots/above_the_clouds.jpg" alt="above_the_clouds" /></p>

<p>Mesmerising <a href="http://earth.plus360degrees.com/">journey</a> above Earth, interactive experience created by <a href="https://twitter.com/plus360degrees">Plus 360 Degrees</a> where you travel around the world, floating with the clouds.</p>

<h3>Auto Exposure</h3>

<p><img src="/data/2015-09-01-learning-three-dot-js-news-number-14-creative-demos-of-the-week/screenshots/auto_exposure.jpg" alt="auto_exposure" /></p>

<p>A wonderful sunny <a href="https://c1.goote.ch/3e24b2dd50cf43069a1215f124520630.scene/">demo</a> developed by <a href="https://twitter.com/RasmusCoder">Rasmus Karlsson</a>. A scene with only a camera, you turn around the field, look up at the sky and see the light.</p>

<h3>Share The Force</h3>

<p><img src="/data/2015-09-01-learning-three-dot-js-news-number-14-creative-demos-of-the-week/screenshots/share_the_force.jpg" alt="share_the_force.jpg" /></p>

<p>With this webgl <a href="https://sharetheforce.target.com/">experience</a> made for <a href="https://twitter.com/Target">Target</a> 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.</p>

<h3>Casino</h3>

<p><img src="/data/2015-09-01-learning-three-dot-js-news-number-14-creative-demos-of-the-week/screenshots/share_the_force.jpg" alt="share_the_force.jpg" /></p>

<p><a href="http://playcanv.as/p/LpmXGUe6?overlay=false&amp;scrolling=true">Casino</a> is an extremely accomplished and interactive experiment released by <a href="https://twitter.com/playcanvas">PlayCanvas</a>. The quality of the rendering and the level of detail are excellent.</p>

<h3>Small Island</h3>

<p><img src="/data/2015-09-01-learning-three-dot-js-news-number-14-creative-demos-of-the-week/screenshots/share_the_force.jpg" alt="share_the_force.jpg" /></p>

<p>This is a fun <a href="http://codepen.io/chribbe/full/19f4a710bd771da41bcc79b814341b8d">project</a> by <a href="https://twitter.com/chribbe1">Christian Östman</a> on Codepen.io. Small islands are randomly generated every time you load. You can ass trees, mountains and clouds to the scene.</p>

<h3>Flux Core</h3>

<p><img src="/data/2015-09-01-learning-three-dot-js-news-number-14-creative-demos-of-the-week/screenshots/flux_core.jpg" alt="flux_core.jpg" /></p>

<p><a href="https://www.shadertoy.com/view/ltlSWf">Flux Core</a> amplifies and concentrates energy. This powerful demo was created by otaviogood on <a href="https://twitter.com/shadertoy">ShaderToy</a>. Be sure to try out the high-quality non-realtime renderer and use it for your shaders.</p>

<h3>Puppetic</h3>

<p><img src="/data/2015-09-01-learning-three-dot-js-news-number-14-creative-demos-of-the-week/screenshots/puppetic.jpg" alt="puppetic.jpg" /></p>

<p>This charming character is a three.js <a href="http://www.mediosyproyectos.com/puppetic/">sock puppet</a>. This interactive demo is a creation of <a href="https://twitter.com/wearemyp">mediosyproyectos</a>, they've got a cool <a href="http://www.mediosyproyectos.com/">website</a>. You can make him move the way you choose and change his mood.</p>

<h3>Conclusion</h3>

<p>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.</p>

<p>Stay tuned for more Three.js News.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Introducing Three.js Office Hours]]></title>
    <link href="http://learningthreejs.com/blog/2015/08/26/introducing-three-dot-js-office-hours-post-your-questions-on-number-learningthreejs/"/>
    <updated>2015-08-26T12:53:00+01:00</updated>
    <id>http://learningthreejs.com/blog/2015/08/26/introducing-three-dot-js-office-hours-post-your-questions-on-number-learningthreejs</id>
    <content type="html"><![CDATA[<p>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 <a href="https://twitter.com/search?q=%23learningthreejs">#learningthreejs</a>
hashtag and we will try to answer them.</p>

<iframe width="420" height="315" src="http://learningthreejs.com//www.youtube.com/embed/UTl8kjnFo08" frameborder="0" allowfullscreen></iframe>




<!-- more -->


<p>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.</p>

<p>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 <a href="https://twitter.com/search?q=%23learningthreejs">#learningthreejs</a>. 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.</p>

<p>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.</p>

<p>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!</p>

<p>There is always something new to learn ;)</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Learning Three.js News #13: Creative demos of the week]]></title>
    <link href="http://learningthreejs.com/blog/2015/08/25/learning-three-dot-js-news-number-13-creative-demos-of-the-week/"/>
    <updated>2015-08-25T13:30:00+01:00</updated>
    <id>http://learningthreejs.com/blog/2015/08/25/learning-three-dot-js-news-number-13-creative-demos-of-the-week</id>
    <content type="html"><![CDATA[<p>Hello everybody</p>

<p>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!</p>

<h3>Bjork's website</h3>

<p><img src="/data/2015-08-25-learning-three-dot-js-news-number-13-creative-demos-of-the-week/screenshots/bjork.jpg" alt="bjork" /></p>

<p>Beause arty design is also a three.js matter, here is a beautiful <a href="http://bjork.com/">demo</a> created by Vince Mckelvie from <a href="https://twitter.com/mmparisdotcom">M/M</a> design agency in Paris. It's singer Bjork's new website.</p>

<!-- more -->


<h3>Fluid Experiment</h3>

<p><img src="/data/2015-08-25-learning-three-dot-js-news-number-13-creative-demos-of-the-week/screenshots/fluid_experiment.jpg" alt="fluid_experiment" /></p>

<p>This <a href="http://haxiomic.github.io/GPU-Fluid-Experiments/html5/?q=UltraHigh">demo</a> is an experiment with Fluid particles in Webgl. It was developed by <a href="https://twitter.com/Haxiomic">George Corney</a> and it has great effects. It is both hypnotic and mesmerising.</p>

<h3>Meander</h3>

<p><img src="/data/2015-08-25-learning-three-dot-js-news-number-13-creative-demos-of-the-week/screenshots/meander.jpg" alt="meander" /></p>

<p><a href="http://codedoodl.es/_/inconvergent/meander">Meander</a> consists of randomly generated organic sand-storm clouds that dance around the screen. Its author, <a href="https://twitter.com/inconvergent">Anders Hoff</a> shared this via <a href="http://codedoodl.es/">Codedoodl</a> a tool to create original code sketches.</p>

<h3>Arrows</h3>

<p><img src="/data/2015-08-25-learning-three-dot-js-news-number-13-creative-demos-of-the-week/screenshots/arrows.jpg" alt="arrows" /></p>

<p>Like a painting in a canvas, this <a href="http://codedoodl.es/_/cabbibo/arrows">demo</a> by <a href="https://twitter.com/Cabbibo">Cabbibo</a> is abstract and bursting with colour. The arrows wander around like small brush strokes in 3D. You can also find it at <a href="http://codedoodl.es/">Codedoodl</a>.</p>

<h3>Signal barrel</h3>

<p><img src="/data/2015-08-25-learning-three-dot-js-news-number-13-creative-demos-of-the-week/screenshots/signal_barrel.jpg" alt="signal_barrel" /></p>

<p><a href="http://codepen.io/austinmayer/full/oXRGez/">Signal barrel</a> is a demo created by <a href="https://twitter.com/amayer_">Austin Mayer</a> and inspired by a similar project by <a href="https://twitter.com/beeple">Beeple</a>. It is a very cool tunnel like recreation on <a href="http://codepen.io/">CodePen</a>. You will want to follow it 'til the end.</p>

<h3>Fungal State</h3>

<p><img src="/data/2015-08-25-learning-three-dot-js-news-number-13-creative-demos-of-the-week/screenshots/fungal_state.jpg" alt="fungal_state" /></p>

<p>This evolutive <a href="http://gregtatum.com/poems/growth/#/2-fungus">demo</a> was created by the talented <a href="https://twitter.com/TatumCreative">Greg Tatum</a>. It shows us a dynamic and realtime growing fungus shape. It is part of Greg's <a href="http://gregtatum.com/blog/">Growth series</a>.</p>

<h3>Creepy Head</h3>

<p><img src="/data/2015-08-25-learning-three-dot-js-news-number-13-creative-demos-of-the-week/screenshots/creepy_head.jpg" alt="creepy_head" /></p>

<p>This <a href="http://codepen.io/SaschaSigl/full/MwMOag/">demo</a> is a creepy morph animation made with javascript. It was created by <a href="https://twitter.com/SaschaSigl">Sascha Sigl</a> on <a href="http://codepen.io/">CodePen</a>. The way the mouth moves and the eyes follow you is kind of disturbing and spooky :)</p>

<h3>Conclusion</h3>

<p>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.</p>

<p>Stay tuned and see you next time.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Learning Three.js News #12: Creative demos of the week]]></title>
    <link href="http://learningthreejs.com/blog/2015/08/17/learning-three-dot-js-news-number-12-creative-demos-of-the-week/"/>
    <updated>2015-08-17T13:07:00+01:00</updated>
    <id>http://learningthreejs.com/blog/2015/08/17/learning-three-dot-js-news-number-12-creative-demos-of-the-week</id>
    <content type="html"><![CDATA[<p>Hello everybody,</p>

<p>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 :)</p>

<h3>Icosahedron Snake</h3>

<p><img src="/data/2015-08-17-learning-three-dot-js-news-number-12-creative-demos-of-the-week/screenshots/icosahedron_snake.jpg" alt="screen shot 2015-08-10 at 10 43 09" /></p>

<p>Fun and twisty three.js <a href="http://codepen.io/tdhooper/full/ZGPOQJ/">demo</a> by <a href="https://twitter.com/tdhooper">Thomas Hooper</a> on Codepen.io. It's a spiral snake making its way in a funky pink background.</p>

<!-- more -->


<h3>Vortex Pair Warp</h3>

<p><img src="/data/2015-08-17-learning-three-dot-js-news-number-12-creative-demos-of-the-week/screenshots/vortex_pair_warp.jpg" alt="screen shot 2015-08-10 at 10 51 34" /></p>

<p>Generative net of cells from Turing pattern with gradient flow. It's got twin vortex mouse and cool shaders. The <a href="http://cake23.de/vortex-pair-warp.html">demo</a> is by <a href="https://twitter.com/flexi23">Felix Woitzel</a>.</p>

<h3>Harvest</h3>

<p><img src="/data/2015-08-17-learning-three-dot-js-news-number-12-creative-demos-of-the-week/screenshots/harvest.jpg" alt="screen shot 2015-08-14 at 14 22 35" /></p>

<p>This <a href="http://www.loxodrome.io/Harvest/index.html">demo</a> is a 3d platform using three.js. Work in progress by <a href="https://twitter.com/JamesLMilner">James Milner</a>. Based on the three.js PointerLockControl example.</p>

<h3>BLCK4777</h3>

<p><img src="/data/2015-08-17-learning-three-dot-js-news-number-12-creative-demos-of-the-week/screenshots/blck4777.jpg" alt="screen shot 2015-08-14 at 14 47 46" /></p>

<p>This <a href="http://www.p01.org/releases/BLCK4777/BLCK4777_safe.htm">demo</a> is all about realtime audio visual animations with "good'ole 2D canvas". Great project by <a href="https://twitter.com/p01">Mathieu 'p01' Henri</a>.</p>

<h3>Sneakers</h3>

<p><img src="/data/2015-08-17-learning-three-dot-js-news-number-12-creative-demos-of-the-week/screenshots/sneakers.jpg" alt="screen shot 2015-08-12 at 11 58 53" /></p>

<p><a href="http://travisirby.net/three-js-3d-webgl-experiment/">Sneakers</a> is one of <a href="https://twitter.com/travisirby">Travis Irby's</a> first experiments with webgl javascript framework three.js. It is interactive and it works on mobile too.</p>

<h3>Particle Shader</h3>

<p><img src="/data/2015-08-17-learning-three-dot-js-news-number-12-creative-demos-of-the-week/screenshots/shader_particles.jpg" alt="screen shot 2015-08-13 at 11 00 43" /></p>

<p>Shiny shader based <a href="http://pwambach.github.io/threejs-particle-shader/">particles</a> running with three.js and GLSL. Smooth and colourful demo by <a href="https://twitter.com/phil_osophie">Philipp Wambach</a>.</p>

<h3>The Thing From Limbo</h3>

<p><img src="/data/2015-08-17-learning-three-dot-js-news-number-12-creative-demos-of-the-week/screenshots/the_thing_from_limbo.jpg" alt="screen shot 2015-08-13 at 11 09 20" /></p>

<p>Cool 3d <a href="http://thewebdesignerpro.com/glslshader.html">design</a> and animation by <a href="https://twitter.com/armychiu">Army Chiu</a> for the <a href="http://thewebdesignerpro.com/">WebDesignerPro</a>. It's got good use of shaders and shadows.</p>

<h3>Conclusion</h3>

<p>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.</p>

<p>Stay tuned and see ya next time.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Three.js Inspector in Chrome Devtools: v1.2.5 Released]]></title>
    <link href="http://learningthreejs.com/blog/2015/08/13/three-dot-js-inspector-in-chrome-devtools-v1-dot-2-5-released/"/>
    <updated>2015-08-13T14:33:00+01:00</updated>
    <id>http://learningthreejs.com/blog/2015/08/13/three-dot-js-inspector-in-chrome-devtools-v1-dot-2-5-released</id>
    <content type="html"><![CDATA[<p>Hey everybody,</p>

<p>We recently <a href="http://learningthreejs.com/blog/2015/07/30/three-dot-js-inspector-in-chrome-devtools/">announced three.js inspector</a>. This chrome devtools extension allows you to inspect the three.js within your page, directly from devtools.</p>

<p>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 <a href="https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi">chrome web store</a> and give it a try. It is definitely fun to work on :) We had some long week ends with sleepless nights, and now the <a href="https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi">Three.js Inspector 1.2.5</a> is released !</p>

<h3><a href="https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi">Install THREE.js Inspector</a></h3>

<iframe width="420" height="315" src="http://learningthreejs.com//www.youtube.com/embed/q-c0i0nQn5M" frameborder="0" allowfullscreen></iframe>




<!-- more -->


<p>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 <a href="https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi">Three.js Inspector 1.2.5</a>, revised and improved.</p>

<h3>ChangeLog</h3>

<ul>
<li>massive cleanup of the scene capture code</li>
<li>added range limit to material.opacity</li>
<li>added ability to create a texture from material popup menu</li>
<li>added export-in-console for material and geometry</li>
<li>added upload support for texture</li>
<li>added dragdrop support for texture</li>
<li>added "about" tab</li>
<li>added texture.sourceFile it is now possible to change texture

<ul>
<li>external texture needs to be on a CORS server</li>
</ul>
</li>
<li>added 'visibility toggle'/'export to console' and better css on treeview</li>
<li>added an object is now relative to the selected parent

<ul>
<li>better controls over the scene tree when you build something</li>
</ul>
</li>
<li>added support for face material</li>
<li>added texture.anisotropy</li>
<li>added texture handling - repeat/offset/wrapS/wrapT</li>
<li>added help button linking to three.js documentation

<ul>
<li>good for learning</li>
</ul>
</li>
<li>added object3d.castShadow / receiveShadow</li>
<li>added material.shadding</li>
<li>added left/right/top/bottom for ortho camera</li>
<li>fixed Sprites crash + castShadow support</li>
<li>added viewVertices + viewFaces in geometry menu</li>
<li>added a Config.js and save autoRefresh</li>
<li>added bounding sphere in geometry</li>
<li>added linewidth, dashSize in material</li>
<li>added auto refresh to on by default</li>
<li>fixed bug in case of typedGeometry, PointCloud</li>
<li>'export in console' in object3d inspector popup menu</li>
<li>implemented a tab for setting</li>
<li>added autoRefresh setting to periodically refresh the inspector</li>
<li>added the 'no' panels for a better visibility in the UI

<ul>
<li>simply show it with a object3d selected and without</li>
</ul>
</li>
<li>uniform live tuning for shader material</li>
<li>implemented better number tuning with the mouse.

<ul>
<li>if shift is pressed, it goes 10 times faster</li>
<li>it meta is pressed, it goes 100 times faster</li>
<li>if shift+meta are pressed, it goes 1000 times faster</li>
</ul>
</li>
</ul>


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

<p>Thanks for sharing this project :)</p>
]]></content>
  </entry>
  
</feed>