1
0

TextureLoader.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. [page:Loader] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. Class for loading a [page:Texture texture]. This uses the
  14. [page:ImageLoader] internally for loading files.
  15. </p>
  16. <h2>Code Example</h2>
  17. <code>
  18. const texture = new THREE.TextureLoader().load('textures/land_ocean_ice_cloud_2048.jpg' );
  19. // immediately use the texture for material creation
  20. const material = new THREE.MeshBasicMaterial( { map:texture } );
  21. </code>
  22. <h2>Code Example with Callbacks</h2>
  23. <code>
  24. // instantiate a loader
  25. const loader = new THREE.TextureLoader();
  26. // load a resource
  27. loader.load(
  28. // resource URL
  29. 'textures/land_ocean_ice_cloud_2048.jpg',
  30. // onLoad callback
  31. function ( texture ) {
  32. // in this example we create the material when the texture is loaded
  33. const material = new THREE.MeshBasicMaterial( {
  34. map: texture
  35. } );
  36. },
  37. // onProgress callback currently not supported
  38. undefined,
  39. // onError callback
  40. function ( err ) {
  41. console.error( 'An error happened.' );
  42. }
  43. );
  44. </code>
  45. <p>
  46. Please note three.js r84 dropped support for TextureLoader progress
  47. events. For a TextureLoader that supports progress events, see
  48. [link:https://github.com/mrdoob/three.js/issues/10439#issuecomment-293260145 this thread].
  49. </p>
  50. <h2>Examples</h2>
  51. <p>[example:webgl_geometry_cube geometry / cube]</p>
  52. <h2>Constructor</h2>
  53. <h3>[name]( [param:LoadingManager manager] )</h3>
  54. <p>
  55. [page:LoadingManager manager] — The [page:LoadingManager loadingManager]
  56. for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
  57. Creates a new [name].
  58. </p>
  59. <h2>Properties</h2>
  60. <p>See the base [page:Loader] class for common properties.</p>
  61. <h2>Methods</h2>
  62. <p>See the base [page:Loader] class for common methods.</p>
  63. <h3>
  64. [method:Texture load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )
  65. </h3>
  66. <p>
  67. [page:String url] — the path or URL to the file. This can also be a
  68. [link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI].<br />
  69. [page:Function onLoad] (optional) — Will be called when load completes.
  70. The argument will be the loaded [page:Texture texture].<br />
  71. [page:Function onProgress] (optional) — This callback function is
  72. currently not supported.<br />
  73. [page:Function onError] (optional) — Will be called when load errors.<br /><br />
  74. Begin loading from the given URL and pass the fully loaded [page:Texture texture]
  75. to onLoad. The method also returns a new texture object which can
  76. directly be used for material creation. If you do it this way, the texture
  77. may pop up in your scene once the respective loading process is finished.
  78. </p>
  79. <h2>Source</h2>
  80. <p>
  81. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  82. </p>
  83. </body>
  84. </html>