topical media & game development

talk show tell print

mobile-query-three-vendor-threex-docs-THREEx.GeometryUtils.htm / htm



  <!DOCTYPE html>  <html> <head>   <title>THREEx.GeometryUtils.js</title>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <link rel="stylesheet" media="all" href="docco.css" /> </head> <body>   <div id="container">     <div id="background"></div>            <div id="jump_to">         Jump To &hellip;         <div id="jump_wrapper">           <div id="jump_page">                                           <a class="source" href="THREEx.CelShader.html">                 THREEx.CelShader.js               </a>                                           <a class="source" href="THREEx.DeviceOrientationState.html">                 THREEx.DeviceOrientationState.js               </a>                                           <a class="source" href="THREEx.FullScreen.html">                 THREEx.FullScreen.js               </a>                                           <a class="source" href="THREEx.GeometryUtils.html">                 THREEx.GeometryUtils.js               </a>                                           <a class="source" href="THREEx.GeometryWobble.html">                 THREEx.GeometryWobble.js               </a>                                           <a class="source" href="THREEx.KeyboardState.html">                 THREEx.KeyboardState.js               </a>                                           <a class="source" href="THREEx.LogoTurtle.html">                 THREEx.LogoTurtle.js               </a>                                           <a class="source" href="THREEx.PlasmaShader.html">                 THREEx.PlasmaShader.js               </a>                                           <a class="source" href="THREEx.SkyMap.html">                 THREEx.SkyMap.js               </a>                                           <a class="source" href="THREEx.WindowResize.html">                 THREEx.WindowResize.js               </a>                                           <a class="source" href="THREEx.glCapability.html">                 THREEx.glCapability.js               </a>                                           <a class="source" href="THREEx.requestAnimationFrame.html">                 THREEx.requestAnimationFrame.js               </a>                                           <a class="source" href="THREEx.screenshot.html">                 THREEx.screenshot.js               </a>                                           <a class="source" href="threex.embedded.html">                 threex.embedded.js               </a>                        </div>         </div>       </div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               THREEx.GeometryUtils.js             </h1>           </th>           <th class="code">           </th>         </tr>       </thead>       <tbody>                               <tr id="section-1">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-1">&#182;</a>               </div>               <p>This THREEx helper provide various basic functions for <code>THREE.Geometry</code>.
  It is able to scale, translate, center a geometry. Other functions may be
  added soon.
  The API is chained for convenience.</p>
  
  <h2>Scale</h2>
  
  <p>To make the geometry twice larger in <code>y</code></p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <p><code>
    var scale = new THREE.Vector3(1,2,1);
    THREEx.GeometryUtils.scale(geometry, scale);
  </code></p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-3">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-3">&#182;</a>               </div>               <h2>Translate</h2>
  
  <p>To make the geometry move 100 further in <code>x</code></p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-4">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-4">&#182;</a>               </div>               <p><code>
    var translation = new THREE.Vector3(100,0,0);
    THREEx.GeometryUtils.translate(geometry, translation);
  </code></p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-5">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-5">&#182;</a>               </div>               <h2>Center</h2>
  
  <p>To center the geometry on its middle point</p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-6">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-6">&#182;</a>               </div>               <p><code>
    THREEx.GeometryUtils.center(geometry);
  </code></p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-7">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-7">&#182;</a>               </div>               <h2>middlePoint</h2>
  
  <p>To compute the middle point of a geometry</p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-8">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-8">&#182;</a>               </div>               <p><code>
    THREEx.GeometryUtils.middlePoint(geometry);
  </code></p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-9">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-9">&#182;</a>               </div>               <h1>Code</h1>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-10">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-10">&#182;</a>               </div>                            </td>             <td class="code">               <div class="highlight"><pre><span class="cm">
@namespace

  </span>
  <span class="kd">var</span> <span class="nx">THREEx</span>                <span class="o">=</span> <span class="nx">THREEx</span>                 <span class="o">||</span> <span class="p">{};</span>
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">GeometryUtils</span>        <span class="o">=</span> <span class="nx">THREEx</span><span class="p">.</span><span class="nx">GeometryUtils</span>        <span class="o">||</span> <span class="p">{};</span></pre></div>             </td>           </tr>                               <tr id="section-11">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-11">&#182;</a>               </div>               <p>TODO
  chained API
  possibility a matrix to reduce computation ?</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="cm">
