├── Makefile ├── README.md ├── REVISION ├── css └── main.css ├── images ├── .gitignore ├── ash_uvgrid01.jpg └── water.jpg ├── index.html ├── js └── .gitignore └── vendor ├── DragPanControls.js ├── three.js ├── Detector.js ├── RequestAnimationFrame.js ├── Stats.js └── Three.js └── threex ├── Makefile ├── README.md ├── THREEx.CelShader.js ├── THREEx.DeviceOrientationState.js ├── THREEx.FullScreen.js ├── THREEx.GeometryUtils.js ├── THREEx.GeometryWobble.js ├── THREEx.KeyboardState.js ├── THREEx.LogoTurtle.js ├── THREEx.PlasmaShader.js ├── THREEx.SkyMap.js ├── THREEx.WindowResize.js ├── THREEx.glCapability.js ├── THREEx.requestAnimationFrame.js ├── THREEx.screenshot.js ├── docs ├── THREEx.CelShader.html ├── THREEx.CubeMap.html ├── THREEx.DeviceOrientationState.html ├── THREEx.FullScreen.html ├── THREEx.GeometryUtils.html ├── THREEx.GeometryWobble.html ├── THREEx.KeyboardState.html ├── THREEx.LogoTurtle.html ├── THREEx.PlasmaShader.html ├── THREEx.SkyMap.html ├── THREEx.WindowResize.html ├── THREEx.glCapability.html ├── THREEx.requestAnimationFrame.html ├── THREEx.screenshot.html └── docco.css ├── examples ├── THREEx.DeviceOrientationState.html ├── THREEx.KeyboardState.html ├── threex.embedded │ ├── noshield-host.html │ ├── noshield-iframe.html │ ├── withshield-host.html │ └── withshield-iframe.html └── threex.fullscreen.html ├── threex.chromeWebStoreInstall.js ├── threex.embedded.js ├── threex.sparks.js └── threex.texturePoolBall.js /Makefile: -------------------------------------------------------------------------------- 1 | # makefile to automatize simple operations 2 | 3 | server: 4 | python -m SimpleHTTPServer 5 | 6 | deploy: 7 | # assume there is something to commit 8 | # use "git diff --exit-code HEAD" to know if there is something to commit 9 | # so two lines: one if no commit, one if something to commit 10 | git commit -a -m "New deploy" && git push -f origin HEAD:gh-pages && git reset HEAD~ 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [boilerplate for three.js](https://github.com/jeromeetienne/threejsboilerplate) 2 | is a template to get you started. You download it and modify it until it fits your needs. 3 | It is a fast way to start a clean project with [three.js](https://github.com/mrdoob/three.js/). 4 | It avoids repetitive tasks, following DRY principles. 5 | It includes various good practices and compatibilities features. 6 | More details [here](http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/). 7 | 8 | # Get Started 9 | ``` 10 | git clone https://github.com/jeromeetienne/threejsboilerplate.git 11 | ``` 12 | 13 | And start updating ```index.html``` until it fits yours need. 14 | -------------------------------------------------------------------------------- /REVISION: -------------------------------------------------------------------------------- 1 | 0 2 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow : hidden; 3 | padding : 0; 4 | margin : 0; 5 | 6 | color : #222; 7 | background-color: #BBB; 8 | font-family : arial; 9 | font-size : 100%; 10 | } 11 | #info { 12 | position : absolute; 13 | top : 0px; 14 | width : 100%; 15 | padding : 5px; 16 | text-align : center; 17 | } 18 | #info a { 19 | color : #66F; 20 | text-decoration : none; 21 | } 22 | #info a:hover { 23 | text-decoration : underline; 24 | } 25 | #inlineDoc { 26 | position : absolute; 27 | bottom : 0px; 28 | right : 5px; 29 | padding : 5px; 30 | } 31 | -------------------------------------------------------------------------------- /images/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeromeetienne/tunnelgl/d392e7ae66a3725c738152340acccd8ba165eb25/images/.gitignore -------------------------------------------------------------------------------- /images/ash_uvgrid01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeromeetienne/tunnelgl/d392e7ae66a3725c738152340acccd8ba165eb25/images/ash_uvgrid01.jpg -------------------------------------------------------------------------------- /images/water.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeromeetienne/tunnelgl/d392e7ae66a3725c738152340acccd8ba165eb25/images/water.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | learningthree.js boiler plate for three.js 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 |
26 | LearningThree.js: 27 | Experimentation with tunnel effect 28 |
29 |
30 | f for fullscreen - p for screenshot 31 |
32 | 33 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /js/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeromeetienne/tunnelgl/d392e7ae66a3725c738152340acccd8ba165eb25/js/.gitignore -------------------------------------------------------------------------------- /vendor/DragPanControls.js: -------------------------------------------------------------------------------- 1 | THREE.DragPanControls = function(object, domElement) 2 | { 3 | this._object = object; 4 | this._domElement= domElement || document; 5 | 6 | // parameters that you can change after initialisation 7 | this.target = new THREE.Vector3(0, 0, 0); 8 | this.speedX = 0.03; 9 | this.speedY = 0.03; 10 | this.rangeX = -40; 11 | this.rangeY = +40; 12 | 13 | // private variables 14 | this._mouseX = 0; 15 | this._mouseY = 0; 16 | 17 | var _this = this; 18 | this._$onMouseMove = function(){ _this._onMouseMove.apply(_this, arguments); }; 19 | this._$onTouchStart = function(){ _this._onTouchStart.apply(_this, arguments); }; 20 | this._$onTouchMove = function(){ _this._onTouchMove.apply(_this, arguments); }; 21 | 22 | this._domElement.addEventListener( 'mousemove', this._$onMouseMove, false ); 23 | this._domElement.addEventListener( 'touchstart', this._$onTouchStart,false ); 24 | this._domElement.addEventListener( 'touchmove', this._$onTouchMove, false ); 25 | } 26 | 27 | THREE.DragPanControls.prototype.destroy = function() 28 | { 29 | this._domElement.removeEventListener( 'mousemove', this._$onMouseMove, false ); 30 | this._domElement.removeEventListener( 'touchstart', this._$onTouchStart,false ); 31 | this._domElement.removeEventListener( 'touchmove', this._$onTouchMove, false ); 32 | } 33 | 34 | THREE.DragPanControls.prototype.update = function(event) 35 | { 36 | this._object.position.x += ( this._mouseX * this.rangeX - this._object.position.x ) * this.speedX; 37 | this._object.position.y += ( this._mouseY * this.rangeY - this._object.position.y ) * this.speedY; 38 | this._object.lookAt( this.target ); 39 | } 40 | 41 | THREE.DragPanControls.prototype._onMouseMove = function(event) 42 | { 43 | this._mouseX = ( event.clientX / window.innerWidth ) - 0.5; 44 | this._mouseY = ( event.clientY / window.innerHeight) - 0.5; 45 | } 46 | 47 | THREE.DragPanControls.prototype._onTouchStart = function(event) 48 | { 49 | if( event.touches.length != 1 ) return; 50 | 51 | // no preventDefault to get click event on ios 52 | 53 | this._mouseX = ( event.touches[ 0 ].pageX / window.innerWidth ) - 0.5; 54 | this._mouseY = ( event.touches[ 0 ].pageY / window.innerHeight) - 0.5; 55 | } 56 | 57 | THREE.DragPanControls.prototype._onTouchMove = function(event) 58 | { 59 | if( event.touches.length != 1 ) return; 60 | 61 | event.preventDefault(); 62 | 63 | this._mouseX = ( event.touches[ 0 ].pageX / window.innerWidth ) - 0.5; 64 | this._mouseY = ( event.touches[ 0 ].pageY / window.innerHeight) - 0.5; 65 | } 66 | 67 | -------------------------------------------------------------------------------- /vendor/three.js/Detector.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * @author mr.doob / http://mrdoob.com/ 4 | */ 5 | 6 | Detector = { 7 | 8 | canvas : !! window.CanvasRenderingContext2D, 9 | webgl : ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )(), 10 | workers : !! window.Worker, 11 | fileapi : window.File && window.FileReader && window.FileList && window.Blob, 12 | 13 | getWebGLErrorMessage : function () { 14 | 15 | var domElement = document.createElement( 'div' ); 16 | 17 | domElement.style.fontFamily = 'monospace'; 18 | domElement.style.fontSize = '13px'; 19 | domElement.style.textAlign = 'center'; 20 | domElement.style.background = '#eee'; 21 | domElement.style.color = '#000'; 22 | domElement.style.padding = '1em'; 23 | domElement.style.width = '475px'; 24 | domElement.style.margin = '5em auto 0'; 25 | 26 | if ( ! this.webgl ) { 27 | 28 | domElement.innerHTML = window.WebGLRenderingContext ? [ 29 | 'Your graphics card does not seem to support WebGL.
', 30 | 'Find out how to get it here.' 31 | ].join( '\n' ) : [ 32 | 'Your browser does not seem to support WebGL.
', 33 | 'Find out how to get it here.' 34 | ].join( '\n' ); 35 | 36 | } 37 | 38 | return domElement; 39 | 40 | }, 41 | 42 | addGetWebGLMessage : function ( parameters ) { 43 | 44 | var parent, id, domElement; 45 | 46 | parameters = parameters || {}; 47 | 48 | parent = parameters.parent !== undefined ? parameters.parent : document.body; 49 | id = parameters.id !== undefined ? parameters.id : 'oldie'; 50 | 51 | domElement = Detector.getWebGLErrorMessage(); 52 | domElement.id = id; 53 | 54 | parent.appendChild( domElement ); 55 | 56 | } 57 | 58 | }; 59 | -------------------------------------------------------------------------------- /vendor/three.js/RequestAnimationFrame.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Provides requestAnimationFrame in a cross browser way. 3 | * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 4 | */ 5 | 6 | if ( !window.requestAnimationFrame ) { 7 | 8 | window.requestAnimationFrame = ( function() { 9 | 10 | return window.webkitRequestAnimationFrame || 11 | window.mozRequestAnimationFrame || 12 | window.oRequestAnimationFrame || 13 | window.msRequestAnimationFrame || 14 | function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) { 15 | 16 | window.setTimeout( callback, 1000 / 60 ); 17 | 18 | }; 19 | 20 | } )(); 21 | 22 | } 23 | -------------------------------------------------------------------------------- /vendor/three.js/Stats.js: -------------------------------------------------------------------------------- 1 | // stats.js r8 - http://github.com/mrdoob/stats.js 2 | var Stats=function(){var h,a,n=0,o=0,i=Date.now(),u=i,p=i,l=0,q=1E3,r=0,e,j,f,b=[[16,16,48],[0,255,255]],m=0,s=1E3,t=0,d,k,g,c=[[16,48,16],[0,255,0]];h=document.createElement("div");h.style.cursor="pointer";h.style.width="80px";h.style.opacity="0.9";h.style.zIndex="10001";h.addEventListener("mousedown",function(a){a.preventDefault();n=(n+1)%2;n==0?(e.style.display="block",d.style.display="none"):(e.style.display="none",d.style.display="block")},!1);e=document.createElement("div");e.style.textAlign= 3 | "left";e.style.lineHeight="1.2em";e.style.backgroundColor="rgb("+Math.floor(b[0][0]/2)+","+Math.floor(b[0][1]/2)+","+Math.floor(b[0][2]/2)+")";e.style.padding="0 0 3px 3px";h.appendChild(e);j=document.createElement("div");j.style.fontFamily="Helvetica, Arial, sans-serif";j.style.fontSize="9px";j.style.color="rgb("+b[1][0]+","+b[1][1]+","+b[1][2]+")";j.style.fontWeight="bold";j.innerHTML="FPS";e.appendChild(j);f=document.createElement("div");f.style.position="relative";f.style.width="74px";f.style.height= 4 | "30px";f.style.backgroundColor="rgb("+b[1][0]+","+b[1][1]+","+b[1][2]+")";for(e.appendChild(f);f.children.length<74;)a=document.createElement("span"),a.style.width="1px",a.style.height="30px",a.style.cssFloat="left",a.style.backgroundColor="rgb("+b[0][0]+","+b[0][1]+","+b[0][2]+")",f.appendChild(a);d=document.createElement("div");d.style.textAlign="left";d.style.lineHeight="1.2em";d.style.backgroundColor="rgb("+Math.floor(c[0][0]/2)+","+Math.floor(c[0][1]/2)+","+Math.floor(c[0][2]/2)+")";d.style.padding= 5 | "0 0 3px 3px";d.style.display="none";h.appendChild(d);k=document.createElement("div");k.style.fontFamily="Helvetica, Arial, sans-serif";k.style.fontSize="9px";k.style.color="rgb("+c[1][0]+","+c[1][1]+","+c[1][2]+")";k.style.fontWeight="bold";k.innerHTML="MS";d.appendChild(k);g=document.createElement("div");g.style.position="relative";g.style.width="74px";g.style.height="30px";g.style.backgroundColor="rgb("+c[1][0]+","+c[1][1]+","+c[1][2]+")";for(d.appendChild(g);g.children.length<74;)a=document.createElement("span"), 6 | a.style.width="1px",a.style.height=Math.random()*30+"px",a.style.cssFloat="left",a.style.backgroundColor="rgb("+c[0][0]+","+c[0][1]+","+c[0][2]+")",g.appendChild(a);return{domElement:h,update:function(){i=Date.now();m=i-u;s=Math.min(s,m);t=Math.max(t,m);k.textContent=m+" MS ("+s+"-"+t+")";var a=Math.min(30,30-m/200*30);g.appendChild(g.firstChild).style.height=a+"px";u=i;o++;if(i>p+1E3)l=Math.round(o*1E3/(i-p)),q=Math.min(q,l),r=Math.max(r,l),j.textContent=l+" FPS ("+q+"-"+r+")",a=Math.min(30,30-l/ 7 | 100*30),f.appendChild(f.firstChild).style.height=a+"px",p=i,o=0}}}; 8 | 9 | -------------------------------------------------------------------------------- /vendor/threex/Makefile: -------------------------------------------------------------------------------- 1 | # simple makefile to avoid repeatitive tasks 2 | 3 | buildDoc: 4 | docco *.js 5 | 6 | monitorDoc: build 7 | (while inotifywait -r -e modify,attrib,create . ; do make build; done) 8 | 9 | server: 10 | python -m SimpleHTTPServer 11 | 12 | deploy: 13 | # assume there is something to commit 14 | # use "git diff --exit-code HEAD" to know if there is something to commit 15 | # so two lines: one if no commit, one if something to commit 16 | git commit -a -m "New deploy" && git push -f origin HEAD:gh-pages && git reset HEAD~ 17 | 18 | 19 | -------------------------------------------------------------------------------- /vendor/threex/README.md: -------------------------------------------------------------------------------- 1 | * This should be the root of a git repository but i dunno how to handle submodule 2 | 3 | # TODO 4 | * document those 5 | * you write a lot of code but not a lot of doc 6 | * all that could go in learningthreejs 7 | * what about anotated source. 8 | * easy to write. 9 | * how to present it in the blog 10 | * currently anotated source is isnt too embedable 11 | * should it be a blocker ? 12 | * likely not 13 | * make a super simple post for each 14 | * they need example and all 15 | * how to handle this ? 16 | * an examples directory like three.js ? 17 | * why not ? 18 | * how to handle the maturity of it ? 19 | * many arent too finished -------------------------------------------------------------------------------- /vendor/threex/THREEx.CelShader.js: -------------------------------------------------------------------------------- 1 | // define namespaces 2 | var THREEx = THREEx || {}; 3 | THREEx.ShaderLib = THREEx.ShaderLib || {}; 4 | THREEx.UniformsLib = THREEx.UniformsLib || {}; 5 | 6 | // cel shader from ro.me - http://www.ro.me/tech/cel-shader - Apache License 2.0 7 | THREEx.UniformsLib['cel'] = { 8 | "uDirLightPos" : { type: "v3", value: new THREE.Vector3(1,0,0) }, 9 | "uDirLightColor" : { type: "c" , value: new THREE.Color( 0xeeeeee ) }, 10 | "uAmbientLightColor" : { type: "c" , value: new THREE.Color( 0x050505 ) }, 11 | "uBaseColor" : { type: "c" , value: new THREE.Color( 0xff0000 ) } 12 | }; 13 | 14 | THREEx.ShaderLib['cel'] = { 15 | vertexShader: [ 16 | "varying vec3 vNormal;", 17 | "varying vec3 vRefract;", 18 | 19 | "void main() {", 20 | 21 | "vec4 mPosition = objectMatrix * vec4( position, 1.0 );", 22 | "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );", 23 | "vec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );", 24 | 25 | "vNormal = normalize( normalMatrix * normal );", 26 | 27 | "vec3 I = mPosition.xyz - cameraPosition;", 28 | "vRefract = refract( normalize( I ), nWorld, 1.02 );", 29 | 30 | "gl_Position = projectionMatrix * mvPosition;", 31 | 32 | "}" 33 | ].join( "\n" ), 34 | fragmentShader: [ 35 | "uniform vec3 uBaseColor;", 36 | 37 | "uniform vec3 uDirLightPos;", 38 | "uniform vec3 uDirLightColor;", 39 | 40 | "uniform vec3 uAmbientLightColor;", 41 | 42 | "varying vec3 vNormal;", 43 | 44 | "varying vec3 vRefract;", 45 | 46 | "void main() {", 47 | 48 | "float directionalLightWeighting = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);", 49 | "vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;", 50 | 51 | "float intensity = smoothstep( - 0.5, 1.0, pow( length(lightWeighting), 20.0 ) );", 52 | "intensity += length(lightWeighting) * 0.2;", 53 | 54 | "float cameraWeighting = dot( normalize( vNormal ), vRefract );", 55 | "intensity += pow( 1.0 - length( cameraWeighting ), 6.0 );", 56 | "intensity = intensity * 0.2 + 0.3;", 57 | 58 | "if ( intensity < 0.50 ) {", 59 | 60 | "gl_FragColor = vec4( 2.0 * intensity * uBaseColor, 1.0 );", 61 | 62 | "} else {", 63 | 64 | "gl_FragColor = vec4( 1.0 - 2.0 * ( 1.0 - intensity ) * ( 1.0 - uBaseColor ), 1.0 );", 65 | 66 | "}", 67 | 68 | "}" 69 | ].join( "\n" ) 70 | }; -------------------------------------------------------------------------------- /vendor/threex/THREEx.DeviceOrientationState.js: -------------------------------------------------------------------------------- 1 | /** @namespace */ 2 | var THREEx = THREEx || {}; 3 | 4 | THREEx.DeviceOrientationState = function() 5 | { 6 | // to store the current state 7 | this._state = { x: 0, y: 0, z: 0 }; 8 | 9 | this._$callback = function(event){ this._onDeviceOrientation(event); }.bind(this); 10 | 11 | // bind events 12 | // - spec http://dev.w3.org/geo/api/spec-source-orientation.html 13 | window.addEventListener('deviceorientation', this._$callback); 14 | } 15 | 16 | /** 17 | * To stop listening of the keyboard events 18 | */ 19 | THREEx.DeviceOrientationState.prototype.destroy = function() 20 | { 21 | // unbind events 22 | window.removeEventListener('deviceorientation', this._$callback); 23 | } 24 | 25 | /** 26 | * to process the keyboard dom event 27 | */ 28 | THREEx.DeviceOrientationState.prototype._onDeviceOrientation = function(event) 29 | { 30 | this._state.x = (!event.alpha ? 0 : event.alpha) * Math.PI / 180; 31 | this._state.y = (!event.beta ? 0 : event.beta ) * Math.PI / 180; 32 | this._state.z = (!event.gamma ? 0 : event.gamma) * Math.PI / 180; 33 | } 34 | 35 | 36 | THREEx.DeviceOrientationState.prototype.angleX = function() 37 | { 38 | return this._state.x; 39 | } 40 | 41 | THREEx.DeviceOrientationState.prototype.angleY = function() 42 | { 43 | return this._state.y; 44 | } 45 | 46 | THREEx.DeviceOrientationState.prototype.angleZ = function() 47 | { 48 | return this._state.z; 49 | } 50 | 51 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.FullScreen.js: -------------------------------------------------------------------------------- 1 | // This THREEx helper makes it easy to handle the fullscreen API 2 | // * it hides the prefix for each browser 3 | // * it hides the little discrepencies of the various vendor API 4 | // * at the time of this writing (nov 2011) it is available in 5 | // [firefox nightly](http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html), 6 | // [webkit nightly](http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients/) and 7 | // [chrome stable](http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API). 8 | 9 | // 10 | // # Code 11 | 12 | // 13 | 14 | /** @namespace */ 15 | var THREEx = THREEx || {}; 16 | THREEx.FullScreen = THREEx.FullScreen || {}; 17 | 18 | /** 19 | * test if it is possible to have fullscreen 20 | * 21 | * @returns {Boolean} true if fullscreen API is available, false otherwise 22 | */ 23 | THREEx.FullScreen.available = function() 24 | { 25 | return this._hasWebkitFullScreen || this._hasMozFullScreen; 26 | } 27 | 28 | /** 29 | * test if fullscreen is currently activated 30 | * 31 | * @returns {Boolean} true if fullscreen is currently activated, false otherwise 32 | */ 33 | THREEx.FullScreen.activated = function() 34 | { 35 | if( this._hasWebkitFullScreen ){ 36 | return document.webkitIsFullScreen; 37 | }else if( this._hasMozFullScreen ){ 38 | return document.mozFullScreen; 39 | }else{ 40 | console.assert(false); 41 | } 42 | } 43 | 44 | /** 45 | * Request fullscreen on a given element 46 | * @param {DomElement} element to make fullscreen. optional. default to document.body 47 | */ 48 | THREEx.FullScreen.request = function(element) 49 | { 50 | element = element || document.body; 51 | if( this._hasWebkitFullScreen ){ 52 | element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 53 | }else if( this._hasMozFullScreen ){ 54 | element.mozRequestFullScreen(); 55 | }else{ 56 | console.assert(false); 57 | } 58 | } 59 | 60 | /** 61 | * Cancel fullscreen 62 | */ 63 | THREEx.FullScreen.cancel = function() 64 | { 65 | if( this._hasWebkitFullScreen ){ 66 | document.webkitCancelFullScreen(); 67 | }else if( this._hasMozFullScreen ){ 68 | document.mozCancelFullScreen(); 69 | }else{ 70 | console.assert(false); 71 | } 72 | } 73 | 74 | 75 | // internal functions to know which fullscreen API implementation is available 76 | THREEx.FullScreen._hasWebkitFullScreen = 'webkitCancelFullScreen' in document ? true : false; 77 | THREEx.FullScreen._hasMozFullScreen = 'mozCancelFullScreen' in document ? true : false; 78 | 79 | /** 80 | * Bind a key to renderer screenshot 81 | */ 82 | THREEx.FullScreen.bindKey = function(opts){ 83 | opts = opts || {}; 84 | var charCode = opts.charCode || 'f'.charCodeAt(0); 85 | var dblclick = opts.dblclick !== undefined ? opts.dblclick : false; 86 | var element = opts.element 87 | 88 | var toggle = function(){ 89 | if( THREEx.FullScreen.activated() ){ 90 | THREEx.FullScreen.cancel(); 91 | }else{ 92 | THREEx.FullScreen.request(element); 93 | } 94 | } 95 | 96 | // callback to handle keypress 97 | var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 98 | var onKeyPress = __bind(function(event){ 99 | // return now if the KeyPress isnt for the proper charCode 100 | if( event.which !== charCode ) return; 101 | // toggle fullscreen 102 | toggle(); 103 | }, this); 104 | 105 | // listen to keypress 106 | // NOTE: for firefox it seems mandatory to listen to document directly 107 | document.addEventListener('keypress', onKeyPress, false); 108 | // listen to dblclick 109 | dblclick && document.addEventListener('dblclick', toggle, false); 110 | 111 | return { 112 | unbind : function(){ 113 | document.removeEventListener('keypress', onKeyPress, false); 114 | dblclick && document.removeEventListener('dblclick', toggle, false); 115 | } 116 | }; 117 | } 118 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.GeometryUtils.js: -------------------------------------------------------------------------------- 1 | // This THREEx helper provide various basic functions for ```THREE.Geometry```. 2 | // It is able to scale, translate, center a geometry. Other functions may be 3 | // added soon. 4 | // The API is chained for convenience. 5 | // 6 | // ## Scale 7 | // To make the geometry twice larger in ```y``` 8 | 9 | // ``` 10 | // var scale = new THREE.Vector3(1,2,1); 11 | // THREEx.GeometryUtils.scale(geometry, scale); 12 | // ``` 13 | 14 | // ## Translate 15 | // To make the geometry move 100 further in ```x``` 16 | 17 | // ``` 18 | // var translation = new THREE.Vector3(100,0,0); 19 | // THREEx.GeometryUtils.translate(geometry, translation); 20 | // ``` 21 | 22 | // ## Center 23 | // To center the geometry on its middle point 24 | 25 | // ``` 26 | // THREEx.GeometryUtils.center(geometry); 27 | // ``` 28 | 29 | // ## middlePoint 30 | // To compute the middle point of a geometry 31 | 32 | // ``` 33 | // THREEx.GeometryUtils.middlePoint(geometry); 34 | // ``` 35 | 36 | // # Code 37 | 38 | // 39 | 40 | /** @namespace */ 41 | var THREEx = THREEx || {}; 42 | THREEx.GeometryUtils = THREEx.GeometryUtils || {}; 43 | 44 | // TODO 45 | // - chained API 46 | // - possibility a matrix to reduce computation ? 47 | 48 | /** 49 | * Change the scale of a geometry 50 | * 51 | * @params {THREE.Geometry} geometry the geometry to compute on 52 | * @params {THREE.Vector3} scale the middlepoint of the geometry 53 | */ 54 | THREEx.GeometryUtils.scale = function(geometry, scale) 55 | { 56 | // change all geometry.vertices 57 | for(var i = 0; i < geometry.vertices.length; i++) { 58 | var vertex = geometry.vertices[i]; 59 | vertex.position.multiplySelf(scale); 60 | } 61 | 62 | // mark the vertices as dirty 63 | geometry.__dirtyVertices = true; 64 | 65 | // return this, to get chained API 66 | return this; 67 | } 68 | 69 | THREEx.GeometryUtils.translate = function(geometry, delta) 70 | { 71 | // change all geometry.vertices 72 | for(var i = 0; i < geometry.vertices.length; i++) { 73 | var vertex = geometry.vertices[i]; 74 | vertex.position.addSelf(delta); 75 | } 76 | 77 | // mark the vertices as dirty 78 | geometry.__dirtyVertices = true; 79 | // return this, to get chained API 80 | return this; 81 | } 82 | 83 | /** 84 | * Compute the "middlePoint" aka the point at the middle of the boundingBox 85 | * 86 | * @params {THREE.Geometry} the geometry to compute on 87 | * @returns {THREE.Vector3} the middlepoint of the geometry 88 | */ 89 | THREEx.GeometryUtils.middlePoint = function(geometry) 90 | { 91 | // compute bounding box 92 | geometry.computeBoundingBox(); 93 | 94 | // compute middle 95 | var middle = new THREE.Vector3() 96 | middle.x = ( geometry.boundingBox.x[ 1 ] + geometry.boundingBox.x[ 0 ] ) / 2; 97 | middle.y = ( geometry.boundingBox.y[ 1 ] + geometry.boundingBox.y[ 0 ] ) / 2; 98 | middle.z = ( geometry.boundingBox.z[ 1 ] + geometry.boundingBox.z[ 0 ] ) / 2; 99 | 100 | // return the just computed middle 101 | return middle; 102 | } 103 | 104 | /** 105 | * Center the geometry on its middlepoint 106 | */ 107 | THREEx.GeometryUtils.center = function(geometry, noX, noY, noZ) 108 | { 109 | // compute delta 110 | var delta = this.middlePoint(geometry).negate(); 111 | if( noX ) delta.x = 0; 112 | if( noY ) delta.y = 0; 113 | if( noZ ) delta.z = 0; 114 | 115 | return this.translate(geometry, delta) 116 | } 117 | 118 | /** 119 | * Initial version of attachement 120 | * - geometry2 is the one which is moved 121 | * - TODO make something more flexible... especially on the attachement config 122 | */ 123 | THREEx.GeometryUtils.attachRightLeft = function(geometry1, geometry2, delta) 124 | { 125 | if( delta === undefined ) delta = 0; 126 | // compute bounding box 127 | geometry1.computeBoundingBox(); 128 | geometry2.computeBoundingBox(); 129 | 130 | var maxX1 = geometry1.boundingBox.x[ 1 ] 131 | var minX2 = geometry2.boundingBox.x[ 0 ]; 132 | 133 | var vector = new THREE.Vector3(); 134 | vector.x = maxX1+ (-minX2) + delta; 135 | 136 | this.translate(geometry2, vector); 137 | 138 | return this; 139 | } 140 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.GeometryWobble.js: -------------------------------------------------------------------------------- 1 | var THREEx = THREEx || {}; 2 | 3 | THREEx.GeometryWobble = {}; 4 | 5 | // Geometry Wobble 6 | // based on paul lewis / areotwist - http://lab.aerotwist.com/webgl/undulating-monkey/ 7 | 8 | 9 | THREEx.GeometryWobble.init = function(geometry) 10 | { 11 | for(var i = 0; i < geometry.vertices.length; i++){ 12 | var vertex = geometry.vertices[i]; 13 | vertex.originalPosition = vertex.position.clone(); 14 | vertex.dirVector = vertex.position.clone().normalize(); 15 | } 16 | geometry.dynamic = true; 17 | 18 | this.cpuAxis(geometry, 'y') 19 | } 20 | 21 | THREEx.GeometryWobble.cpuAxis = function(geometry, type, factor) 22 | { 23 | if( type === undefined ) type = 'x'; 24 | if( factor === undefined ) factor = 0.2; 25 | 26 | for(var i = 0; i < geometry.vertices.length; i++) { 27 | var vertex = geometry.vertices[i]; 28 | // Note: may need more axis ? 29 | if( type === 'x' ) vertex.axisValue = vertex.originalPosition.x * factor; 30 | else if( type === 'y' ) vertex.axisValue = vertex.originalPosition.y * factor; 31 | else if( type === 'z' ) vertex.axisValue = vertex.originalPosition.z * factor; 32 | else console.assert(false); 33 | } 34 | } 35 | 36 | THREEx.GeometryWobble.Animate = function(geometry, phase, magnitude) 37 | { 38 | if( phase === undefined ) phase = 0; 39 | if( magnitude === undefined ) magnitude = 0.2; 40 | 41 | if( typeof magnitude === "number" ) magnitude = new THREE.Vector3(magnitude, magnitude, magnitude) 42 | 43 | 44 | for(var i = 0; i < geometry.vertices.length; i++) { 45 | var vertex = geometry.vertices[i]; 46 | var vertexPhase = Math.cos(phase + vertex.axisValue); 47 | 48 | vertex.position.x = vertex.originalPosition.x + vertexPhase * vertex.dirVector.x * magnitude.x; 49 | vertex.position.y = vertex.originalPosition.y + vertexPhase * vertex.dirVector.y * magnitude.y; 50 | vertex.position.z = vertex.originalPosition.z + vertexPhase * vertex.dirVector.z * magnitude.z; 51 | } 52 | 53 | geometry.__dirtyVertices = true; 54 | } 55 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.KeyboardState.js: -------------------------------------------------------------------------------- 1 | // THREEx.KeyboardState.js keep the current state of the keyboard. 2 | // It is possible to query it at any time. No need of an event. 3 | // This is particularly convenient in loop driven case, like in 4 | // 3D demos or games. 5 | // 6 | // # Usage 7 | // 8 | // **Step 1**: Create the object 9 | // 10 | // ```var keyboard = new THREEx.KeyboardState();``` 11 | // 12 | // **Step 2**: Query the keyboard state 13 | // 14 | // This will return true if shift and A are pressed, false otherwise 15 | // 16 | // ```keyboard.pressed("shift+A")``` 17 | // 18 | // **Step 3**: Stop listening to the keyboard 19 | // 20 | // ```keyboard.destroy()``` 21 | // 22 | // NOTE: this library may be nice as standaline. independant from three.js 23 | // - rename it keyboardForGame 24 | // 25 | // # Code 26 | // 27 | 28 | /** @namespace */ 29 | var THREEx = THREEx || {}; 30 | 31 | /** 32 | * - NOTE: it would be quite easy to push event-driven too 33 | * - microevent.js for events handling 34 | * - in this._onkeyChange, generate a string from the DOM event 35 | * - use this as event name 36 | */ 37 | THREEx.KeyboardState = function() 38 | { 39 | // to store the current state 40 | this.keyCodes = {}; 41 | this.modifiers = {}; 42 | 43 | // create callback to bind/unbind keyboard events 44 | var self = this; 45 | this._onKeyDown = function(event){ self._onKeyChange(event, true); }; 46 | this._onKeyUp = function(event){ self._onKeyChange(event, false);}; 47 | 48 | // bind keyEvents 49 | document.addEventListener("keydown", this._onKeyDown, false); 50 | document.addEventListener("keyup", this._onKeyUp, false); 51 | } 52 | 53 | /** 54 | * To stop listening of the keyboard events 55 | */ 56 | THREEx.KeyboardState.prototype.destroy = function() 57 | { 58 | // unbind keyEvents 59 | document.removeEventListener("keydown", this._onKeyDown, false); 60 | document.removeEventListener("keyup", this._onKeyUp, false); 61 | } 62 | 63 | THREEx.KeyboardState.MODIFIERS = ['shift', 'ctrl', 'alt', 'meta']; 64 | THREEx.KeyboardState.ALIAS = { 65 | 'left' : 37, 66 | 'up' : 38, 67 | 'right' : 39, 68 | 'down' : 40, 69 | 'space' : 32, 70 | 'pageup' : 33, 71 | 'pagedown' : 34, 72 | 'tab' : 9 73 | }; 74 | 75 | /** 76 | * to process the keyboard dom event 77 | */ 78 | THREEx.KeyboardState.prototype._onKeyChange = function(event, pressed) 79 | { 80 | // log to debug 81 | //console.log("onKeyChange", event, pressed, event.keyCode, event.shiftKey, event.ctrlKey, event.altKey, event.metaKey) 82 | 83 | // update this.keyCodes 84 | var keyCode = event.keyCode; 85 | this.keyCodes[keyCode] = pressed; 86 | 87 | // update this.modifiers 88 | this.modifiers['shift']= event.shiftKey; 89 | this.modifiers['ctrl'] = event.ctrlKey; 90 | this.modifiers['alt'] = event.altKey; 91 | this.modifiers['meta'] = event.metaKey; 92 | } 93 | 94 | /** 95 | * query keyboard state to know if a key is pressed of not 96 | * 97 | * @param {String} keyDesc the description of the key. format : modifiers+key e.g shift+A 98 | * @returns {Boolean} true if the key is pressed, false otherwise 99 | */ 100 | THREEx.KeyboardState.prototype.pressed = function(keyDesc) 101 | { 102 | var keys = keyDesc.split("+"); 103 | for(var i = 0; i < keys.length; i++){ 104 | var key = keys[i]; 105 | var pressed; 106 | if( THREEx.KeyboardState.MODIFIERS.indexOf( key ) !== -1 ){ 107 | pressed = this.modifiers[key]; 108 | }else if( Object.keys(THREEx.KeyboardState.ALIAS).indexOf( key ) != -1 ){ 109 | pressed = this.keyCodes[ THREEx.KeyboardState.ALIAS[key] ]; 110 | }else { 111 | pressed = this.keyCodes[key.toUpperCase().charCodeAt(0)] 112 | } 113 | if( !pressed) return false; 114 | }; 115 | return true; 116 | } 117 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.LogoTurtle.js: -------------------------------------------------------------------------------- 1 | /** @namespace */ 2 | var THREEx = THREEx || {}; 3 | 4 | // TODO should those relative polar coord function be INSIDE path already ? 5 | 6 | THREEx.LogoTurtle = function() 7 | { 8 | this._penX = 0; 9 | this._penY = 0; 10 | this._angle = 0; 11 | this._vectors = []; 12 | } 13 | 14 | THREEx.LogoTurtle.create = function() 15 | { 16 | return new THREEx.LogoTurtle() 17 | } 18 | 19 | THREEx.LogoTurtle.prototype.turn = function(rotation) 20 | { 21 | this._angle += rotation; 22 | return this; 23 | } 24 | 25 | THREEx.LogoTurtle.prototype.moveTo = function(x, y) 26 | { 27 | this._penX = x * Math.cos(this._angle) - y * Math.sin(this._angle); 28 | this._penY = x * Math.sin(this._angle) + y * Math.cos(this._angle); 29 | this._vectors.push( new THREE.Vector2(this._penX, this._penY) ); 30 | return this; 31 | } 32 | 33 | THREEx.LogoTurtle.prototype.forward = function(distance) 34 | { 35 | this._penX += Math.cos(this._angle) * distance; 36 | this._penY += Math.sin(this._angle) * distance; 37 | 38 | this._vectors.push( new THREE.Vector2(this._penX, this._penY) ); 39 | 40 | return this; 41 | } 42 | 43 | THREEx.LogoTurtle.prototype.points = function() 44 | { 45 | return this._vectors; 46 | } 47 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.PlasmaShader.js: -------------------------------------------------------------------------------- 1 | // define namespaces 2 | var THREEx = THREEx || {}; 3 | THREEx.ShaderLib = THREEx.ShaderLib || {}; 4 | THREEx.UniformsLib = THREEx.UniformsLib || {}; 5 | 6 | THREEx.UniformsLib['plasma'] = { 7 | time : { type : "f", value: 0.0 }, 8 | scale : { type : "f", value: 1.0 }, 9 | rotation: { type : "f", value: 0.0 }, 10 | opacity : { type : "f", value: 1.0 }, 11 | 12 | c0 : { type : "f", value: 5.0 }, 13 | c1 : { type : "f", value: 3.0 }, 14 | c2 : { type : "f", value: 11.0 }, 15 | c3 : { type : "f", value: 7.0 }, 16 | c4 : { type : "f", value: 9.0 }, 17 | c5 : { type : "f", value: 3.0 } 18 | }; 19 | 20 | THREEx.ShaderLib['plasma'] = { 21 | vertexShader: [ 22 | "#ifdef GL_ES", 23 | "precision highp float;", 24 | "#endif", 25 | "varying vec2 vUv;", 26 | "void main(){", 27 | "vUv = uv;", 28 | "gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);", 29 | "}" 30 | ].join( "\n" ), 31 | fragmentShader: [ 32 | "#ifdef GL_ES", 33 | "precision highp float;", 34 | "#endif", 35 | 36 | "varying vec2 vUv;", 37 | "uniform float time;", 38 | "uniform float scale;", 39 | "uniform float rotation;", 40 | "uniform float opacity;", 41 | "uniform float c0, c1, c2, c3, c4, c5;", 42 | 43 | // todo zoom and rotation of vec2 point 44 | "vec2 rotoZoom(const vec2 point, const float scale, const float rotation){", 45 | "vec2 tmp;", 46 | "tmp.x = point.x * cos(rotation) - point.y * sin(rotation);", 47 | "tmp.y = point.x * sin(rotation) + point.y * cos(rotation);", 48 | "tmp = tmp * scale;", 49 | "return tmp;", 50 | "}", 51 | 52 | // based on THREE.Color.setHSV() 53 | // based on Mads Elvheim / Madsy http://code.google.com/p/opengl3-freenode/wiki/ColorSpaceConversions 54 | "vec3 HSVtoRGB(const vec3 color){", 55 | "float h = color.r;", 56 | "float s = color.g;", 57 | "float v = color.b;", 58 | 59 | "float i = floor(h * 6.0);", 60 | "float f = (h * 6.0) - i;", 61 | "float p = v * (1.0 - s);", 62 | "float q = v * (1.0 - f * s);", 63 | "float t = v * (1.0 - (1.0 - f) * s);", 64 | 65 | "vec3 result;", 66 | "if( i < 1.0 ) result = vec3(v,t,p);", 67 | "else if( i < 2.0 ) result = vec3(q,v,p);", 68 | "else if( i < 3.0 ) result = vec3(p,v,t);", 69 | "else if( i < 4.0 ) result = vec3(p,q,v);", 70 | "else if( i < 5.0 ) result = vec3(t,p,v);", 71 | "else if( i < 6.0 ) result = vec3(v,p,q);", 72 | "else result = vec3(v,t,p);", 73 | 74 | "return result;", 75 | "}", 76 | // default value 77 | "#ifndef ROTOZOOM", 78 | "#define ROTOZOOM 1", 79 | "#endif", 80 | "#ifndef USEHSV", 81 | "#define USEHSV 1", 82 | "#endif", 83 | 84 | "void main(){", 85 | "vec2 p = -1.0 + 2.0 * vUv;", 86 | "#if ROTOZOOM", 87 | "p = rotoZoom(p, scale, rotation);", 88 | "#endif", 89 | 90 | "float cossin1 = cos(p.x*c0+sin(time*1.3)) - sin(p.y*c3-cos(time)) + sin(time);", 91 | "float cossin2 = cos(p.y*c1+cos(c1*time/c4)) * sin(p.x*c4*sin(time)) - cos(time);", 92 | "float cossin3 = cos(p.x*c2+sin(c2*time/c5)) + sin(p.y*c5+cos(time)) + cos(time);", 93 | //"vec3 color = vec3(abs(cossin1*sin(p.x)), cossin2*sin(p.y), cossin3*sin(p.x));", 94 | "vec3 color = vec3(abs(cossin1*sin(p.x)), 0.6 - 0.4* abs(cossin2*sin(p.y)), 0.5 - 0.3*(cossin3*sin(p.x)));", 95 | 96 | "#if USEHSV", 97 | "color = HSVtoRGB(color);", 98 | "#endif", 99 | 100 | "gl_FragColor = vec4(color, opacity);", 101 | //"gl_FragColor = vec4(cossin1*sin(p.x), cossin2*sin(p.y), cossin3*sin(p.x), opacity);", 102 | "}" 103 | ].join( "\n" ) 104 | }; 105 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.SkyMap.js: -------------------------------------------------------------------------------- 1 | var THREEx = THREEx || {}; 2 | 3 | THREEx.SkyMap = {}; 4 | 5 | THREEx.SkyMap.buildMesh = function(urls, opts) 6 | { 7 | // get parameters 8 | opts = opts || {} 9 | var cubeSize = opts.cubeSize !== undefined ? opts.cubeSize : 100000; 10 | 11 | // load the cube textures 12 | var texture = THREE.ImageUtils.loadTextureCube( urls ); 13 | 14 | // init the cube shadder 15 | var shader = THREE.ShaderUtils.lib["cube"]; 16 | var uniforms = THREE.UniformsUtils.clone( shader.uniforms ); 17 | uniforms['tCube'].texture= textureCube; 18 | var material = new THREE.MeshShaderMaterial({ 19 | fragmentShader : shader.fragmentShader, 20 | vertexShader : shader.vertexShader, 21 | uniforms : uniforms 22 | }); 23 | 24 | // build the geometry 25 | var geometry = new THREE.CubeGeometry( cubeSize, cubeSize, cubeSize, 1, 1, 1, null, true ); 26 | 27 | // build the skybox Mesh 28 | var mesh = new THREE.Mesh( geometry, material ); 29 | return mesh; 30 | } 31 | 32 | /** 33 | * Build the urls array for THREEx.SkyMap.buildMesh() 34 | */ 35 | THREEx.SkyMap.UrlsPosx = function(prefix, extension) 36 | { 37 | return [ 38 | prefix + "posx" + extension, 39 | prefix + "negx" + extension, 40 | prefix + "posy" + extension, 41 | prefix + "negy" + extension, 42 | prefix + "posz" + extension, 43 | prefix + "negz" + extension 44 | ]; 45 | return urls; 46 | } 47 | 48 | /** 49 | * Build the urls array for THREEx.SkyMap.buildMesh() 50 | */ 51 | THREEx.SkyMap.UrlsPx = function(prefix, extension) 52 | { 53 | return [ 54 | prefix + "px" + extension, 55 | prefix + "nx" + extension, 56 | prefix + "py" + extension, 57 | prefix + "ny" + extension, 58 | prefix + "pz" + extension, 59 | prefix + "nz" + extension 60 | ]; 61 | return urls; 62 | } 63 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.WindowResize.js: -------------------------------------------------------------------------------- 1 | // This THREEx helper makes it easy to handle window resize. 2 | // It will update renderer and camera when window is resized. 3 | // 4 | // # Usage 5 | // 6 | // **Step 1**: Start updating renderer and camera 7 | // 8 | // ```var windowResize = THREEx.WindowResize(aRenderer, aCamera)``` 9 | // 10 | // **Step 2**: Start updating renderer and camera 11 | // 12 | // ```windowResize.stop()``` 13 | // # Code 14 | 15 | // 16 | 17 | /** @namespace */ 18 | var THREEx = THREEx || {}; 19 | 20 | /** 21 | * Update renderer and camera when the window is resized 22 | * 23 | * @param {Object} renderer the renderer to update 24 | * @param {Object} Camera the camera to update 25 | */ 26 | THREEx.WindowResize = function(renderer, camera){ 27 | var callback = function(){ 28 | // notify the renderer of the size change 29 | renderer.setSize( window.innerWidth, window.innerHeight ); 30 | // update the camera 31 | camera.aspect = window.innerWidth / window.innerHeight; 32 | camera.updateProjectionMatrix(); 33 | } 34 | // bind the resize event 35 | window.addEventListener('resize', callback, false); 36 | // return .stop() the function to stop watching window resize 37 | return { 38 | /** 39 | * Stop watching window resize 40 | */ 41 | stop : function(){ 42 | window.removeEventListener('resize', callback); 43 | } 44 | }; 45 | } 46 | 47 | THREEx.WindowResize.bind = function(renderer, camera){ 48 | return THREEx.WindowResize(renderer, camera); 49 | } 50 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.glCapability.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Define namespace 3 | */ 4 | if(typeof THREEx === "undefined") var THREEx = {}; 5 | 6 | 7 | /** 8 | * return the capability of a WebGl context 9 | * 10 | * TODO to rewrite 11 | * - heavily wased on webglreport on sourceforge 12 | * - is there other/better properties 13 | * - should i get a more readable output ? 14 | * - another function ? 15 | * 16 | * @param {WebGLRenderingContext} webgl context 17 | * @returns {Object} capabilities 18 | */ 19 | THREEx.glCapability = function(gl) 20 | { 21 | // sanity check - gl context MUST BE WebGLRenderingContext 22 | console.assert(gl instanceof WebGLRenderingContext) 23 | // TODO find better names 24 | var prout = ['VERSION', 'SHADING_LANGUAGE_VERSION', 'VENDOR', 'RENDERER']; 25 | var pixDepth = ['RED_BITS', 'GREEN_BITS', 'BLUE_BITS', 'ALPHA_BITS', 'DEPTH_BITS', 'STENCIL_BITS']; 26 | var slota = ['MAX_RENDERBUFFER_SIZE', 'MAX_COMBINED_TEXTURE_IMAGE_UNITS', 'MAX_CUBE_MAP_TEXTURE_SIZE' 27 | , 'MAX_FRAGMENT_UNIFORM_VECTORS', 'MAX_TEXTURE_IMAGE_UNITS' 28 | , 'MAX_TEXTURE_SIZE', 'MAX_VERTEX_ATTRIBS' 29 | , 'MAX_VERTEX_ATTRIBS', 'MAX_VERTEX_TEXTURE_IMAGE_UNITS' 30 | , 'MAX_VERTEX_UNIFORM_VECTORS']; 31 | var sloti = ['ALIASED_LINE_WIDTH_RANGE', 'ALIASED_POINT_SIZE_RANGE', 'MAX_VIEWPORT_DIMS']; 32 | 33 | var info = {}; 34 | var collect = function(arr){ 35 | arr.forEach(function(parameter){ 36 | //console.log('parameter', parameter) 37 | info[parameter] = gl.getParameter(gl[parameter]) 38 | }) 39 | } 40 | 41 | collect(prout); 42 | collect(pixDepth); 43 | collect(slota); 44 | collect(sloti) 45 | 46 | // special case to get the extensions 47 | info['SUPPORTED_EXTENSIONS'] = gl.getSupportedExtensions() 48 | 49 | //console.log("info"); 50 | //console.dir(info) 51 | return info; 52 | } 53 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.requestAnimationFrame.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Provides requestAnimationFrame/cancelRequestAnimation in a cross browser way. 3 | * from paul irish + jerome etienne 4 | * - http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 5 | * - http://notes.jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html 6 | */ 7 | 8 | if ( !window.requestAnimationFrame ) { 9 | 10 | window.requestAnimationFrame = ( function() { 11 | 12 | return window.webkitRequestAnimationFrame || 13 | window.mozRequestAnimationFrame || 14 | window.oRequestAnimationFrame || 15 | window.msRequestAnimationFrame || 16 | function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) { 17 | 18 | return window.setTimeout( callback, 1000 / 60 ); 19 | 20 | }; 21 | 22 | } )(); 23 | 24 | } 25 | 26 | if ( !window.cancelRequestAnimationFrame ) { 27 | 28 | window.cancelRequestAnimationFrame = ( function() { 29 | 30 | return window.webkitCancelRequestAnimationFrame || 31 | window.mozCancelRequestAnimationFrame || 32 | window.oCancelRequestAnimationFrame || 33 | window.msCancelRequestAnimationFrame || 34 | clearTimeout 35 | 36 | } )(); 37 | 38 | } 39 | -------------------------------------------------------------------------------- /vendor/threex/THREEx.screenshot.js: -------------------------------------------------------------------------------- 1 | /** @namespace */ 2 | var THREEx = THREEx || {}; 3 | 4 | // TODO http://29a.ch/2011/9/11/uploading-from-html5-canvas-to-imgur-data-uri 5 | // able to upload your screenshot without running servers 6 | 7 | // forced closure 8 | (function(){ 9 | 10 | /** 11 | * Take a screenshot of a renderer 12 | * - require WebGLRenderer to have "preserveDrawingBuffer: true" to be set 13 | * - TODO is it possible to check if this variable is set ? if so check it 14 | * and make advice in the console.log 15 | * - maybe with direct access to the gl context... 16 | * 17 | * @param {Object} renderer to use 18 | * @param {String} mimetype of the output image. default to "image/png" 19 | * @param {String} dataUrl of the image 20 | */ 21 | var toDataURL = function(renderer, mimetype) 22 | { 23 | mimetype = mimetype || "image/png"; 24 | var dataUrl = renderer.domElement.toDataURL(mimetype); 25 | return dataUrl; 26 | } 27 | 28 | /** 29 | * resize an image to another resolution while preserving aspect 30 | * 31 | * @param {String} srcUrl the url of the image to resize 32 | * @param {Number} dstWidth the destination width of the image 33 | * @param {Number} dstHeight the destination height of the image 34 | * @param {Number} callback the callback to notify once completed with callback(newImageUrl) 35 | */ 36 | var _aspectResize = function(srcUrl, dstW, dstH, callback){ 37 | // to compute the width/height while keeping aspect 38 | var cpuScaleAspect = function(maxW, maxH, curW, curH){ 39 | var ratio = curH / curW; 40 | if( curW >= maxW && ratio <= 1 ){ 41 | curW = maxW; 42 | curH = maxW * ratio; 43 | }else if(curH >= maxH){ 44 | curH = maxH; 45 | curW = maxH / ratio; 46 | } 47 | return { width: curW, height: curH }; 48 | } 49 | // callback once the image is loaded 50 | var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 51 | var onLoad = __bind(function(){ 52 | // init the canvas 53 | var canvas = document.createElement('canvas'); 54 | canvas.width = dstW; canvas.height = dstH; 55 | var ctx = canvas.getContext('2d'); 56 | 57 | // TODO is this needed 58 | ctx.fillStyle = "black"; 59 | ctx.fillRect(0, 0, canvas.width, canvas.height); 60 | 61 | // scale the image while preserving the aspect 62 | var scaled = cpuScaleAspect(canvas.width, canvas.height, image.width, image.height); 63 | 64 | // actually draw the image on canvas 65 | var offsetX = (canvas.width - scaled.width )/2; 66 | var offsetY = (canvas.height - scaled.height)/2; 67 | ctx.drawImage(image, offsetX, offsetY, scaled.width, scaled.height); 68 | 69 | // dump the canvas to an URL 70 | var mimetype = "image/png"; 71 | var newDataUrl = canvas.toDataURL(mimetype); 72 | // notify the url to the caller 73 | callback && callback(newDataUrl) 74 | }, this); 75 | 76 | // Create new Image object 77 | var image = new Image(); 78 | image.onload = onLoad; 79 | image.src = srcUrl; 80 | } 81 | 82 | 83 | // Super cooked function: THREEx.Screenshot.bindKey(renderer) 84 | // and you are done to get screenshot on your demo 85 | 86 | /** 87 | * Bind a key to renderer screenshot 88 | */ 89 | var bindKey = function(renderer, opts){ 90 | // handle parameters 91 | opts = opts || {}; 92 | var charCode = opts.charCode || 'p'.charCodeAt(0); 93 | var width = opts.width; 94 | var height = opts.height; 95 | var callback = opts.callback || function(url){ 96 | window.open(url, "name-"+Math.random()); 97 | }; 98 | 99 | // callback to handle keypress 100 | var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 101 | var onKeyPress = __bind(function(event){ 102 | // return now if the KeyPress isnt for the proper charCode 103 | if( event.which !== charCode ) return; 104 | // get the renderer output 105 | var dataUrl = this.toDataURL(renderer); 106 | 107 | if( width === undefined && height === undefined ){ 108 | callback( dataUrl ) 109 | }else{ 110 | // resize it and notify the callback 111 | // * resize == async so if callback is a window open, it triggers the pop blocker 112 | _aspectResize(dataUrl, width, height, callback); 113 | } 114 | }, this); 115 | 116 | // listen to keypress 117 | // NOTE: for firefox it seems mandatory to listen to document directly 118 | document.addEventListener('keypress', onKeyPress, false); 119 | 120 | return { 121 | unbind : function(){ 122 | document.removeEventListener('keypress', onKeyPress, false); 123 | } 124 | }; 125 | } 126 | 127 | // export it 128 | THREEx.Screenshot = { 129 | toDataURL : toDataURL, 130 | bindKey : bindKey 131 | }; 132 | })(); 133 | -------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.CelShader.html: -------------------------------------------------------------------------------- 1 | THREEx.CelShader.js
Jump To …

THREEx.CelShader.js

define namespaces

var THREEx		= THREEx || {};
 2 | THREEx.ShaderLib	= THREEx.ShaderLib	|| {};
 3 | THREEx.UniformsLib	= THREEx.UniformsLib	|| {};

cel shader from ro.me - http://www.ro.me/tech/cel-shader - Apache License 2.0

THREEx.UniformsLib['cel']	= {
 4 |       "uDirLightPos"		: { type: "v3", value: new THREE.Vector3(1,0,0) },
 5 |       "uDirLightColor"		: { type: "c" , value: new THREE.Color( 0xeeeeee ) },
 6 |       "uAmbientLightColor"	: { type: "c" , value: new THREE.Color( 0x050505 ) },
 7 |       "uBaseColor"		: { type: "c" , value: new THREE.Color( 0xff0000 ) }
 8 | };
 9 | 
10 | THREEx.ShaderLib['cel']	= {
11 | 	vertexShader:	[
12 | 		"varying vec3 vNormal;",
13 | 		"varying vec3 vRefract;",
14 | 		
15 | 		"void main() {",
16 | 		
17 | 			"vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
18 | 			"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
19 | 			"vec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );",
20 | 		      
21 | 			"vNormal = normalize( normalMatrix * normal );",
22 | 		      
23 | 			"vec3 I = mPosition.xyz - cameraPosition;",
24 | 			"vRefract = refract( normalize( I ), nWorld, 1.02 );",
25 | 		      
26 | 			"gl_Position = projectionMatrix * mvPosition;",
27 | 		
28 | 		"}"		
29 | 	].join( "\n" ),
30 | 	fragmentShader: [
31 | 		"uniform vec3 uBaseColor;",
32 | 		
33 | 		"uniform vec3 uDirLightPos;",
34 | 		"uniform vec3 uDirLightColor;",
35 | 		
36 | 		"uniform vec3 uAmbientLightColor;",
37 | 		
38 | 		"varying vec3 vNormal;",
39 | 		
40 | 		"varying vec3 vRefract;",
41 | 		
42 | 		"void main() {",
43 | 		
44 | 			"float directionalLightWeighting = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);",
45 | 			"vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;",
46 | 		      
47 | 			"float intensity = smoothstep( - 0.5, 1.0, pow( length(lightWeighting), 20.0 ) );",
48 | 			"intensity += length(lightWeighting) * 0.2;",
49 | 		      
50 | 			"float cameraWeighting = dot( normalize( vNormal ), vRefract );",
51 | 			"intensity += pow( 1.0 - length( cameraWeighting ), 6.0 );",
52 | 			"intensity = intensity * 0.2 + 0.3;",
53 | 		      
54 | 			"if ( intensity < 0.50 ) {",
55 | 		      
56 | 			  "gl_FragColor = vec4( 2.0 * intensity * uBaseColor, 1.0 );",
57 | 		      
58 | 			"} else {",
59 | 		      
60 | 			  "gl_FragColor = vec4( 1.0 - 2.0 * ( 1.0 - intensity ) * ( 1.0 - uBaseColor ), 1.0 );",
61 | 		      
62 | 			"}",
63 | 		
64 | 		"}"		
65 | 	].join( "\n" )
66 | };
67 | 
68 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.CubeMap.html: -------------------------------------------------------------------------------- 1 | THREEx.CubeMap.js
Jump To …

THREEx.CubeMap.js

var THREEx		= THREEx || {};
2 | 
3 | THREEx.Cubemap	= {};
4 | 
5 | THREEx.Cubemap.center	= function(geometry, noX, noY, noZ)
6 | {
7 | }
8 | 
9 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.DeviceOrientationState.html: -------------------------------------------------------------------------------- 1 | THREEx.DeviceOrientationState.js
Jump To …

THREEx.DeviceOrientationState.js

/** @namespace */
 2 | var THREEx	= THREEx 		|| {};
 3 | 
 4 | THREEx.DeviceOrientationState	= function()
 5 | {

to store the current state

	this._state	= { x: 0, y: 0, z: 0 };
 6 | 
 7 | 	this._$callback	= function(event){ this._onDeviceOrientation(event); }.bind(this);
 8 | 	

bind events 9 | - spec http://dev.w3.org/geo/api/spec-source-orientation.html

	window.addEventListener('deviceorientation', this._$callback);
10 | }
11 | 
12 | /**
13 |  * To stop listening of the keyboard events
14 | */
15 | THREEx.DeviceOrientationState.prototype.destroy	= function()
16 | {

unbind events

	window.removeEventListener('deviceorientation', this._$callback);
17 | }
18 | 
19 | /**
20 |  * to process the keyboard dom event
21 | */
22 | THREEx.DeviceOrientationState.prototype._onDeviceOrientation	= function(event)
23 | {
24 | 	this._state.x	= (!event.alpha ? 0 : event.alpha) * Math.PI / 180;
25 | 	this._state.y	= (!event.beta  ? 0 : event.beta ) * Math.PI / 180;
26 | 	this._state.z	= (!event.gamma ? 0 : event.gamma) * Math.PI / 180;
27 | }
28 | 
29 | 
30 | THREEx.DeviceOrientationState.prototype.angleX	= function()
31 | {
32 | 	return this._state.x;
33 | }
34 | 
35 | THREEx.DeviceOrientationState.prototype.angleY	= function()
36 | {
37 | 	return this._state.y;
38 | }
39 | 
40 | THREEx.DeviceOrientationState.prototype.angleZ	= function()
41 | {
42 | 	return this._state.z;
43 | }
44 | 
45 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.FullScreen.html: -------------------------------------------------------------------------------- 1 | THREEx.FullScreen.js
Jump To …

THREEx.FullScreen.js

This THREEx helper makes it easy to handle the fullscreen API 2 | * it hides the prefix for each browser 3 | * it hides the little discrepencies of the various vendor API 4 | * at the time of this writing (nov 2011) it is available in 5 | firefox nightly, 6 | webkit nightly and 7 | chrome stable.

Code

/** @namespace */
 8 | var THREEx		= THREEx 		|| {};
 9 | THREEx.FullScreen	= THREEx.FullScreen	|| {};
10 | 
11 | /**
12 |  * test if it is possible to have fullscreen
13 |  * 
14 |  * @returns {Boolean} true if fullscreen API is available, false otherwise
15 | */
16 | THREEx.FullScreen.available	= function()
17 | {
18 | 	return this._hasWebkitFullScreen || this._hasMozFullScreen;
19 | }
20 | 
21 | /**
22 |  * test if fullscreen is currently activated
23 |  * 
24 |  * @returns {Boolean} true if fullscreen is currently activated, false otherwise
25 | */
26 | THREEx.FullScreen.activated	= function()
27 | {
28 | 	if( this._hasWebkitFullScreen ){
29 | 		return document.webkitIsFullScreen;
30 | 	}else if( this._hasMozFullScreen ){
31 | 		return document.mozFullScreen;
32 | 	}else{
33 | 		console.assert(false);
34 | 	}
35 | }
36 | 
37 | /**
38 |  * Request fullscreen on a given element
39 |  * @param {DomElement} element to make fullscreen. optional. default to document.body
40 | */
41 | THREEx.FullScreen.request	= function(element)
42 | {
43 | 	element	= element	|| document.body;
44 | 	if( this._hasWebkitFullScreen ){
45 | 		element.webkitRequestFullScreen();
46 | 	}else if( this._hasMozFullScreen ){
47 | 		element.mozRequestFullScreen();
48 | 	}else{
49 | 		console.assert(false);
50 | 	}
51 | }
52 | 
53 | /**
54 |  * Cancel fullscreen
55 | */
56 | THREEx.FullScreen.cancel	= function()
57 | {
58 | 	if( this._hasWebkitFullScreen ){
59 | 		document.webkitCancelFullScreen();
60 | 	}else if( this._hasMozFullScreen ){
61 | 		document.mozCancelFullScreen();
62 | 	}else{
63 | 		console.assert(false);
64 | 	}
65 | }

internal functions to know which fullscreen API implementation is available

THREEx.FullScreen._hasWebkitFullScreen	= 'webkitCancelFullScreen' in document	? true : false;	
66 | THREEx.FullScreen._hasMozFullScreen	= 'mozCancelFullScreen' in document	? true : false;	
67 | 
68 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.GeometryWobble.html: -------------------------------------------------------------------------------- 1 | THREEx.GeometryWobble.js
Jump To …

THREEx.GeometryWobble.js

var THREEx		= THREEx || {};
 2 | 
 3 | THREEx.GeometryWobble	= {};

Geometry Wobble 4 | based on paul lewis / areotwist - http://lab.aerotwist.com/webgl/undulating-monkey/

THREEx.GeometryWobble.init	= function(geometry)
 5 | {
 6 | 	for(var i = 0; i < geometry.vertices.length; i++){
 7 | 		var vertex	= geometry.vertices[i];
 8 | 		vertex.originalPosition	= vertex.position.clone();
 9 | 		vertex.dirVector	= vertex.position.clone().normalize();
10 | 	}
11 | 	geometry.dynamic	= true;
12 | 	
13 | 	this.cpuAxis(geometry, 'y')
14 | }
15 | 
16 | THREEx.GeometryWobble.cpuAxis	= function(geometry, type, factor)
17 | {
18 | 	if( type === undefined )	type	= 'x';
19 | 	if( factor === undefined )	factor	= 0.2;
20 | 	
21 | 	for(var i = 0; i < geometry.vertices.length; i++) {
22 | 		var vertex	= geometry.vertices[i];

Note: may need more axis ?

		if( type === 'x' )	vertex.axisValue	= vertex.originalPosition.x * factor;
23 | 		else if( type === 'y' )	vertex.axisValue	= vertex.originalPosition.y * factor;
24 | 		else if( type === 'z' )	vertex.axisValue	= vertex.originalPosition.z * factor;
25 | 		else	console.assert(false);
26 | 	}
27 | }
28 | 
29 | THREEx.GeometryWobble.Animate	= function(geometry, phase, magnitude)
30 | {
31 | 	if( phase === undefined )	phase		= 0;
32 | 	if( magnitude === undefined )	magnitude	= 0.2;
33 | 	
34 | 	if( typeof magnitude === "number" )	magnitude	= new THREE.Vector3(magnitude, magnitude, magnitude)
35 | 
36 | 
37 | 	for(var i = 0; i < geometry.vertices.length; i++) {
38 | 		var vertex	= geometry.vertices[i];
39 | 		var vertexPhase	= Math.cos(phase + vertex.axisValue);
40 | 		
41 | 		vertex.position.x = vertex.originalPosition.x + vertexPhase * vertex.dirVector.x * magnitude.x;
42 | 		vertex.position.y = vertex.originalPosition.y + vertexPhase * vertex.dirVector.y * magnitude.y;
43 | 		vertex.position.z = vertex.originalPosition.z + vertexPhase * vertex.dirVector.z * magnitude.z;
44 | 	}
45 | 	
46 | 	geometry.__dirtyVertices = true;
47 | }
48 | 
49 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.KeyboardState.html: -------------------------------------------------------------------------------- 1 | THREEx.KeyboardState.js
Jump To …

THREEx.KeyboardState.js

THREEx.KeyboardState.js keep the current state of the keyboard. 2 | It is possible to query it at any time. No need of an event. 3 | This is particularly convenient in loop driven case, like in 4 | 3D demos or games.

5 | 6 |

Usage

7 | 8 |

Step 1: Create the object

9 | 10 |

var keyboard = new THREEx.KeyboardState();

11 | 12 |

Step 2: Query the keyboard state

13 | 14 |

This will return true if shift and A are pressed, false otherwise

15 | 16 |

keyboard.pressed("shift+A")

17 | 18 |

Step 3: Stop listening to the keyboard

19 | 20 |

keyboard.destroy()

21 | 22 |

NOTE: this library may be nice as standaline. independant from three.js 23 | - rename it keyboardForGame

24 | 25 |

Code

/** @namespace */
26 | var THREEx	= THREEx 		|| {};
27 | 
28 | /**
29 |  * - NOTE: it would be quite easy to push event-driven too
30 |  *   - microevent.js for events handling
31 |  *   - in this._onkeyChange, generate a string from the DOM event
32 |  *   - use this as event name
33 | */
34 | THREEx.KeyboardState	= function()
35 | {

to store the current state

	this.keyCodes	= {};
36 | 	this.modifiers	= {};
37 | 	

create callback to bind/unbind keyboard events

	var self	= this;
38 | 	this._onKeyDown	= function(event){ self._onKeyChange(event, true); };
39 | 	this._onKeyUp	= function(event){ self._onKeyChange(event, false);};

bind keyEvents

	document.addEventListener("keydown", this._onKeyDown, false);
40 | 	document.addEventListener("keyup", this._onKeyUp, false);
41 | }
42 | 
43 | /**
44 |  * To stop listening of the keyboard events
45 | */
46 | THREEx.KeyboardState.prototype.destroy	= function()
47 | {

unbind keyEvents

	document.removeEventListener("keydown", this._onKeyDown, false);
48 | 	document.removeEventListener("keyup", this._onKeyUp, false);
49 | }
50 | 
51 | THREEx.KeyboardState.MODIFIERS	= ['shift', 'ctrl', 'alt', 'meta'];
52 | THREEx.KeyboardState.ALIAS	= {
53 | 	'left'		: 37,
54 | 	'up'		: 38,
55 | 	'right'		: 39,
56 | 	'down'		: 40,
57 | 	'space'		: 32,
58 | 	'pageup'	: 33,
59 | 	'pagedown'	: 34,
60 | 	'tab'		: 9
61 | };
62 | 
63 | /**
64 |  * to process the keyboard dom event
65 | */
66 | THREEx.KeyboardState.prototype._onKeyChange	= function(event, pressed)
67 | {

log to debug 68 | console.log("onKeyChange", event, pressed, event.keyCode, event.shiftKey, event.ctrlKey, event.altKey, event.metaKey)

update this.keyCodes

	var keyCode		= event.keyCode;
69 | 	this.keyCodes[keyCode]	= pressed;

update this.modifiers

	this.modifiers['shift']= event.shiftKey;
70 | 	this.modifiers['ctrl']	= event.ctrlKey;
71 | 	this.modifiers['alt']	= event.altKey;
72 | 	this.modifiers['meta']	= event.metaKey;
73 | }
74 | 
75 | /**
76 |  * query keyboard state to know if a key is pressed of not
77 |  *
78 |  * @param {String} keyDesc the description of the key. format : modifiers+key e.g shift+A
79 |  * @returns {Boolean} true if the key is pressed, false otherwise
80 | */
81 | THREEx.KeyboardState.prototype.pressed	= function(keyDesc)
82 | {
83 | 	var keys	= keyDesc.split("+");
84 | 	for(var i = 0; i < keys.length; i++){
85 | 		var key		= keys[i];
86 | 		var pressed;
87 | 		if( THREEx.KeyboardState.MODIFIERS.indexOf( key ) !== -1 ){
88 | 			pressed	= this.modifiers[key];
89 | 		}else if( Object.keys(THREEx.KeyboardState.ALIAS).indexOf( key ) != -1 ){
90 | 			pressed	= this.keyCodes[ THREEx.KeyboardState.ALIAS[key] ];
91 | 		}else {
92 | 			pressed	= this.keyCodes[key.toUpperCase().charCodeAt(0)]
93 | 		}
94 | 		if( !pressed)	return false;
95 | 	};
96 | 	return true;
97 | }
98 | 
99 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.LogoTurtle.html: -------------------------------------------------------------------------------- 1 | THREEx.LogoTurtle.js
Jump To …

THREEx.LogoTurtle.js

/** @namespace */
 2 | var THREEx	= THREEx	|| {};

TODO should those relative polar coord function be INSIDE path already ?

THREEx.LogoTurtle	= function()
 3 | {
 4 | 	this._penX	= 0;
 5 | 	this._penY	= 0;
 6 | 	this._angle	= 0;
 7 | 	this._vectors	= [];
 8 | }
 9 | 
10 | THREEx.LogoTurtle.create	= function()
11 | {
12 | 	return new THREEx.LogoTurtle()
13 | }
14 | 
15 | THREEx.LogoTurtle.prototype.turn	= function(rotation)
16 | {
17 | 	this._angle	+= rotation;
18 | 	return this;	
19 | }
20 | 
21 | THREEx.LogoTurtle.prototype.moveTo	= function(x, y)
22 | {
23 | 	this._penX	= x * Math.cos(this._angle) - y * Math.sin(this._angle);
24 | 	this._penY	= x * Math.sin(this._angle) + y * Math.cos(this._angle);
25 | 	this._vectors.push( new THREE.Vector2(this._penX, this._penY) );
26 | 	return this;
27 | }
28 | 
29 | THREEx.LogoTurtle.prototype.forward	= function(distance)
30 | {
31 | 	this._penX	+= Math.cos(this._angle) * distance;
32 | 	this._penY	+= Math.sin(this._angle) * distance;
33 | 
34 | 	this._vectors.push( new THREE.Vector2(this._penX, this._penY) );	
35 | 	
36 | 	return this;
37 | }
38 | 
39 | THREEx.LogoTurtle.prototype.points	= function()
40 | {
41 | 	return this._vectors;
42 | }
43 | 
44 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.PlasmaShader.html: -------------------------------------------------------------------------------- 1 | THREEx.PlasmaShader.js
Jump To …

THREEx.PlasmaShader.js

define namespaces

var THREEx		= THREEx || {};
 2 | THREEx.ShaderLib	= THREEx.ShaderLib	|| {};
 3 | THREEx.UniformsLib	= THREEx.UniformsLib	|| {};
 4 | 
 5 | THREEx.UniformsLib['plasma']	= {
 6 | 	time	: { type : "f", value:  0.0 },
 7 | 	scale	: { type : "f", value:  1.0 },
 8 | 	rotation: { type : "f", value:  0.0 },
 9 | 	opacity	: { type : "f", value:  1.0 },
10 | 
11 | 	c0	: { type : "f", value:  5.0 },
12 | 	c1	: { type : "f", value:  3.0 },
13 | 	c2	: { type : "f", value: 11.0 },
14 | 	c3	: { type : "f", value:  7.0 },
15 | 	c4	: { type : "f", value:  9.0 },
16 | 	c5	: { type : "f", value:  3.0 }	
17 | };
18 | 
19 | THREEx.ShaderLib['plasma']	= {
20 | 	vertexShader:	[
21 | 		"#ifdef GL_ES",
22 | 			"precision highp float;",
23 | 		"#endif",
24 | 		"varying vec2 vUv;",
25 | 		"void main(){",
26 | 			"vUv	= uv;",
27 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);",
28 | 		"}"
29 | 	].join( "\n" ),
30 | 	fragmentShader: [
31 | 		"#ifdef GL_ES",
32 | 			"precision highp float;",
33 | 		"#endif",
34 | 		
35 | 		"varying vec2 vUv;",
36 | 		"uniform float time;",
37 | 		"uniform float scale;",
38 | 		"uniform float rotation;",
39 | 		"uniform float opacity;",
40 | 		"uniform float c0, c1, c2, c3, c4, c5;",

todo zoom and rotation of vec2 point

		"vec2 rotoZoom(const vec2 point, const float scale, const float rotation){",
41 | 			"vec2 tmp;",
42 | 			"tmp.x		= point.x * cos(rotation) - point.y * sin(rotation);",
43 | 			"tmp.y		= point.x * sin(rotation) + point.y * cos(rotation);",
44 | 			"tmp		= tmp * scale;",
45 | 			"return tmp;",
46 | 		"}",
47 | 		

based on THREE.Color.setHSV() 48 | based on Mads Elvheim / Madsy http://code.google.com/p/opengl3-freenode/wiki/ColorSpaceConversions

		"vec3 HSVtoRGB(const vec3 color){",
49 | 			"float h	= color.r;",
50 | 			"float s	= color.g;",
51 | 			"float v	= color.b;",
52 | 
53 | 			"float i	= floor(h * 6.0);",
54 | 			"float f	= (h * 6.0) - i;",
55 | 			"float p	= v * (1.0 - s);",
56 | 			"float q	= v * (1.0 - f * s);",
57 | 			"float t	= v * (1.0 - (1.0 - f) * s);",
58 | 
59 | 			"vec3 result;",
60 | 			"if( i < 1.0 )		result = vec3(v,t,p);",
61 | 			"else if( i < 2.0 )	result = vec3(q,v,p);",
62 | 			"else if( i < 3.0 )	result = vec3(p,v,t);",
63 | 			"else if( i < 4.0 )	result = vec3(p,q,v);",
64 | 			"else if( i < 5.0 )	result = vec3(t,p,v);",
65 | 			"else if( i < 6.0 )	result = vec3(v,p,q);",
66 | 			"else 			result = vec3(v,t,p);",
67 | 
68 | 			"return result;",
69 | 		"}",

default value

		"#ifndef ROTOZOOM",
70 | 			"#define ROTOZOOM 1",
71 | 		"#endif",
72 | 		"#ifndef USEHSV",
73 | 			"#define USEHSV 1",
74 | 		"#endif",
75 | 		
76 | 		"void main(){",
77 | 			"vec2 p		= -1.0 + 2.0 * vUv;",
78 | 			"#if ROTOZOOM",
79 | 				"p 	= rotoZoom(p, scale, rotation);",
80 | 			"#endif",
81 | 
82 | 			"float cossin1	= cos(p.x*c0+sin(time*1.3)) - sin(p.y*c3-cos(time)) + sin(time);",
83 | 			"float cossin2	= cos(p.y*c1+cos(c1*time/c4)) * sin(p.x*c4*sin(time)) - cos(time);",
84 | 			"float cossin3	= cos(p.x*c2+sin(c2*time/c5)) + sin(p.y*c5+cos(time)) + cos(time);",

"vec3 color = vec3(abs(cossin1sin(p.x)), cossin2sin(p.y), cossin3*sin(p.x));",

			"vec3 color	= vec3(abs(cossin1*sin(p.x)), 0.6 - 0.4* abs(cossin2*sin(p.y)), 0.5 - 0.3*(cossin3*sin(p.x)));",
85 | 
86 | 			"#if USEHSV",
87 | 				"color	= HSVtoRGB(color);",
88 | 			"#endif",
89 | 
90 | 			"gl_FragColor	= vec4(color, opacity);",

"gl_FragColor = vec4(cossin1sin(p.x), cossin2sin(p.y), cossin3*sin(p.x), opacity);",

		"}"
91 | 	].join( "\n" )
92 | };
93 | 
94 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.SkyMap.html: -------------------------------------------------------------------------------- 1 | THREEx.SkyMap.js
Jump To …

