1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Texture] →
<h1>[name]</h1>
<p class="desc">Creates a texture for use with a video.</p>
<p>
Note: After the initial use of a texture, the video cannot be changed.
Instead, call [page:.dispose]() on the texture and instantiate a new one.
</p>
<h2>Code Example</h2>
<code>
// assuming you have created a HTML video element with id="video"
const video = document.getElementById( 'video' );
const texture = new THREE.VideoTexture( video );
</code>
<h2>Examples</h2>
<p>
[example:webgl_materials_video materials / video]<br />
[example:webgl_materials_video_webcam materials / video / webcam]<br />
[example:webgl_video_kinect video / kinect]<br />
[example:webgl_video_panorama_equirectangular video / panorama / equirectangular]<br />
[example:webxr_vr_video vr / video]
</p>
<h2>Constructor</h2>
<h3>
[name]( [param:Video video], [param:Constant mapping], [param:Constant wrapS],
[param:Constant wrapT], [param:Constant magFilter], [param:Constant minFilter],
[param:Constant format], [param:Constant type], [param:Number anisotropy] )
</h3>
<p>
[page:Video video] -- The video element to use as the texture. <br />
[page:Constant mapping] -- How the image is applied to the object. An
object type of [page:Textures THREE.UVMapping].
See [page:Textures mapping constants] for other choices.<br />
[page:Constant wrapS] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for
other choices.<br />
[page:Constant wrapT] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for
other choices.<br />
[page:Constant magFilter] -- How the texture is sampled when a texel
covers more than one pixel. The default is [page:Textures THREE.LinearFilter].
See [page:Textures magnification filter constants]
for other choices.<br />
[page:Constant minFilter] -- How the texture is sampled when a texel
covers less than one pixel. The default is [page:Textures THREE.LinearFilter].
See [page:Textures minification filter constants] for
other choices.<br />
[page:Constant format] -- The default is [page:Textures THREE.RGBAFormat].
See [page:Textures format constants] for other choices.<br />
[page:Constant type] -- Default is [page:Textures THREE.UnsignedByteType].
See [page:Textures type constants] for other choices.<br />
[page:Number anisotropy] -- The number of samples taken along the axis
through the pixel that has the highest density of texels. 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. 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 />
</p>
<h2>Properties</h2>
<p>See the base [page:Texture Texture] class for common properties.</p>
<h3>[property:Boolean generateMipmaps]</h3>
<p>Whether to generate mipmaps. `false` by default.</p>
<h3>[property:Boolean isVideoTexture]</h3>
<p>Read-only flag to check if a given object is of type [name].</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
You will not need to set this manually here as it is handled by the
[page:VideoTexture.update update]() method.
</p>
<h2>Methods</h2>
<p>See the base [page:Texture Texture] class for common methods.</p>
<h3>[method:undefined update]()</h3>
<p>
This is called automatically and sets [page:VideoTexture.needsUpdate .needsUpdate]
to `true` every time a new frame is available.
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>