UI.three.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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.onChange = function ( callback ) {
  35. this.onChangeCallback = callback;
  36. return this;
  37. };