TextureLoader.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. <h1>[name]</h1>
  12. <div class="desc">
  13. Class for loading a [page:Texture texture].
  14. This uses the [page:ImageLoader] internally for loading files.
  15. </div>
  16. <h2>Example</h2>
  17. <code>
  18. var texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
  19. // immediately use the texture for material creation
  20. var material = new THREE.MeshBasicMaterial( { map: texture } );
  21. </code>
  22. [example:webgl_geometry_cube geometry / cube]
  23. <h2>Example with Callbacks</h2>
  24. <code>
  25. // instantiate a loader
  26. var loader = new THREE.TextureLoader();
  27. // load a resource
  28. loader.load(
  29. // resource URL
  30. 'textures/land_ocean_ice_cloud_2048.jpg',
  31. // Function when resource is loaded
  32. function ( texture ) {
  33. // in this example we create the material when the texture is loaded
  34. var material = new THREE.MeshBasicMaterial( {
  35. map: texture
  36. } );
  37. },
  38. // Function called when download progresses
  39. function ( xhr ) {
  40. console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  41. },
  42. // Function called when download errors
  43. function ( xhr ) {
  44. console.error( 'An error happened' );
  45. }
  46. );
  47. </code>
  48. <h2>Constructor</h2>
  49. <h3>[name]( [page:LoadingManager manager] )</h3>
  50. <div>
  51. [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
  52. Creates a new [name].
  53. </div>
  54. <h2>Properties</h2>
  55. <h3>[property:String crossOrigin]</h3>
  56. <div>
  57. If set, assigns the [link:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes crossOrigin]
  58. attribute of the image to the value of *crossOrigin*, prior to starting the load. Default is *undefined*.
  59. </div>
  60. <h3>[property:LoadingManager manager]</h3>
  61. <div>
  62. The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
  63. </div>
  64. <h3>[property:String path]</h3>
  65. <div>The base path from which files will be loaded. See [page:.setPath]. Default is *undefined*.</div>
  66. <h3>[property:String withCredentials]</h3>
  67. <div>
  68. Whether the XMLHttpRequest uses credentials - see [page:.setWithCredentials].
  69. Default is *undefined*.
  70. </div>
  71. <h2>Methods</h2>
  72. <h3>[method:Texture load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
  73. <div>
  74. [page:String url] — the path or URL to the file. This can also be a
  75. [link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI].<br />
  76. [page:Function onLoad] — Will be called when load completes. The argument will be the loaded [page:Texture texture].<br />
  77. [page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
  78. [page:Function onError] — Will be called when load errors.<br /><br />
  79. Begin loading from the given URL and pass the fully loaded [page:Texture texture] to onLoad. The method also returns a new texture object which can directly be used for material creation.
  80. If you do it this way, the texture may pop up in your scene once the respective loading process is finished.
  81. </div>
  82. <h3>[method:null setCrossOrigin]( [page:String value] )</h3>
  83. <div>Set the [page:.crossOrigin] attribute.</div>
  84. <h3>[method:FileLoader setPath]( [page:String path] )</h3>
  85. <div>
  86. Set the base path or URL from which to load files. This can be useful if
  87. you are loading many models from the same directory.
  88. </div>
  89. <h3>[method:FileLoader setWithCredentials]( [page:Boolean value] )</h3>
  90. Whether the XMLHttpRequest uses credentials such as cookies, authorization headers or
  91. TLS client certificates. See
  92. [link:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials XMLHttpRequest.withCredentials].<br />
  93. Note that this has no effect if you are loading files locally or from the same domain.
  94. <div>
  95. <h2>Source</h2>
  96. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  97. </body>
  98. </html>