<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Three-Js on Ryan Orban</title><link>https://ryanorban.com/categories/three-js/</link><description>Recent content in Three-Js on Ryan Orban</description><generator>Hugo</generator><language>en-us</language><managingEditor>me@ryanorban.com (Ryan Orban)</managingEditor><webMaster>me@ryanorban.com (Ryan Orban)</webMaster><copyright>Ryan Orban</copyright><lastBuildDate>Tue, 12 Feb 2013 00:00:00 +0000</lastBuildDate><atom:link href="https://ryanorban.com/categories/three-js/index.xml" rel="self" type="application/rss+xml"/><item><title>Collada Animation Viewer</title><link>https://ryanorban.com/notes/collada-animation-viewer/</link><pubDate>Tue, 12 Feb 2013 00:00:00 +0000</pubDate><author>me@ryanorban.com (Ryan Orban)</author><guid>https://ryanorban.com/notes/collada-animation-viewer/</guid><description>&lt;h3 id="summary" class="scroll-mt-8 group"&gt;
 Summary
 
 &lt;a href="#summary"
 class="no-underline hidden opacity-50 hover:opacity-100 !text-inherit group-hover:inline-block"
 aria-hidden="true" title="Link to this heading" tabindex="-1"&gt;
 &lt;svg
 xmlns="http://www.w3.org/2000/svg"
 width="16"
 height="16"
 fill="none"
 stroke="currentColor"
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 class="lucide lucide-link w-4 h-4 block"
 viewBox="0 0 24 24"
&gt;
 &lt;path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /&gt;
 &lt;path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /&gt;
&lt;/svg&gt;

 &lt;/a&gt;
 
&lt;/h3&gt;
&lt;p&gt;This ETH Zurich experiment demonstrated loading and animating COLLADA (&lt;code&gt;.dae&lt;/code&gt;) files in the browser using Three.js. COLLADA is an XML-based 3D asset interchange format developed by Sony, widely supported by 3D modeling tools like Blender, Maya, and 3ds Max — making it a bridge between professional 3D content creation and web rendering.&lt;/p&gt;</description></item><item><title>Getting Started with Three.js</title><link>https://ryanorban.com/notes/getting-started-threejs/</link><pubDate>Tue, 12 Feb 2013 00:00:00 +0000</pubDate><author>me@ryanorban.com (Ryan Orban)</author><guid>https://ryanorban.com/notes/getting-started-threejs/</guid><description>&lt;h3 id="summary" class="scroll-mt-8 group"&gt;
 Summary
 
 &lt;a href="#summary"
 class="no-underline hidden opacity-50 hover:opacity-100 !text-inherit group-hover:inline-block"
 aria-hidden="true" title="Link to this heading" tabindex="-1"&gt;
 &lt;svg
 xmlns="http://www.w3.org/2000/svg"
 width="16"
 height="16"
 fill="none"
 stroke="currentColor"
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 class="lucide lucide-link w-4 h-4 block"
 viewBox="0 0 24 24"
&gt;
 &lt;path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /&gt;
 &lt;path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /&gt;
&lt;/svg&gt;

 &lt;/a&gt;
 
&lt;/h3&gt;
&lt;p&gt;Paul Lewis (Aerotwist) published this tutorial as one of the most widely shared introductions to Three.js — the JavaScript library that abstracts WebGL into a usable API for 3D graphics in the browser. The saved content shows the foundational boilerplate: setting up scene dimensions, camera attributes, creating a &lt;code&gt;WebGLRenderer&lt;/code&gt;, &lt;code&gt;PerspectiveCamera&lt;/code&gt;, and &lt;code&gt;Scene&lt;/code&gt;, positioning the camera back from origin, and attaching the renderer&amp;rsquo;s DOM element to the page.&lt;/p&gt;</description></item><item><title>WebCamMesh — 3D Webcam Visualization</title><link>https://ryanorban.com/notes/webcammesh-webgl/</link><pubDate>Sat, 09 Feb 2013 00:00:00 +0000</pubDate><author>me@ryanorban.com (Ryan Orban)</author><guid>https://ryanorban.com/notes/webcammesh-webgl/</guid><description>&lt;p&gt;&lt;img
 src="https://ryanorban.com/images/notes/webcammesh-webgl.png"
 alt="WebCamMesh — 3D Webcam Visualization" class="note-hero-img"
 loading="lazy"
/&gt;
&lt;/p&gt;
&lt;h3 id="summary" class="scroll-mt-8 group"&gt;
 Summary
 
 &lt;a href="#summary"
 class="no-underline hidden opacity-50 hover:opacity-100 !text-inherit group-hover:inline-block"
 aria-hidden="true" title="Link to this heading" tabindex="-1"&gt;
 &lt;svg
 xmlns="http://www.w3.org/2000/svg"
 width="16"
 height="16"
 fill="none"
 stroke="currentColor"
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 class="lucide lucide-link w-4 h-4 block"
 viewBox="0 0 24 24"
&gt;
 &lt;path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /&gt;
 &lt;path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /&gt;
&lt;/svg&gt;

 &lt;/a&gt;
 
&lt;/h3&gt;
&lt;p&gt;Airtight Interactive built WebCamMesh to demonstrate combining the browser&amp;rsquo;s getUserMedia webcam API with WebGL rendering via Three.js. The content field notes this was shared with a @stamen tag — Stamen Design, the data visualization studio, suggesting the visualization context.&lt;/p&gt;</description></item></channel></rss>