THREEx.SkyMap.js

var THREEx		= THREEx || {};
 2 | 
 3 | THREEx.SkyMap	= {};
 4 | 
 5 | THREEx.SkyMap.buildMesh	= function(urls, opts)
 6 | {

get parameters

	opts		= opts || {}
 7 | 	var cubeSize	= opts.cubeSize !== undefined ? opts.cubeSize	: 100000;

load the cube textures

	var texture	= THREE.ImageUtils.loadTextureCube( urls );
 8 | 	

init the cube shadder

	var shader	= THREE.ShaderUtils.lib["cube"];
 9 | 	var uniforms	= THREE.UniformsUtils.clone( shader.uniforms );
10 | 	uniforms['tCube'].texture= textureCube;
11 | 	var material = new THREE.MeshShaderMaterial({
12 | 		fragmentShader	: shader.fragmentShader,
13 | 		vertexShader	: shader.vertexShader,
14 | 		uniforms	: uniforms
15 | 	});

build the geometry

	var geometry	= new THREE.CubeGeometry( cubeSize, cubeSize, cubeSize, 1, 1, 1, null, true );

build the skybox Mesh

	var mesh	= new THREE.Mesh( geometry, material );
16 | 	return mesh;
17 | }
18 | 
19 | /**
20 |  * Build the urls array for THREEx.SkyMap.buildMesh()
21 | */
22 | THREEx.SkyMap.UrlsPosx	= function(prefix, extension)
23 | {
24 | 	return [
25 | 		prefix + "posx" + extension,
26 | 		prefix + "negx" + extension,
27 | 		prefix + "posy" + extension,
28 | 		prefix + "negy" + extension,
29 | 		prefix + "posz" + extension,
30 | 		prefix + "negz" + extension
31 | 	];
32 | 	return urls;	
33 | }
34 | 
35 | /**
36 |  * Build the urls array for THREEx.SkyMap.buildMesh()
37 | */
38 | THREEx.SkyMap.UrlsPx	= function(prefix, extension)
39 | {
40 | 	return [
41 | 		prefix + "px" + extension,
42 | 		prefix + "nx" + extension,
43 | 		prefix + "py" + extension,
44 | 		prefix + "ny" + extension,
45 | 		prefix + "pz" + extension,
46 | 		prefix + "nz" + extension
47 | 	];
48 | 	return urls;	
49 | }
50 | 
51 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.WindowResize.html: -------------------------------------------------------------------------------- 1 | THREEx.WindowResize.js
Jump To …

