threex

Version:

Game Extensions for three.js http://www.threejsgames.com/extensions/

40 lines (28 loc) • 9.79 kB

HTML

<!DOCTYPE html> <html> <head> <title>threex.domevent.object3d.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 … <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.chromeWebStoreInstall.html"> threex.chromeWebStoreInstall.js </a> <a class="source" href="threex.domevent.html"> threex.domevent.js </a> <a class="source" href="threex.domevent.object3d.html"> threex.domevent.object3d.js </a> <a class="source" href="threex.embedded.html"> threex.embedded.js </a> <a class="source" href="threex.sparks.html"> threex.sparks.js </a> <a class="source" href="threex.sparksPlugins.html"> threex.sparksPlugins.js </a> <a class="source" href="threex.texturePoolBall.html"> threex.texturePoolBall.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> threex.domevent.object3d.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">¶</a> </div> <p>This THREEx helper makes it even easier to use mouse events. It just a thin wrapper to include threex.mouseevents.js features directly in THREE.Object3D. It provide a sweat clean API. All the work is done in threex.mouseevents.js tho.</p> <h1>include it in your page</h1> <p><code> <script src='threex.mouseevents.js'></script> <script src='threex.mouseevents.object3d.js'></script> </code></p> <h1>to bind an event</h1> <p><code>mesh.on('click', function(object3d){ ... })</code></p> <h1>to unbind an event</h1> <p><code>mesh.off('click', function(object3d){ ... })</code></p> <h1>Alternative API</h1> <p>Its naming is closer DOM events. </p> <p><code>mesh.addEventListener('click', function(object3d){ ... })</code> <code>mesh.removeEventListener('click', function(object3d){ ... })</code></p> <p><em>Warning</em>: it modifies THREE.Object3D class. It is a global class, so it may be considered unclean by some. For this reason, this file is distinct from threex.mouseevents.js. It is a plugin, and it isnt required.</p> <h1>Code</h1> </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">¶</a> </div> <p>check that threex.mouseevents.js is included</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">console</span><span class="p">.</span><span class="nx">assert</span><span class="p">(</span><span class="nx">THREEx</span> <span class="o">&&</span> <span class="nx">THREEx</span><span class="p">.</span><span class="nx">DomEvent</span><span class="p">,</span> <span class="s2">"threex.mouseevents.js MUST be included before"</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>create the global instance of THREEx.DomEvent</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">THREE</span><span class="p">.</span><span class="nx">Object3D</span><span class="p">.</span><span class="nx">_threexDomEvent</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">THREEx</span><span class="p">.</span><span class="nx">DomEvent</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h1>wrap mouseevents.bind()</h1> </td> <td class="code"> <div class="highlight"><pre><span class="nx">THREE</span><span class="p">.</span><span class="nx">Object3D</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">on</span> <span class="o">=</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Object3D</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">addEventListener</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">eventName</span><span class="p">,</span> <span class="nx">callback</span><span class="p">){</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Object3D</span><span class="p">.</span><span class="nx">_threexDomEvent</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">eventName</span><span class="p">,</span> <span class="nx">callback</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> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h1>wrap mouseevents.unbind()</h1> </td> <td class="code"> <div class="highlight"><pre><span class="nx">THREE</span><span class="p">.</span><span class="nx">Object3D</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">off</span> <span class="o">=</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Object3D</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">removeEventListener</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">eventName</span><span class="p">,</span> <span class="nx">callback</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>TODO to code</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> </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>