VideoTexture.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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. [page:Texture] &rarr;
  12. <h1>[name]</h1>
  13. <div class="desc">
  14. Creates a texture for use with a video texture.<br /><br />
  15. This is almost the same as the base [page:Texture Texture] class,
  16. except that it continuosly sets [page:Texture.needsUpdate needsUpdate] to *true*
  17. (using <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a>)
  18. so that the texture is updated as the video plays. Automatic creation of [page:Texture.mipmaps mipmaps]
  19. is also disabled.
  20. </div>
  21. <h2>Example</h2>
  22. <div>[example:webgl_materials_video materials / video ]</div>
  23. <code>
  24. //assuming you have created a HTML video element with id="video"
  25. var video = document.getElementById( 'video' );
  26. var texture = new THREE.VideoTexture( video );
  27. texture.minFilter = THREE.LinearFilter;
  28. texture.magFilter = THREE.LinearFilter;
  29. texture.format = THREE.RGBFormat;
  30. </code>
  31. <h2>Constructor</h2>
  32. <h3>[name]( [page:Video video], [page:Constant mapping], [page:Constant wrapS], [page:Constant wrapT], [page:Constant magFilter], [page:Constant minFilter], [page:Constant format], [page:Constant type], [page:Number anisotropy] )</h3>
  33. <div>
  34. [page:Video video] -- The video element to use as the texture. <br />
  35. [page:Constant mapping] -- How the image is applied to the object. An object type of [page:Textures THREE.UVMapping].
  36. See [page:Textures mapping constants] for other choices.<br />
  37. [page:Constant wrapS] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
  38. See [page:Textures wrap mode constants] for other choices.<br />
  39. [page:Constant wrapT] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
  40. See [page:Textures wrap mode constants] for other choices.<br />
  41. [page:Constant magFilter] -- How the texture is sampled when a texel covers more than one pixel.
  42. The default is [page:Textures THREE.LinearFilter]. See [page:Textures magnification filter constants] for other choices.<br />
  43. [page:Constant minFilter] -- How the texture is sampled when a texel covers less than one pixel.
  44. The default is [page:Textures THREE.LinearMipMapLinearFilter]. See [page:Textures minification filter constants] for other choices.<br />
  45. [page:Constant format] -- The format used in the texture.
  46. See [page:Textures format constants] for other choices.<br />
  47. [page:Constant type] -- Default is [page:Textures THREE.UnsignedByteType].
  48. See [page:Textures type constants] for other choices.<br />
  49. [page:Number anisotropy] -- The number of samples taken along the axis through the pixel that has the highest density of texels.
  50. By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used.
  51. Use [page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.<br /><br />
  52. </div>
  53. <h2>Properties</h2>
  54. <div>
  55. See the base [page:Texture Texture] class for common properties.
  56. </div>
  57. <h3>[property:boolean needsUpdate]</h3>
  58. <div>
  59. You will not need to set this manually here as it is handled by the [page:VideoTexture.update update] method.
  60. </div>
  61. <h2>Methods</h2>
  62. <div>
  63. See the base [page:Texture Texture] class for common methods.
  64. </div>
  65. <h3>[method:null update]()</h3>
  66. <div>
  67. This is called automatically and sets [property:boolean needsUpdate] to *true* every time
  68. a new frame is available.
  69. </div>
  70. <h2>Source</h2>
  71. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  72. </body>
  73. </html>