Texture.html 6.7 KB
Newer Older
M
r66  
Mr.doob 已提交
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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<script src="../../list.js"></script>
		<script src="../../page.js"></script>
		<link type="text/css" rel="stylesheet" href="../../page.css" />
	</head>
	<body>
		<h1>[name]</h1>

		<div class="desc">Create a texture to apply to a surface or as a reflection or refraction map.</div>


		<h2>Constructor</h2>

		<h3>[name]( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )</h3>

		<h2>Example</h2>

		<code>
		// load a texture, set wrap mode to repeat
		var texture = THREE.ImageUtils.loadTexture( "textures/water.jpg" );
		texture.wrapS = THREE.RepeatWrapping;
		texture.wrapT = THREE.RepeatWrapping;
		texture.repeat.set( 4, 4 );
		</code>

		<h2>Properties</h2>

M
r69  
Mr.doob 已提交
31 32 33 34 35 36
		<h3>[property:Integer id]</h3>
		<div>
		Unique number for this texture instance.
		</div>

		<h3>[property:Image image]</h3>
M
r66  
Mr.doob 已提交
37 38 39 40
		<div>
		An Image object, typically created using the ImageUtils or [page:ImageLoader ImageLoader] classes. The Image object can include an image (e.g., PNG, JPG, GIF, DDS), video (e.g., MP4, OGG/OGV), or set of six images for a cube map. To use video as a texture you need to have a playing HTML5 video element as a source for your texture image and continuously update this texture as long as video is playing.
		</div>

M
r69  
Mr.doob 已提交
41
		<h3>[property:object mapping]</h3>
M
r66  
Mr.doob 已提交
42
		<div>
M
r70  
Mr.doob 已提交
43
		How the image is applied to the object. An object type of THREE.UVMapping is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; and THREE.SphericalReflectionMapping, a spherical reflection map projection.
M
r66  
Mr.doob 已提交
44 45
		</div>

M
r69  
Mr.doob 已提交
46
		<h3>[property:number wrapS]</h3>
M
r66  
Mr.doob 已提交
47 48 49 50
		<div>
		The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
		</div>

M
r69  
Mr.doob 已提交
51
		<h3>[property:number wrapT]</h3>
M
r66  
Mr.doob 已提交
52 53 54
		<div>
		The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
		</div>
M
r70  
Mr.doob 已提交
55 56 57 58
		
		<div>
		NOTE: tiling of images in textures only functions if image dimensions are powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels. Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL, not Three.js.
		</div>
M
r66  
Mr.doob 已提交
59

M
r69  
Mr.doob 已提交
60
		<h3>[property:number magFilter]</h3>
M
r66  
Mr.doob 已提交
61 62 63 64
		<div>
		How the texture is sampled when a texel covers more than one pixel. The default is THREE.LinearFilter, which takes the four closest texels and bilinearly interpolates among them. The other option is THREE.NearestFilter, which uses the value of the closest texel.
		</div>

M
r69  
Mr.doob 已提交
65
		<h3>[property:number minFilter]</h3>
M
r66  
Mr.doob 已提交
66 67 68 69
		<div>
		How the texture is sampled when a texel covers less than one pixel. The default is THREE.LinearMipMapLinearFilter, which uses mipmapping and a trilinear filter. Other choices are THREE.NearestFilter, THREE.NearestMipMapNearestFilter, THREE.NearestMipMapLinearFilter, THREE.LinearFilter, and THREE.LinearMipMapNearestFilter. These vary whether the nearest texel or nearest four texels are retrieved on the nearest mipmap or nearest two mipmaps. Interpolation occurs among the samples retrieved.
		</div>

M
r69  
Mr.doob 已提交
70
		<h3>[property:number format]</h3>
M
r66  
Mr.doob 已提交
71 72 73 74
		<div>
		The default is THREE.RGBAFormat for the texture. Other formats are: THREE.AlphaFormat, THREE.RGBFormat, THREE.LuminanceFormat, and THREE.LuminanceAlphaFormat. There are also compressed texture formats, if the S3TC extension is supported: THREE.RGB_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT3_Format, and THREE.RGBA_S3TC_DXT5_Format.
		</div>

