UI.three.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. // Texture
  2. UI.Texture = function ( position ) {
  3. UI.Element.call( this );
  4. var scope = this;
  5. this.texture = new THREE.Texture();
  6. this.dom = document.createElement( 'input' );
  7. this.dom.type = 'file';
  8. this.dom.style.position = position || 'relative';
  9. this.dom.style.marginTop = '-2px';
  10. this.dom.style.marginLeft = '-2px';
  11. this.onChangeCallback = null;
  12. this.dom.addEventListener( 'change', function ( event ) {
  13. var file = event.target.files[ 0 ];
  14. if ( file.type.match( 'image.*' ) ) {
  15. var reader = new FileReader();
  16. reader.addEventListener( 'load', function ( event ) {
  17. var image = document.createElement( 'img' );
  18. image.addEventListener( 'load', function( event ) {
  19. scope.texture.image = this;
  20. scope.texture.needsUpdate = true;
  21. if ( scope.onChangeCallback ) scope.onChangeCallback();
  22. }, false );
  23. image.src = event.target.result;
  24. }, false );
  25. reader.readAsDataURL( file );
  26. }
  27. }, false );
  28. return this;
  29. };
  30. UI.Texture.prototype = Object.create( UI.Element.prototype );
  31. UI.Texture.prototype.getValue = function () {
  32. return this.texture;
  33. };
  34. UI.Texture.prototype.setValue = function ( value ) {
  35. this.texture = value;
  36. };
  37. UI.Texture.prototype.onChange = function ( callback ) {
  38. this.onChangeCallback = callback;
  39. return this;
  40. };
  41. // CubeTexture
  42. UI.CubeTexture = function ( position ) {
  43. UI.Element.call( this );
  44. var scope = this;
  45. this.texture = new THREE.Texture( [], new THREE.CubeReflectionMapping() );
  46. this.dom = document.createElement( 'input' );
  47. this.dom.type = 'file';
  48. this.dom.style.position = position || 'relative';
  49. this.dom.style.marginTop = '-2px';
  50. this.dom.style.marginLeft = '-2px';
  51. this.onChangeCallback = null;
  52. this.dom.addEventListener( 'change', function ( event ) {
  53. var file = event.target.files[ 0 ];
  54. if ( file.type.match( 'image.*' ) ) {
  55. var reader = new FileReader();
  56. reader.addEventListener( 'load', function ( event ) {
  57. var image = document.createElement( 'img' );
  58. image.addEventListener( 'load', function( event ) {
  59. scope.texture.image = [ this, this, this, this, this, this ];
  60. scope.texture.needsUpdate = true;
  61. if ( scope.onChangeCallback ) scope.onChangeCallback();
  62. }, false );
  63. image.src = event.target.result;
  64. }, false );
  65. reader.readAsDataURL( file );
  66. }
  67. }, false );
  68. return this;
  69. };
  70. UI.CubeTexture.prototype = Object.create( UI.Element.prototype );
  71. UI.CubeTexture.prototype.getValue = function () {
  72. return this.texture;
  73. };
  74. UI.CubeTexture.prototype.setValue = function ( value ) {
  75. this.texture = value;
  76. };
  77. UI.CubeTexture.prototype.onChange = function ( callback ) {
  78. this.onChangeCallback = callback;
  79. return this;
  80. };