├── LICENSE ├── Makefile ├── README.md ├── TODO.md ├── examples ├── basic.html ├── drawImage.html ├── drawTextCooked.html ├── dynamictext2dobject.html ├── images │ └── screenshot-threex-dynamictexture-512x512.jpg └── vendor │ └── three.js │ └── build │ └── three.js ├── package.require.js ├── threex.dynamictext2dobject.js └── threex.dynamictexture.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Jerome Etienne 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | threex.dynamictexture 2 | ===================== 3 | 4 | threex.dynamictexture is a [threex game extension for three.js](http://www.threejsgames.com/extensions/). It provides an easy way to handle dynamically generated texture. 5 | Inspiration came from 6 | the excelent [babylon.js](http://www.babylonjs.com) 7 | which got 8 | [BABYLON.DynamicTexture](https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Materials/textures/babylon.dynamicTexture.js). 9 | It is mainly used to write text in texture. Say you got a character which says something, you may want to put that in a texture and display that above your character. threex.dynamictexture will make it easy for you. 10 | 11 | Show Don't Tell 12 | =============== 13 | * [examples/basic.html](http://jeromeetienne.github.io/threex.dynamictexture/examples/basic.html) 14 | \[[view source](https://github.com/jeromeetienne/threex.dynamictexture/blob/master/examples/basic.html)\] : 15 | It shows this feature, and that one which is coded like that. 16 | * [examples/drawTextCooked.html](http://jeromeetienne.github.io/threex.dynamictexture/examples/drawTextCooked.html) 17 | \[[view source](https://github.com/jeromeetienne/threex.dynamictexture/blob/master/examples/drawTextCooked.html)\] : 18 | It shows ```.drawTextCooked``` function 19 | * [examples/drawImage.html](http://jeromeetienne.github.io/threex.dynamictexture/examples/drawImage.html) 20 | \[[view source](https://github.com/jeromeetienne/threex.dynamictexture/blob/master/examples/drawImage.html)\] : 21 | It shows ```.drawImage``` function 22 | 23 | 24 | 25 | A Screenshot 26 | ============ 27 | [![screenshot](https://raw.githubusercontent.com/jeromeetienne/threex.dynamictexture/master/examples/images/screenshot-threex-dynamictexture-512x512.jpg)](http://jeromeetienne.github.io/threex.dynamictexture/examples/basic.html) 28 | 29 | How To Install It 30 | ================= 31 | 32 | You can install it manually or with 33 | [bower](http://bower.io/). 34 | for the manual version, first include ```threex.dynamictexture.js``` with the usual 35 | 36 | ```html 37 | 38 | ``` 39 | 40 | or with 41 | [bower](http://bower.io/) 42 | you type the following to install the package. 43 | 44 | ```bash 45 | bower install threex.dynamictexture 46 | ``` 47 | 48 | then you add that in your html 49 | 50 | ```html 51 | 52 | ``` 53 | 54 | How To Use It ? 55 | =============== 56 | 57 | You instanciate the texture, say it is 512 pixel width, and 512 pixel high. 58 | ``` 59 | var dynamicTexture = new THREEx.DynamicTexture(512,512) 60 | ``` 61 | 62 | * ```dynamicTexture.canvas``` the underlying canvas 63 | * ```dynamicTexture.context``` the context of the underlying canvas 64 | * ```dynamicTexture.texture``` the ```THREE.Texture``` created 65 | 66 | 67 | To use the texture on a ```THREE.Material``` 68 | 69 | ```javascript 70 | var geometry = new THREE.CubeGeometry( 1, 1, 1); 71 | var material = new THREE.MeshBasicMaterial({ 72 | map : dynamicTexture.texture 73 | }) 74 | var mesh = new THREE.Mesh( geometry, material ); 75 | scene.add( mesh ); 76 | ``` 77 | 78 | When you update a texture be sure to do 79 | 80 | ```javascript 81 | dynamicTexture.texture.needsUpdate = true 82 | ``` 83 | 84 | ## Helpers Functions 85 | Some helpers functions are provided to draw in this canvas. 86 | 87 | **To clear the underlying canvas** 88 | 89 | ``` 90 | dynamicTexture.clear(); 91 | ``` 92 | 93 | **To Draw a Text** 94 | to draw a text 95 | 96 | ``` 97 | dynamicTexture.drawText('Hello', 32, 256, 'red') 98 | ``` 99 | **To Draw a Image** 100 | to draw an image, build an Image element and call this function. the arguments 101 | are the same as the official function 102 | 103 | ``` 104 | var image = document.createElement('img') 105 | image.src = 'image.jpg' 106 | dynamicTexture.drawBackground(image, 0, 0) 107 | ``` 108 | -------------------------------------------------------------------------------- /TODO.md: -------------------------------------------------------------------------------- 1 | ## TODO 2 | 3 | - expose parameters to tune 4 | - store them in threex.DynamicText2DObject.parameters 5 | - DONE remove the (text) arguments 6 | - which parameter to tune ? 7 | - why am i blocked on this 8 | - expose in .parameters 9 | - all parameters from dynamicTexture.drawTextCooked 10 | - if the function arguments aren't good enougth, fix it there 11 | - some parameters are in ```