</span> <span class="cm"> * Change the scale of a geometry</span> <span class="cm"> * </span> <span class="cm"> * @params {THREE.Geometry} geometry the geometry to compute on</span> <span class="cm"> * @params {THREE.Vector3} scale the middlepoint of the geometry</span> <span class="cm">

  </span>
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">GeometryUtils</span><span class="p">.</span><span class="nx">scale</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">geometry</span><span class="p">,</span> <span class="nx">scale</span><span class="p">)</span>
  <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-12">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-12">&#182;</a>               </div>               <p>change all geometry.vertices</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">vertices</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                  <span class="kd">var</span> <span class="nx">vertex</span>        <span class="o">=</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">vertices</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                  <span class="nx">vertex</span><span class="p">.</span><span class="nx">position</span><span class="p">.</span><span class="nx">multiplySelf</span><span class="p">(</span><span class="nx">scale</span><span class="p">);</span> 
          <span class="p">}</span>
          </pre></div>             </td>           </tr>                               <tr id="section-13">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-13">&#182;</a>               </div>               <p>mark the vertices as dirty</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="nx">geometry</span><span class="p">.</span><span class="nx">__dirtyVertices</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-14">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-14">&#182;</a>               </div>               <p>return this, to get chained API    </p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">GeometryUtils</span><span class="p">.</span><span class="nx">translate</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">geometry</span><span class="p">,</span> <span class="nx">delta</span><span class="p">)</span>
  <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-15">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-15">&#182;</a>               </div>               <p>change all geometry.vertices</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">vertices</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                  <span class="kd">var</span> <span class="nx">vertex</span>        <span class="o">=</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">vertices</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                  <span class="nx">vertex</span><span class="p">.</span><span class="nx">position</span><span class="p">.</span><span class="nx">addSelf</span><span class="p">(</span><span class="nx">delta</span><span class="p">);</span> 
          <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-16">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-16">&#182;</a>               </div>               <p>mark the vertices as dirty</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="nx">geometry</span><span class="p">.</span><span class="nx">__dirtyVertices</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-17">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-17">&#182;</a>               </div>               <p>return this, to get chained API    </p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="cm">
