threex

<!DOCTYPE html> <html> <head> <title>threex.domevent.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.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.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> This THREEx helper makes it easy to handle the mouse events in your 3D scene <h1>Lets get started</h1> First you include it in your page <code><script src='threex.domevent.js'></script></code> <h1>use the object oriented api</h1> You bind an event like this <code>mesh.on('click', function(object3d){ ... })</code> To unbind an event, just do <code>mesh.off('click', function(object3d){ ... })</code> As an alternative, there is another naming closer DOM events. Pick the one you like, they are doing the same thing <code>mesh.addEventListener('click', function(object3d){ ... })</code> <code>mesh.removeEventListener('click', function(object3d){ ... })</code> <h1>Supported Events</h1> Always in a effort to stay close to usual pratices, the events name are the same as in DOM. The semantic is the same too. Currently, the available events are <a href="http://www.quirksmode.org/dom/events/click.html">click, dblclick, mouseup, mousedown</a>, <a href="http://www.quirksmode.org/dom/events/mouseover.html">mouseover and mouse out</a>. <h1>use the standalone api</h1> The object-oriented api modifies THREE.Object3D class. It is a global class, so it may be legitimatly considered unclean by some people. If this bother you, simply do <code>THREEx.DomEvent.noConflict()</code> and use the standalone API. In fact, the object oriented API is just a thin wrapper on top of the standalone API. First, you instanciate the object <code>var domEvent = new THREEx.DomEvent();</code> Then you bind an event like this <code>domEvent.bind(mesh, 'click', function(object3d){ object3d.scale.x *= 2; });</code> To unbind an event, just do <code>domEvent.unbind(mesh, 'click', callback);</code> <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> </td> <td class="code"> <div class="highlight"><pre>/** @namespace */ var THREEx = THREEx || {};</pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h1>Constructor</h1> </td> <td class="code"> <div class="highlight"><pre>THREEx.DomEvent = function(domElement) { this._domElement= domElement || document; this._projector = new THREE.Projector(); this._selected = null;</pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> Bind dom event for mouse and touch </td> <td class="code"> <div class="highlight"><pre> var _this = this; this._$onClick = function(){ _this._onClick.apply(_this, arguments); }; this._$onDblClick = function(){ _this._onDblClick.apply(_this, arguments); }; this._$onMouseMove = function(){ _this._onMouseMove.apply(_this, arguments); }; this._$onMouseDown = function(){ _this._onMouseDown.apply(_this, arguments); }; this._$onMouseUp = function(){ _this._onMouseUp.apply(_this, arguments); }; this._$onTouchMove = function(){ _this._onTouchMove.apply(_this, arguments); }; this._$onTouchStart = function(){ _this._onTouchStart.apply(_this, arguments); }; this._$onTouchEnd = function(){ _this._onTouchEnd.apply(_this, arguments); }; this._domElement.addEventListener( 'click' , this._$onClick , false ); this._domElement.addEventListener( 'dblclick' , this._$onDblClick , false ); this._domElement.addEventListener( 'mousemove' , this._$onMouseMove , false ); this._domElement.addEventListener( 'mousedown' , this._$onMouseDown , false ); this._domElement.addEventListener( 'mouseup' , this._$onMouseUp , false ); this._domElement.addEventListener( 'touchmove' , this._$onTouchMove , false ); this._domElement.addEventListener( 'touchstart' , this._$onTouchStart , false ); this._domElement.addEventListener( 'touchend' , this._$onTouchEnd , false ); }</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h1>Destructor</h1> </td> <td class="code"> <div class="highlight"><pre>THREEx.DomEvent.prototype.destroy = function() {</pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> unBind dom event for mouse and touch </td> <td class="code"> <div class="highlight"><pre> this._domElement.removeEventListener( 'click' , this._$onClick , false ); this._domElement.removeEventListener( 'dblclick' , this._$onDblClick , false ); this._domElement.removeEventListener( 'mousemove' , this._$onMouseMove , false ); this._domElement.removeEventListener( 'mousedown' , this._$onMouseDown , false ); this._domElement.removeEventListener( 'mouseup' , this._$onMouseUp , false ); this._domElement.removeEventListener( 'touchmove' , this._$onTouchMove , false ); this._domElement.removeEventListener( 'touchstart' , this._$onTouchStart , false ); this._domElement.removeEventListener( 'touchend' , this._$onTouchEnd , false ); } THREEx.DomEvent.eventNames = [ "click", "dblclick", "mouseover", "mouseout", "mousedown", "mouseup" ]; /********************************************************************************/ /* domevent context */ /********************************************************************************/</pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> handle domevent context in object3d instance </td> <td class="code"> <div class="highlight"><pre>THREEx.DomEvent.prototype._objectCtxInit = function(object3d){ object3d._3xMouseEvent = {}; } THREEx.DomEvent.prototype._objectCtxDeinit = function(object3d){ delete object3d._3xMouseEvent; } THREEx.DomEvent.prototype._objectCtxIsInit = function(object3d){ return object3d._3xMouseEvent ? true : false; } THREEx.DomEvent.prototype._objectCtxGet = function(object3d){ return object3d._3xMouseEvent; } /********************************************************************************/ /* */ /********************************************************************************/ THREEx.DomEvent.prototype.bind = function(object3d, eventName, callback) { console.assert( THREEx.DomEvent.eventNames.indexOf(eventName) !== -1, "not available events:"+eventName ); if( !this._objectCtxIsInit(object3d) ) this._objectCtxInit(object3d); var objectCtx = this._objectCtxGet(object3d); if( !objectCtx[eventName+'Handlers'] ) objectCtx[eventName+'Handlers'] = []; objectCtx[eventName+'Handlers'].push({ callback : callback }); } THREEx.DomEvent.prototype._bound = function(eventName, object3d) { var objectCtx = this._objectCtxGet(object3d); if( !objectCtx ) return false; return objectCtx[eventName+'Handlers'] ? true : false; } /********************************************************************************/ /* onMove */ /********************************************************************************/</pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h1>handle mousemove kind of events</h1> </td> <td class="code"> <div class="highlight"><pre>THREEx.DomEvent.prototype._onMove = function(mouseX, mouseY) { var vector = new THREE.Vector3( mouseX, mouseY, 1 ); this._projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectScene( scene ); var oldSelected = this._selected; if( intersects.length > 0 ){ var intersect = intersects[ 0 ]; var newSelected = intersect.object; this._selected = newSelected; var overHandlers, outHandlers; if( oldSelected != newSelected ){</pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> if newSelected bound mouseenter, notify it </td> <td class="code"> <div class="highlight"><pre> if( this._bound('mouseover', newSelected) ){ overHandlers = this._objectCtxGet(newSelected).mouseoverHandlers.slice(0); }</pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> if there is a oldSelect and oldSelected bound mouseleave, notify it </td> <td class="code"> <div class="highlight"><pre> if( oldSelected && this._bound('mouseout', oldSelected) ){ outHandlers = this._objectCtxGet(oldSelected).mouseoutHandlers.slice(0); } } }else{</pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> if there is a oldSelect and oldSelected bound mouseleave, notify it </td> <td class="code"> <div class="highlight"><pre> if( oldSelected && this._bound('mouseout', oldSelected) ){ outHandlers = this._objectCtxGet(oldSelected).mouseoutHandlers.slice(0); } this._selected = null; }</pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> notify mouseEnter - done at the end with a copy of the list to allow callback to remove handlers </td> <td class="code"> <div class="highlight"><pre> overHandlers && overHandlers.forEach(function(handler){ handler.callback(newSelected); })</pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> notify mouseLeave - done at the end with a copy of the list to allow callback to remove handlers </td> <td class="code"> <div class="highlight"><pre> outHandlers && outHandlers.forEach(function(handler){ handler.callback(oldSelected); }) } /********************************************************************************/ /* onEvent */ /********************************************************************************/</pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <h1>handle click kind of events</h1> </td> <td class="code"> <div class="highlight"><pre>THREEx.DomEvent.prototype._onEvent = function(eventName, mouseX, mouseY) { var vector = new THREE.Vector3( mouseX, mouseY, 1 ); this._projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectScene( scene );</pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> FIXME to test only the bound objects is likely faster to run - handle the list var intersects = ray.intersectObjects( [mesh] ); </td> <td class="code"> <div class="highlight"><pre> for(var i = 0; i < intersects.length; i++){ var intersect = intersects[i]; var object3d = intersect.object; var objectCtx = this._objectCtxGet(object3d); if( !objectCtx ) continue; var handlers = objectCtx[eventName+'Handlers']; handlers && handlers.length && handlers.forEach(function(handler){ handler.callback(object3d, intersect); }) } } /********************************************************************************/ /* handle mouse events */ /********************************************************************************/</pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <h1>handle mouse events</h1> </td> <td class="code"> <div class="highlight"><pre>THREEx.DomEvent.prototype._onMouseDown = function(event){ return this._onMouseEvent('mousedown', event); } THREEx.DomEvent.prototype._onMouseUp = function(event){ return this._onMouseEvent('mouseup' , event); } THREEx.DomEvent.prototype._onMouseEvent = function(eventName, domEvent) { var mouseX = +(domEvent.clientX / window.innerWidth ) * 2 - 1; var mouseY = -(domEvent.clientY / window.innerHeight) * 2 + 1; return this._onEvent(eventName, mouseX, mouseY); } THREEx.DomEvent.prototype._onMouseMove = function(event) { var mouseX = +(event.clientX / window.innerWidth ) * 2 - 1; var mouseY = -(event.clientY / window.innerHeight) * 2 + 1; return this._onMove(mouseX, mouseY); } THREEx.DomEvent.prototype._onClick = function(event) {</pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> TODO handle touch ? </td> <td class="code"> <div class="highlight"><pre> return this._onMouseEvent('click' , event); } THREEx.DomEvent.prototype._onDblClick = function(event) {</pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> TODO handle touch ? </td> <td class="code"> <div class="highlight"><pre> return this._onMouseEvent('dblclick' , event); } /*****