THREEx.WindowResize.js

This THREEx helper makes it easy to handle window resize. 2 | It will update renderer and camera when window is resized.

3 | 4 |

Usage

5 | 6 |

Step 1: Start updating renderer and camera

7 | 8 |

var windowResize = THREEx.WindowResize(aRenderer, aCamera)

9 | 10 |

Step 2: Start updating renderer and camera

11 | 12 |

windowResize.stop()

13 | 14 |

Code

/** @namespace */
15 | var THREEx	= THREEx 		|| {};
16 | 
17 | /**
18 |  * Update renderer and camera when the window is resized
19 |  * 
20 |  * @param {Object} renderer the renderer to update
21 |  * @param {Object} Camera the camera to update
22 | */
23 | THREEx.WindowResize	= function(renderer, camera){
24 | 	var callback	= function(){

notify the renderer of the size change

		renderer.setSize( window.innerWidth, window.innerHeight );

update the camera

		camera.aspect	= window.innerWidth / window.innerHeight;
25 | 		camera.updateProjectionMatrix();
26 | 	}

bind the resize event

	window.addEventListener('resize', callback, false);

return .stop() the function to stop watching window resize

	return {
27 | 		/**
28 | 		 * Stop watching window resize
29 | 		*/
30 | 		stop	: function(){
31 | 			window.removeEventListener('resize', callback);
32 | 		}
33 | 	};
34 | }
35 | 
36 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.glCapability.html: -------------------------------------------------------------------------------- 1 | THREEx.glCapability.js
Jump To …