</span> <span class="cm"> * Compute the &quot;middlePoint&quot; aka the point at the middle of the boundingBox</span> <span class="cm"> * </span> <span class="cm"> * @params {THREE.Geometry} the geometry to compute on</span> <span class="cm"> *
returns: {THREE.Vector3} the middlepoint of the geometry <span class="cm">

  </span>
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">GeometryUtils</span><span class="p">.</span><span class="nx">middlePoint</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">geometry</span><span class="p">)</span>
  <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-18">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-18">&#182;</a>               </div>               <p>compute bounding box</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="nx">geometry</span><span class="p">.</span><span class="nx">computeBoundingBox</span><span class="p">();</span></pre></div>             </td>           </tr>                               <tr id="section-19">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-19">&#182;</a>               </div>               <p>compute middle</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="kd">var</span> <span class="nx">middle</span>        <span class="o">=</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Vector3</span><span class="p">()</span>
          <span class="nx">middle</span><span class="p">.</span><span class="nx">x</span>        <span class="o">=</span> <span class="p">(</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">boundingBox</span><span class="p">.</span><span class="nx">x</span><span class="p">[</span> <span class="mi">1</span> <span class="p">]</span> <span class="o">+</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">boundingBox</span><span class="p">.</span><span class="nx">x</span><span class="p">[</span> <span class="mi">0</span> <span class="p">]</span> <span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
          <span class="nx">middle</span><span class="p">.</span><span class="nx">y</span>        <span class="o">=</span> <span class="p">(</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">boundingBox</span><span class="p">.</span><span class="nx">y</span><span class="p">[</span> <span class="mi">1</span> <span class="p">]</span> <span class="o">+</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">boundingBox</span><span class="p">.</span><span class="nx">y</span><span class="p">[</span> <span class="mi">0</span> <span class="p">]</span> <span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
          <span class="nx">middle</span><span class="p">.</span><span class="nx">z</span>        <span class="o">=</span> <span class="p">(</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">boundingBox</span><span class="p">.</span><span class="nx">z</span><span class="p">[</span> <span class="mi">1</span> <span class="p">]</span> <span class="o">+</span> <span class="nx">geometry</span><span class="p">.</span><span class="nx">boundingBox</span><span class="p">.</span><span class="nx">z</span><span class="p">[</span> <span class="mi">0</span> <span class="p">]</span> <span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-20">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-20">&#182;</a>               </div>               <p>return the just computed middle</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="k">return</span> <span class="nx">middle</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="cm">
</span> <span class="cm"> * Center the geometry on its middlepoint</span> <span class="cm">

  </span>
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">GeometryUtils</span><span class="p">.</span><span class="nx">center</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">geometry</span><span class="p">,</span> <span class="nx">noX</span><span class="p">,</span> <span class="nx">noY</span><span class="p">,</span> <span class="nx">noZ</span><span class="p">)</span>
  <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-21">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-21">&#182;</a>               </div>               <p>compute delta</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="kd">var</span> <span class="nx">delta</span>        <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">middlePoint</span><span class="p">(</span><span class="nx">geometry</span><span class="p">).</span><span class="nx">negate</span><span class="p">();</span>
          <span class="k">if</span><span class="p">(</span> <span class="nx">noX</span> <span class="p">)</span>        <span class="nx">delta</span><span class="p">.</span><span class="nx">x</span>        <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
          <span class="k">if</span><span class="p">(</span> <span class="nx">noY</span> <span class="p">)</span>        <span class="nx">delta</span><span class="p">.</span><span class="nx">y</span>        <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
          <span class="k">if</span><span class="p">(</span> <span class="nx">noZ</span> <span class="p">)</span>        <span class="nx">delta</span><span class="p">.</span><span class="nx">z</span>        <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
  
          <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">translate</span><span class="p">(</span><span class="nx">geometry</span><span class="p">,</span> <span class="nx">delta</span><span class="p">)</span>
  <span class="p">}</span>
  
  <span class="cm">
</span> <span class="cm"> * Initial version of attachement</span> <span class="cm"> * - geometry2 is the one which is moved</span> <span class="cm"> * - TODO make something more flexible... especially on the attachement config</span> <span class="cm">

  </span>
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">GeometryUtils</span><span class="p">.</span><span class="nx">attachRightLeft</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">geometry1</span><span class="p">,</span> <span class="nx">geometry2</span><span class="p">,</span> <span class="nx">delta</span><span class="p">)</span>
  <span class="p">{</span>
          <span class="k">if</span><span class="p">(</span> <span class="nx">delta</span> <span class="o">===</span> <span class="kc">undefined</span> <span class="p">)</span>        <span class="nx">delta</span>        <span class="o">=</span> <span class="mi">0</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-22">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-22">&#182;</a>               </div>               <p>compute bounding box</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="nx">geometry1</span><span class="p">.</span><span class="nx">computeBoundingBox</span><span class="p">();</span>
          <span class="nx">geometry2</span><span class="p">.</span><span class="nx">computeBoundingBox</span><span class="p">();</span>
          
          <span class="kd">var</span> <span class="nx">maxX1</span>        <span class="o">=</span> <span class="nx">geometry1</span><span class="p">.</span><span class="nx">boundingBox</span><span class="p">.</span><span class="nx">x</span><span class="p">[</span> <span class="mi">1</span> <span class="p">]</span>
          <span class="kd">var</span> <span class="nx">minX2</span>        <span class="o">=</span> <span class="nx">geometry2</span><span class="p">.</span><span class="nx">boundingBox</span><span class="p">.</span><span class="nx">x</span><span class="p">[</span> <span class="mi">0</span> <span class="p">];</span>
  
          <span class="kd">var</span> <span class="nx">vector</span>        <span class="o">=</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Vector3</span><span class="p">();</span>
          <span class="nx">vector</span><span class="p">.</span><span class="nx">x</span>        <span class="o">=</span> <span class="nx">maxX1</span><span class="o">+</span> <span class="p">(</span><span class="o">-</span><span class="nx">minX2</span><span class="p">)</span> <span class="o">+</span> <span class="nx">delta</span><span class="p">;</span>
  
          <span class="k">this</span><span class="p">.</span><span class="nx">translate</span><span class="p">(</span><span class="nx">geometry2</span><span class="p">,</span> <span class="nx">vector</span><span class="p">);</span>
          
          <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">}</span>
  
  </pre></div>             </td>           </tr>                </tbody>     </table>   </div> </body> </html> 


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.