CubeTextureLoader.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CubeTextureLoader - Three.js Docs</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <script src="../scripts/highlight.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
  9. <link type="text/css" rel="stylesheet" href="../styles/page.css">
  10. </head>
  11. <body>
  12. <p class="inheritance" translate="no"><a href="Loader.html">Loader</a> → </p>
  13. <h1 translate="no">CubeTextureLoader</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>Class for loading cube textures. Images are internally loaded via <a href="ImageLoader.html">ImageLoader</a>.</p>
  17. <p>The loader returns an instance of <a href="CubeTexture.html">CubeTexture</a> and expects the cube map to
  18. be defined as six separate images representing the sides of a cube. Other cube map definitions
  19. like vertical and horizontal cross, column and row layouts are not supported.</p>
  20. <p>Note that, by convention, cube maps are specified in a coordinate system
  21. in which positive-x is to the right when looking up the positive-z axis --
  22. in other words, using a left-handed coordinate system. Since three.js uses
  23. a right-handed coordinate system, environment maps used in three.js will
  24. have pos-x and neg-x swapped.</p>
  25. <p>The loaded cube texture is in sRGB color space. Meaning <a href="Texture.html#colorSpace">Texture#colorSpace</a>
  26. is set to <code>SRGBColorSpace</code> by default.</p></div>
  27. <h2>Code Example</h2>
  28. <div translate="no"><pre><code class="language-js">const loader = new THREE.CubeTextureLoader().setPath( 'textures/cubeMaps/' );
  29. const cubeTexture = await loader.loadAsync( [
  30. 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'
  31. ] );
  32. scene.background = cubeTexture;
  33. </code></pre></div>
  34. </header>
  35. <article>
  36. <div class="container-overview">
  37. <h2>Constructor</h2>
  38. <h3 class="name name-method" id="CubeTextureLoader" translate="no">new <a href="#CubeTextureLoader">CubeTextureLoader</a><span class="signature">( manager : <span class="param-type"><a href="LoadingManager.html">LoadingManager</a></span> )</span> </h3>
  39. <div class="method">
  40. <div class="description">
  41. <p>Constructs a new cube texture loader.</p>
  42. </div>
  43. <table class="params">
  44. <tbody>
  45. <tr>
  46. <td class="name">
  47. <strong>manager</strong>
  48. </td>
  49. <td class="description last">
  50. <p>The loading manager.</p>
  51. </td>
  52. </tr>
  53. </tbody>
  54. </table>
  55. </div>
  56. </div>
  57. <h2 class="subsection-title">Methods</h2>
  58. <h3 class="name name-method" id="load" translate="no">.<a href="#load">load</a><span class="signature">( urls : <span class="param-type">Array.&lt;string></span>, onLoad : <span class="param-type">function</span>, onProgress : <span class="param-type"><a href="global.html#onProgressCallback">onProgressCallback</a></span>, onError : <span class="param-type"><a href="global.html#onErrorCallback">onErrorCallback</a></span> )</span><span class="type-signature"> : <a href="CubeTexture.html">CubeTexture</a></span> </h3>
  59. <div class="method">
  60. <div class="description">
  61. <p>Starts loading from the given URL and pass the fully loaded cube texture
  62. to the <code>onLoad()</code> callback. The method also returns a new cube texture object which can
  63. directly be used for material creation. If you do it this way, the cube texture
  64. may pop up in your scene once the respective loading process is finished.</p>
  65. </div>
  66. <table class="params">
  67. <tbody>
  68. <tr>
  69. <td class="name">
  70. <strong>urls</strong>
  71. </td>
  72. <td class="description last">
  73. <p>Array of 6 URLs to images, one for each side of the
  74. cube texture. The urls should be specified in the following order: pos-x,
  75. neg-x, pos-y, neg-y, pos-z, neg-z. An array of data URIs are allowed as well.</p>
  76. </td>
  77. </tr>
  78. <tr>
  79. <td class="name">
  80. <strong>onLoad</strong>
  81. </td>
  82. <td class="description last">
  83. <p>Executed when the loading process has been finished.</p>
  84. </td>
  85. </tr>
  86. <tr>
  87. <td class="name">
  88. <strong>onProgress</strong>
  89. </td>
  90. <td class="description last">
  91. <p>Unsupported in this loader.</p>
  92. </td>
  93. </tr>
  94. <tr>
  95. <td class="name">
  96. <strong>onError</strong>
  97. </td>
  98. <td class="description last">
  99. <p>Executed when errors occur.</p>
  100. </td>
  101. </tr>
  102. </tbody>
  103. </table>
  104. <dl class="details">
  105. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="Loader.html#load">Loader#load</a></dt>
  106. </dl>
  107. <dl class="details">
  108. <dt class="tag-returns"><strong>Returns:</strong> The cube texture.</dt>
  109. </dl>
  110. </div>
  111. <h2 class="subsection-title">Source</h2>
  112. <p>
  113. <a href="https://github.com/mrdoob/three.js/blob/master/src/loaders/CubeTextureLoader.js" translate="no" target="_blank" rel="noopener">src/loaders/CubeTextureLoader.js</a>
  114. </p>
  115. </article>
  116. </section>
  117. <script src="../scripts/linenumber.js"></script>
  118. <script src="../scripts/page.js"></script>
  119. </body>
  120. </html>
粤ICP备19079148号