threex

Version:

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

74 lines (65 loc) • 17.9 kB

HTML

<!DOCTYPE html> <html> <head> <title>threex.texturePoolBall.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.texturePoolBall.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> NOTE: this match THREE namespace on purpose </td> <td class="code"> <div class="highlight"><pre>if(typeof THREEx === "undefined") var THREEx = {}; if(typeof THREEx.Texture === "undefined") THREEx.Texture = {}; /** */ THREEx.Texture.PoolBall = { clear : function(canvas){ var w = canvas.width; var ctx = canvas.getContext( '2d' ); clearRect(0, 0, w, w); }, /** * display the shaddow of the smiley in a texture * * @param {canvasElement} the canvas where we draw */ draw : function(canvas, textData, stripped, color){ var ctx = canvas.getContext( '2d' ); var w = canvas.width; var h = canvas.height; </pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> base color is white </td> <td class="code"> <div class="highlight"><pre> ctx.save(); ctx.fillStyle = "#FFFFFF"; ctx.fillRect(0,0, w, h); ctx.restore(); ctx.save(); ctx.translate(w/2, h/2) var rectH = stripped ? h/2 : h; ctx.fillStyle = color.getContextStyle(); ctx.fillRect(-w/2,-rectH/2, w, rectH); ctx.restore(); ctx.save(); ctx.translate(w/2, h/2) ctx.fillStyle = "#FFFFFF"; var radiusW = 0.7 * w/4; var radiusH = 1.2 * h/4; ctx.fillEllipse( -radiusW/2, -radiusH/2, radiusW, radiusH); ctx.restore(); ctx.save(); ctx.translate(w/2, h/2) var textH = w/4; ctx.font = "bolder "+textH+"px Arial"; ctx.fillStyle = "#000000"; var textW = ctx.measureText(textData).width; ctx.fillText(textData, -textW/2, 0.8*textH/2); ctx.restore(); },</pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> //////////////////////////////////////////////////////////////////////////////// texture helper // //////////////////////////////////////////////////////////////////////////////// </td> <td class="code"> <div class="highlight"><pre> ballTexture: function( textData, stripped, color, canvasW, mapping, callback ) { var canvasDrawer = function(canvas){ THREEx.Texture.PoolBall.draw(canvas, textData, stripped, color); } return THREEx.Texture.PoolBall._buildTexture( canvasW, mapping, callback, canvasDrawer ); }, _buildTexture: function( canvasW, mapping, callback, canvasDrawer ) { canvasW = typeof canvasW !== 'undefined' ? canvasW : 64; var canvas = document.createElement('canvas'); canvas.width = canvas.height = canvasW; var texture = new THREE.Texture(canvas, mapping); canvasDrawer(canvas); texture.needsUpdate = true; if( callback ) callback( this ); return texture; }, } </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>