THREEx.glCapability.js

/**
 2 |  * Define namespace
 3 | */
 4 | if(typeof THREEx === "undefined")	var THREEx	= {};
 5 | 
 6 | 
 7 | /**
 8 |  * return the capability of a WebGl context
 9 |  *
10 |  * TODO to rewrite
11 |  * - heavily wased on webglreport on sourceforge
12 |  * - is there other/better properties
13 |  * - should i get a more readable output ?
14 |  *   - another function ?
15 |  *
16 |  * @param {WebGLRenderingContext} webgl context
17 |  * @returns {Object} capabilities
18 | */
19 | THREEx.glCapability	= function(gl)
20 | {

sanity check - gl context MUST BE WebGLRenderingContext

	console.assert(gl instanceof WebGLRenderingContext)

TODO find better names

	var prout	= ['VERSION', 'SHADING_LANGUAGE_VERSION', 'VENDOR', 'RENDERER'];
21 | 	var pixDepth	= ['RED_BITS', 'GREEN_BITS', 'BLUE_BITS', 'ALPHA_BITS', 'DEPTH_BITS', 'STENCIL_BITS'];
22 | 	var slota	= ['MAX_RENDERBUFFER_SIZE', 'MAX_COMBINED_TEXTURE_IMAGE_UNITS', 'MAX_CUBE_MAP_TEXTURE_SIZE'
23 | 				, 'MAX_FRAGMENT_UNIFORM_VECTORS', 'MAX_TEXTURE_IMAGE_UNITS'
24 | 				, 'MAX_TEXTURE_SIZE', 'MAX_VERTEX_ATTRIBS'
25 | 				, 'MAX_VERTEX_ATTRIBS', 'MAX_VERTEX_TEXTURE_IMAGE_UNITS'
26 | 				, 'MAX_VERTEX_UNIFORM_VECTORS'];	
27 | 	var sloti	= ['ALIASED_LINE_WIDTH_RANGE', 'ALIASED_POINT_SIZE_RANGE', 'MAX_VIEWPORT_DIMS'];
28 | 	
29 | 	var info	= {};
30 | 	var collect	= function(arr){
31 | 		arr.forEach(function(parameter){

console.log('parameter', parameter)

			info[parameter]	= gl.getParameter(gl[parameter])
32 | 		})
33 | 	}
34 | 	
35 | 	collect(prout);
36 | 	collect(pixDepth);
37 | 	collect(slota);
38 | 	collect(sloti)
39 | 	

special case to get the extensions

	info['SUPPORTED_EXTENSIONS']	= gl.getSupportedExtensions()
40 | 	

console.log("info"); 41 | console.dir(info)

	return info;
42 | }
43 | 
44 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/THREEx.requestAnimationFrame.html: -------------------------------------------------------------------------------- 1 | THREEx.requestAnimationFrame.js
Jump To …