M
r69  
Mr.doob 已提交
75
		<h3>[property:number type]</h3>
M
r66  
Mr.doob 已提交
76 77 78 79
		<div>
		The default is THREE.UnsignedByteType. Other valid types (as WebGL allows) are THREE.ByteType, THREE.ShortType, THREE.UnsignedShortType, THREE.IntType, THREE.UnsignedIntType, THREE.FloatType, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type, and THREE.UnsignedShort565Type.
		</div>

M
r69  
Mr.doob 已提交
80
		<h3>[property:number anisotropy]</h3>
M
r66  
Mr.doob 已提交
81 82 83 84
		<div>
		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 renderer.getMaxAnisotropy() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.
		</div>

M
r69  
Mr.doob 已提交
85
		<h3>[property:boolean needsUpdate]</h3>
M
r66  
Mr.doob 已提交
86 87 88 89
		<div>
		If a texture is changed after creation, set this flag to true so that the texture is properly set up. Particularly important for setting the wrap mode.
		</div>

M
r69  
Mr.doob 已提交
90
		<h3>[property:Vector2 repeat]</h3>
M
r66  
Mr.doob 已提交
91 92 93 94
		<div>
		How many times the texture is repeated across the surface, in each direction U and V.
		</div>

M
r69  
Mr.doob 已提交
95
		<h3>[property:Vector2 offset]</h3>
M
r66  
Mr.doob 已提交
96 97 98 99
		<div>
		How much a single repetition of the texture is offset from the beginning, in each direction U and V. Typical range is 0.0 to 1.0.
		</div>

M
r69  
Mr.doob 已提交
100
		<h3>[property:string name]</h3>
M
r66  
Mr.doob 已提交
101 102 103 104
		<div>
		Given name of the texture, empty string by default.
		</div>

M
r69  
Mr.doob 已提交
105
		<h3>[property:boolean generateMipmaps]</h3>
M
r66  
Mr.doob 已提交
106 107 108 109
		<div>
		Whether to generate mipmaps (if possible) for a texture. True by default.
		</div>

M
r69  
Mr.doob 已提交
110
		<h3>[property:boolean flipY]</h3>
M
r66  
Mr.doob 已提交
111
		<div>
M
r70  
Mr.doob 已提交
112
		True by default. Flips the image's Y axis to match the WebGL texture coordinate space.
M
r66  
Mr.doob 已提交
113 114
		</div>

M
r69  
Mr.doob 已提交
115
		<h3>[property:array mipmaps]</h3>
M
r66  
Mr.doob 已提交
116 117 118 119
		<div>
		Array of mipmaps generated.
		</div>

M
r69  
Mr.doob 已提交
120
		<h3>[property:number unpackAlignment]</h3>
M
r66  
Mr.doob 已提交
121 122 123 124
		<div>
		4 by default. Specifies the alignment requirements for the start of each pixel row in memory. The allowable values are 1 (byte-alignment), 2 (rows aligned to even-numbered bytes), 4 (word-alignment), and 8 (rows start on double-word boundaries). See <a href="http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml">glPixelStorei</a> for more information.
		</div>

M
r69  
Mr.doob 已提交
125
		<h3>[property:boolean premultiplyAlpha]</h3>
M
r66  
Mr.doob 已提交
126 127 128 129
		<div>
		False by default, which is the norm for PNG images. Set to true if the RGB values have been stored premultiplied by alpha.
		</div>

M
r69  
Mr.doob 已提交
130
		<h3>[property:object onUpdate]</h3>
M
r66  
Mr.doob 已提交
131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
		<div>
		A callback function, called when the texture is updated (e.g., when needsUpdate has been set to true and then the texture is used).
		</div>


		<h2>Methods</h2>

		<h3>[page:EventDispatcher EventDispatcher] methods are available on this class.</h3>

		<h3>.clone([page:Texture texture])</h3>
		<div>
		Make copy of texture. Note this is not a "deep copy", the image is shared.
		</div>

		<h3>.dispose()</h3>
		<div>
		Call [page:EventDispatcher EventDispatcher].dispatchEvent with a 'dispose' event type.
		</div>

		<h2>Source</h2>

		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
	</body>
</html>