THREEx.requestAnimationFrame.js

/**
 2 |  * Provides requestAnimationFrame/cancelRequestAnimation in a cross browser way.
 3 |  * from paul irish + jerome etienne
 4 |  * - http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 5 |  * - http://notes.jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html
 6 |  */
 7 | 
 8 | if ( !window.requestAnimationFrame ) {
 9 | 
10 | 	window.requestAnimationFrame = ( function() {
11 | 
12 | 		return window.webkitRequestAnimationFrame ||
13 | 		window.mozRequestAnimationFrame ||
14 | 		window.oRequestAnimationFrame ||
15 | 		window.msRequestAnimationFrame ||
16 | 		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
17 | 
18 | 			return window.setTimeout( callback, 1000 / 60 );
19 | 
20 | 		};
21 | 
22 | 	} )();
23 | 
24 | }
25 | 
26 | if ( !window.cancelRequestAnimationFrame ) {
27 | 
28 | 	window.cancelRequestAnimationFrame = ( function() {
29 | 
30 | 		return window.webkitCancelRequestAnimationFrame ||
31 | 		window.mozCancelRequestAnimationFrame ||
32 | 		window.oCancelRequestAnimationFrame ||
33 | 		window.msCancelRequestAnimationFrame ||
34 | 		clearTimeout
35 | 
36 | 	} )();
37 | 
38 | }
39 | 
40 | 
-------------------------------------------------------------------------------- /vendor/threex/docs/docco.css: -------------------------------------------------------------------------------- 1 | /*--------------------- Layout and Typography ----------------------------*/ 2 | body { 3 | font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 4 | font-size: 15px; 5 | line-height: 22px; 6 | color: #252519; 7 | margin: 0; padding: 0; 8 | } 9 | a { 10 | color: #261a3b; 11 | } 12 | a:visited { 13 | color: #261a3b; 14 | } 15 | p { 16 | margin: 0 0 15px 0; 17 | } 18 | h1, h2, h3, h4, h5, h6 { 19 | margin: 0px 0 15px 0; 20 | } 21 | h1 { 22 | margin-top: 40px; 23 | } 24 | #container { 25 | position: relative; 26 | } 27 | #background { 28 | position: fixed; 29 | top: 0; left: 525px; right: 0; bottom: 0; 30 | background: #f5f5ff; 31 | border-left: 1px solid #e5e5ee; 32 | z-index: -1; 33 | } 34 | #jump_to, #jump_page { 35 | background: white; 36 | -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777; 37 | -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; 38 | font: 10px Arial; 39 | text-transform: uppercase; 40 | cursor: pointer; 41 | text-align: right; 42 | } 43 | #jump_to, #jump_wrapper { 44 | position: fixed; 45 | right: 0; top: 0; 46 | padding: 5px 10px; 47 | } 48 | #jump_wrapper { 49 | padding: 0; 50 | display: none; 51 | } 52 | #jump_to:hover #jump_wrapper { 53 | display: block; 54 | } 55 | #jump_page { 56 | padding: 5px 0 3px; 57 | margin: 0 0 25px 25px; 58 | } 59 | #jump_page .source { 60 | display: block; 61 | padding: 5px 10px; 62 | text-decoration: none; 63 | border-top: 1px solid #eee; 64 | } 65 | #jump_page .source:hover { 66 | background: #f5f5ff; 67 | } 68 | #jump_page .source:first-child { 69 | } 70 | table td { 71 | border: 0; 72 | outline: 0; 73 | } 74 | td.docs, th.docs { 75 | max-width: 450px; 76 | min-width: 450px; 77 | min-height: 5px; 78 | padding: 10px 25px 1px 50px; 79 | overflow-x: hidden; 80 | vertical-align: top; 81 | text-align: left; 82 | } 83 | .docs pre { 84 | margin: 15px 0 15px; 85 | padding-left: 15px; 86 | } 87 | .docs p tt, .docs p code { 88 | background: #f8f8ff; 89 | border: 1px solid #dedede; 90 | font-size: 12px; 91 | padding: 0 0.2em; 92 | } 93 | .pilwrap { 94 | position: relative; 95 | } 96 | .pilcrow { 97 | font: 12px Arial; 98 | text-decoration: none; 99 | color: #454545; 100 | position: absolute; 101 | top: 3px; left: -20px; 102 | padding: 1px 2px; 103 | opacity: 0; 104 | -webkit-transition: opacity 0.2s linear; 105 | } 106 | td.docs:hover .pilcrow { 107 | opacity: 1; 108 | } 109 | td.code, th.code { 110 | padding: 14px 15px 16px 25px; 111 | width: 100%; 112 | vertical-align: top; 113 | background: #f5f5ff; 114 | border-left: 1px solid #e5e5ee; 115 | } 116 | pre, tt, code { 117 | font-size: 12px; line-height: 18px; 118 | font-family: Monaco, Consolas, "Lucida Console", monospace; 119 | margin: 0; padding: 0; 120 | } 121 | 122 | 123 | /*---------------------- Syntax Highlighting -----------------------------*/ 124 | td.linenos { background-color: #f0f0f0; padding-right: 10px; } 125 | span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; } 126 | body .hll { background-color: #ffffcc } 127 | body .c { color: #408080; font-style: italic } /* Comment */ 128 | body .err { border: 1px solid #FF0000 } /* Error */ 129 | body .k { color: #954121 } /* Keyword */ 130 | body .o { color: #666666 } /* Operator */ 131 | body .cm { color: #408080; font-style: italic } /* Comment.Multiline */ 132 | body .cp { color: #BC7A00 } /* Comment.Preproc */ 133 | body .c1 { color: #408080; font-style: italic } /* Comment.Single */ 134 | body .cs { color: #408080; font-style: italic } /* Comment.Special */ 135 | body .gd { color: #A00000 } /* Generic.Deleted */ 136 | body .ge { font-style: italic } /* Generic.Emph */ 137 | body .gr { color: #FF0000 } /* Generic.Error */ 138 | body .gh { color: #000080; font-weight: bold } /* Generic.Heading */ 139 | body .gi { color: #00A000 } /* Generic.Inserted */ 140 | body .go { color: #808080 } /* Generic.Output */ 141 | body .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ 142 | body .gs { font-weight: bold } /* Generic.Strong */ 143 | body .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ 144 | body .gt { color: #0040D0 } /* Generic.Traceback */ 145 | body .kc { color: #954121 } /* Keyword.Constant */ 146 | body .kd { color: #954121; font-weight: bold } /* Keyword.Declaration */ 147 | body .kn { color: #954121; font-weight: bold } /* Keyword.Namespace */ 148 | body .kp { color: #954121 } /* Keyword.Pseudo */ 149 | body .kr { color: #954121; font-weight: bold } /* Keyword.Reserved */ 150 | body .kt { color: #B00040 } /* Keyword.Type */ 151 | body .m { color: #666666 } /* Literal.Number */ 152 | body .s { color: #219161 } /* Literal.String */ 153 | body .na { color: #7D9029 } /* Name.Attribute */ 154 | body .nb { color: #954121 } /* Name.Builtin */ 155 | body .nc { color: #0000FF; font-weight: bold } /* Name.Class */ 156 | body .no { color: #880000 } /* Name.Constant */ 157 | body .nd { color: #AA22FF } /* Name.Decorator */ 158 | body .ni { color: #999999; font-weight: bold } /* Name.Entity */ 159 | body .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ 160 | body .nf { color: #0000FF } /* Name.Function */ 161 | body .nl { color: #A0A000 } /* Name.Label */ 162 | body .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ 163 | body .nt { color: #954121; font-weight: bold } /* Name.Tag */ 164 | body .nv { color: #19469D } /* Name.Variable */ 165 | body .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ 166 | body .w { color: #bbbbbb } /* Text.Whitespace */ 167 | body .mf { color: #666666 } /* Literal.Number.Float */ 168 | body .mh { color: #666666 } /* Literal.Number.Hex */ 169 | body .mi { color: #666666 } /* Literal.Number.Integer */ 170 | body .mo { color: #666666 } /* Literal.Number.Oct */ 171 | body .sb { color: #219161 } /* Literal.String.Backtick */ 172 | body .sc { color: #219161 } /* Literal.String.Char */ 173 | body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */ 174 | body .s2 { color: #219161 } /* Literal.String.Double */ 175 | body .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ 176 | body .sh { color: #219161 } /* Literal.String.Heredoc */ 177 | body .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ 178 | body .sx { color: #954121 } /* Literal.String.Other */ 179 | body .sr { color: #BB6688 } /* Literal.String.Regex */ 180 | body .s1 { color: #219161 } /* Literal.String.Single */ 181 | body .ss { color: #19469D } /* Literal.String.Symbol */ 182 | body .bp { color: #954121 } /* Name.Builtin.Pseudo */ 183 | body .vc { color: #19469D } /* Name.Variable.Class */ 184 | body .vg { color: #19469D } /* Name.Variable.Global */ 185 | body .vi { color: #19469D } /* Name.Variable.Instance */ 186 | body .il { color: #666666 } /* Literal.Number.Integer.Long */ -------------------------------------------------------------------------------- /vendor/threex/examples/THREEx.DeviceOrientationState.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | angleX:
4 | angleY:
5 | angleZ:
6 | 7 | 18 | 19 | -------------------------------------------------------------------------------- /vendor/threex/examples/THREEx.KeyboardState.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | 14 | -------------------------------------------------------------------------------- /vendor/threex/examples/threex.embedded/noshield-host.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | dummy div 1024px height to create a scrollable page 7 |
8 | 9 | -------------------------------------------------------------------------------- /vendor/threex/examples/threex.embedded/noshield-iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | 13 | 14 | WITHOUT shielding events
15 | Click to get focus 16 | 17 | Got Focus!
18 | Now use arrow UP/DOWN and the host page will scroll as events are not shielded. 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /vendor/threex/examples/threex.embedded/withshield-host.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | dummy div 1024px height to create a scrollable page 7 |
8 | 9 | -------------------------------------------------------------------------------- /vendor/threex/examples/threex.embedded/withshield-iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | 13 | 14 | 15 | WITH shielding events
16 | 17 | Click to get focus 18 | 19 | Got Focus!
20 | now use arrow UP/DOWN and the host page won't scroll as events are shielded. 21 |
22 | 27 | 28 | -------------------------------------------------------------------------------- /vendor/threex/examples/threex.fullscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

threex.fullscreen.js demo

4 | threex.js - helpers for three.js 5 |
6 | 7 | fullscreen available ? 8 |
9 | fullscreen activated ? 10 |
11 | 12 |
13 | 14 | 15 | 16 | 17 | 35 | 36 | -------------------------------------------------------------------------------- /vendor/threex/threex.chromeWebStoreInstall.js: -------------------------------------------------------------------------------- 1 | // This THREEx helper makes it easy to handle chrome.webstore.install API. 2 | // * api description http://code.google.com/chrome/webstore/docs/inline_installation.html 3 | // * paul kinlan post on g+ https://plus.google.com/116059998563577101552/posts/c9zYiA9RdC5 4 | // 5 | // # Code 6 | 7 | // 8 | 9 | 10 | /** @namespace */ 11 | var THREEx = THREEx || {}; 12 | THREEx.ChromeWebStoreInstall = THREEx.ChromeWebStoreInstall || {}; 13 | 14 | /** 15 | * test if the API is available 16 | * @returns {Boolean} true if the API is available, false otherwise 17 | */ 18 | THREEx.ChromeWebStoreInstall.apiAvailable = function() 19 | { 20 | var available = typeof chrome !== 'undefined' && chrome.webstore && chrome.webstore.install; 21 | return available ? true : false; 22 | } 23 | 24 | /** 25 | * Test if the application is already installed 26 | * 27 | * @returns {Boolean} true if the application is installed, false otherwise 28 | */ 29 | THREEx.ChromeWebStoreInstall.isInstalled = function() 30 | { 31 | if( !this.apiAvailable() ) return false; 32 | return chrome.app.isInstalled ? true : false; 33 | } 34 | 35 | /** 36 | * Trigger an installation 37 | * @param {String} url of the application (optional) 38 | * @param {Function} callback called if installation succeed 39 | * @param {Function} callback called if installation failed 40 | */ 41 | THREEx.ChromeWebStoreInstall.install = function(url, successCallback, failureCallback) 42 | { 43 | console.assert( this.apiAvailable() ) 44 | chrome.webstore.install(url, successCallback, failureCallback); 45 | } -------------------------------------------------------------------------------- /vendor/threex/threex.embedded.js: -------------------------------------------------------------------------------- 1 | /** @namespace */ 2 | var THREEx = THREEx || {}; 3 | THREEx.Embedded = THREEx.Embedded || {}; 4 | 5 | /** 6 | * @returns {Boolean} return true if we are in a iframe, false otherwise 7 | */ 8 | THREEx.Embedded.inIFrame = function() 9 | { 10 | return window != window.top ? true : false; 11 | } 12 | 13 | /** 14 | * Prevent Arrows key event from going out of the iframe 15 | */ 16 | THREEx.Embedded.shieldArrowKeys = function() 17 | { 18 | document.addEventListener('keydown', function(event){ 19 | // if it is keydown on a arrow, prevent default 20 | if( event.keyCode >= 37 && event.keyCode <= 40 ){ 21 | event.preventDefault(); 22 | } 23 | }, true); 24 | } 25 | -------------------------------------------------------------------------------- /vendor/threex/threex.sparks.js: -------------------------------------------------------------------------------- 1 | // This THREEx helper makes it even easier to use spark.js with three.js 2 | // * FIXME This is currently only with WebGL 3 | 4 | // 5 | // # Code 6 | 7 | // 8 | 9 | var THREEx = THREEx || {}; 10 | 11 | 12 | THREEx.Sparks = function(opts) 13 | { 14 | opts = opts || {}; 15 | this._maxParticles = opts.maxParticles || console.assert(false); 16 | this._texture = opts.texture || this._buildDefaultTexture(); 17 | var counter = opts.counter || console.assert(false); 18 | 19 | var vertexIndexPool = { 20 | __pools: [], 21 | // Get a new Vector 22 | get: function() { 23 | if( this.__pools.length > 0 ) return this.__pools.pop(); 24 | console.assert(false, "pool ran out!") 25 | return null; 26 | }, 27 | // Release a vector back into the pool 28 | add: function(v){ this.__pools.push(v); } 29 | }; 30 | 31 | 32 | var particles = new THREE.Geometry(); 33 | var vertices = particles.vertices; 34 | for ( i = 0; i < this._maxParticles; i++ ) { 35 | var position = new THREE.Vector3(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY); 36 | vertices.push(new THREE.Vertex(position)); 37 | vertexIndexPool.add(i); 38 | } 39 | 40 | // to handle window resize 41 | this._$onWindowResize = this._onWindowResize.bind(this); 42 | window.addEventListener('resize', this._$onWindowResize, false); 43 | 44 | var attributes = this._attributes = { 45 | size : { type: 'f', value: [] }, 46 | aColor : { type: 'c', value: [] } 47 | }; 48 | 49 | var uniforms = this._uniforms = { 50 | texture : { type: "t", texture: this._texture }, 51 | color : { type: "c", value: new THREE.Color(0xffffff) }, 52 | sizeRatio : { type: "f", value: this._computeSizeRatio() } 53 | }; 54 | 55 | // fill attributes array 56 | var valuesSize = this._attributes.size.value; 57 | var valuesColor = this._attributes.aColor.value; 58 | for(var v = 0; v < particles.vertices.length; v++ ){ 59 | valuesSize[v] = 99; 60 | valuesColor[v] = new THREE.Color( 0x000000 ); 61 | } 62 | 63 | var material = new THREE.ShaderMaterial( { 64 | uniforms : this._uniforms, 65 | attributes : this._attributes, 66 | vertexShader : THREEx.Sparks.vertexShaderText, 67 | fragmentShader : THREEx.Sparks.fragmentShaderText, 68 | 69 | blending : THREE.AdditiveBlending, 70 | depthWrite : false, 71 | transparent : true 72 | }); 73 | 74 | this._group = new THREE.ParticleSystem( particles, material ); 75 | //this._group.dynamic = true; 76 | //this._group.sortParticles = true; // TODO is this needed ? 77 | 78 | //// EMITTER STUFF 79 | 80 | var setTargetParticle = function() { 81 | var vertexIdx = vertexIndexPool.get(); 82 | var target = { 83 | vertexIdx : vertexIdx, 84 | size : function(value){ valuesSize[vertexIdx] = value; }, 85 | color : function(){ return valuesColor[vertexIdx]; } 86 | }; 87 | return target; 88 | }; 89 | 90 | 91 | var onParticleCreated = function(particle) { 92 | var vertexIdx = particle.target.vertexIdx; 93 | // copy particle position into three.js geometry 94 | vertices[vertexIdx].position = particle.position; 95 | }; 96 | 97 | var onParticleDead = function(particle) { 98 | var vertexIdx = particle.target.vertexIdx; 99 | 100 | // Hide the particle 101 | valuesColor[vertexIdx].setHex( 0x000000 ); 102 | vertices[vertexIdx].position.set(Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY); 103 | 104 | // Mark particle system as available by returning to pool 105 | vertexIndexPool.add( vertexIdx ); 106 | }; 107 | 108 | var emitter = this._emitter = new SPARKS.Emitter(counter); 109 | 110 | emitter.addInitializer(new SPARKS.Target(null, setTargetParticle)); 111 | emitter.addCallback("created" , onParticleCreated ); 112 | emitter.addCallback("dead" , onParticleDead ); 113 | } 114 | 115 | 116 | THREEx.Sparks.prototype.destroy = function() 117 | { 118 | window.removeEventListener('resize', this._$onWindowResize); 119 | 120 | if( this._emitter.isRunning() ) this._emitter.stop(); 121 | } 122 | 123 | ////////////////////////////////////////////////////////////////////////////////// 124 | // // 125 | ////////////////////////////////////////////////////////////////////////////////// 126 | 127 | THREEx.Sparks.prototype.container = function() 128 | { 129 | return this._group; 130 | } 131 | 132 | THREEx.Sparks.prototype.emitter = function() 133 | { 134 | return this._emitter; 135 | } 136 | 137 | THREEx.Sparks.prototype.update = function() 138 | { 139 | this._group.geometry.__dirtyVertices = true; 140 | this._group.geometry.__dirtyColors = true; 141 | this._attributes.size.needsUpdate = true; 142 | this._attributes.aColor.needsUpdate = true; 143 | } 144 | 145 | ////////////////////////////////////////////////////////////////////////////////// 146 | // handle window resize // 147 | ////////////////////////////////////////////////////////////////////////////////// 148 | 149 | THREEx.Sparks.prototype._onWindowResize = function() 150 | { 151 | this._uniforms.sizeRatio.value = this._computeSizeRatio(); 152 | this._uniforms.sizeRatio.needsUpdate = true; 153 | } 154 | 155 | 156 | THREEx.Sparks.prototype._computeSizeRatio = function() 157 | { 158 | return window.innerHeight / 1024; 159 | } 160 | 161 | 162 | ////////////////////////////////////////////////////////////////////////////////// 163 | // Shader Text // 164 | ////////////////////////////////////////////////////////////////////////////////// 165 | 166 | THREEx.Sparks.vertexShaderText = [ 167 | "attribute float size;", 168 | "attribute vec4 aColor;", 169 | 170 | "uniform float sizeRatio;", 171 | 172 | "varying vec4 vColor;", 173 | 174 | "void main() {", 175 | "vec4 mvPosition= modelViewMatrix * vec4( position, 1.0 );", 176 | "gl_PointSize = size * sizeRatio * ( 150.0 / length( mvPosition.xyz ) );", 177 | "gl_Position = projectionMatrix * mvPosition;", 178 | 179 | "vColor = aColor;", 180 | "}" 181 | ].join('\n'); 182 | THREEx.Sparks.fragmentShaderText = [ 183 | "uniform vec3 color;", 184 | "uniform sampler2D texture;", 185 | 186 | "varying vec4 vColor;", 187 | 188 | "void main() {", 189 | "vec4 outColor = texture2D( texture, gl_PointCoord );", 190 | "gl_FragColor = outColor * vec4( color * vColor.xyz, 1.0 );", 191 | "}" 192 | ].join('\n'); 193 | 194 | ////////////////////////////////////////////////////////////////////////////////// 195 | // Texture // 196 | ////////////////////////////////////////////////////////////////////////////////// 197 | 198 | THREEx.Sparks.prototype._buildDefaultTexture = function(size) 199 | { 200 | size = size || 128; 201 | var canvas = document.createElement( 'canvas' ); 202 | var context = canvas.getContext( '2d' ); 203 | canvas.width = canvas.height = size; 204 | 205 | var gradient = context.createRadialGradient( canvas.width/2, canvas.height /2, 0, canvas.width /2, canvas.height /2, canvas.width /2 ); 206 | gradient.addColorStop( 0 , 'rgba(255,255,255,1)' ); 207 | gradient.addColorStop( 0.2, 'rgba(255,255,255,1)' ); 208 | gradient.addColorStop( 0.4, 'rgba(128,128,128,1)' ); 209 | gradient.addColorStop( 1 , 'rgba(0,0,0,1)' ); 210 | 211 | context.beginPath(); 212 | context.arc(size/2, size/2, size/2, 0, Math.PI*2, false); 213 | context.closePath(); 214 | 215 | context.fillStyle = gradient; 216 | //context.fillStyle = 'rgba(128,128,128,1)'; 217 | context.fill(); 218 | 219 | var texture = new THREE.Texture( canvas ); 220 | texture.needsUpdate = true; 221 | 222 | return texture; 223 | } 224 | 225 | ////////////////////////////////////////////////////////////////////////////////// 226 | // Custom initializer TODO put it elsewhere // 227 | ////////////////////////////////////////////////////////////////////////////////// 228 | 229 | THREEx.Sparks.ColorSizeInitializer = function(color, size){ 230 | this._color = color; 231 | this._size = size; 232 | } 233 | THREEx.Sparks.ColorSizeInitializer.prototype.initialize = function(emitter, particle) 234 | { 235 | if( this._color !== undefined ) particle.target.color().copy(this._color); 236 | if( this._size !== undefined ) particle.target.size(this._size); 237 | } 238 | -------------------------------------------------------------------------------- /vendor/threex/threex.texturePoolBall.js: -------------------------------------------------------------------------------- 1 | // NOTE: this match THREE namespace on purpose 2 | if(typeof THREEx === "undefined") var THREEx = {}; 3 | if(typeof THREEx.Texture === "undefined") THREEx.Texture = {}; 4 | 5 | /** 6 | */ 7 | THREEx.Texture.PoolBall = { 8 | clear : function(canvas){ 9 | var w = canvas.width; 10 | var ctx = canvas.getContext( '2d' ); 11 | clearRect(0, 0, w, w); 12 | }, 13 | /** 14 | * display the shaddow of the smiley in a texture 15 | * 16 | * @param {canvasElement} the canvas where we draw 17 | */ 18 | draw : function(canvas, textData, stripped, color){ 19 | var ctx = canvas.getContext( '2d' ); 20 | var w = canvas.width; 21 | var h = canvas.height; 22 | 23 | // base color is white 24 | ctx.save(); 25 | ctx.fillStyle = "#FFFFFF"; 26 | ctx.fillRect(0,0, w, h); 27 | ctx.restore(); 28 | 29 | ctx.save(); 30 | ctx.translate(w/2, h/2) 31 | var rectH = stripped ? h/2 : h; 32 | ctx.fillStyle = color.getContextStyle(); 33 | ctx.fillRect(-w/2,-rectH/2, w, rectH); 34 | ctx.restore(); 35 | 36 | ctx.save(); 37 | ctx.translate(w/2, h/2) 38 | ctx.fillStyle = "#FFFFFF"; 39 | var radiusW = 0.7 * w/4; 40 | var radiusH = 1.2 * h/4; 41 | ctx.fillEllipse( -radiusW/2, -radiusH/2, radiusW, radiusH); 42 | ctx.restore(); 43 | 44 | ctx.save(); 45 | ctx.translate(w/2, h/2) 46 | var textH = w/4; 47 | ctx.font = "bolder "+textH+"px Arial"; 48 | ctx.fillStyle = "#000000"; 49 | var textW = ctx.measureText(textData).width; 50 | ctx.fillText(textData, -textW/2, 0.8*textH/2); 51 | ctx.restore(); 52 | }, 53 | 54 | ////////////////////////////////////////////////////////////////////////////////// 55 | // texture helper // 56 | ////////////////////////////////////////////////////////////////////////////////// 57 | 58 | ballTexture: function( textData, stripped, color, canvasW, mapping, callback ) { 59 | var canvasDrawer = function(canvas){ 60 | THREEx.Texture.PoolBall.draw(canvas, textData, stripped, color); 61 | } 62 | return THREEx.Texture.PoolBall._buildTexture( canvasW, mapping, callback, canvasDrawer ); 63 | }, 64 | 65 | _buildTexture: function( canvasW, mapping, callback, canvasDrawer ) { 66 | canvasW = typeof canvasW !== 'undefined' ? canvasW : 64; 67 | var canvas = document.createElement('canvas'); 68 | canvas.width = canvas.height = canvasW; 69 | var texture = new THREE.Texture(canvas, mapping); 70 | 71 | canvasDrawer(canvas); 72 | 73 | texture.needsUpdate = true; 74 | if( callback ) callback( this ); 75 | return texture; 76 | }, 77 | 78 | } --------------------------------------------------------------------------------