Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
Texture.html 11.1 KB
Newer Older
M
r97  
Mr.doob 已提交
1 
<!DOCTYPE html>
M
r116  
Mr.doob 已提交
2 
<html lang="zh">
M
r97  
Mr.doob 已提交
3 4 5 6 7 8 9 10 
	<head>
		<meta charset="utf-8" />
		<base href="../../../" />
		<script src="list.js"></script>
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
M
r98  
Mr.doob 已提交
11 
		<h1>纹理（[name]）</h1>
M
r97  
Mr.doob 已提交
12
M
r98  
Mr.doob 已提交
13 
		<p class="desc">创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。</p>
M
r97  
Mr.doob 已提交
14 15
M
r98  
Mr.doob 已提交
16 
		<h2>构造函数</h2>
M
r97  
Mr.doob 已提交
17 18 19 

		<h3>[name]( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )</h3>
M
r115  
Mr.doob 已提交
20 
		<h2>代码示例</h2>
M
r97  
Mr.doob 已提交
21 22 23 24 25 26 27 28 29 

		<code>
		// load a texture, set wrap mode to repeat
		var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
		texture.wrapS = THREE.RepeatWrapping;
		texture.wrapT = THREE.RepeatWrapping;
		texture.repeat.set( 4, 4 );
		</code>
M
r98  
Mr.doob 已提交
30 
		<h2>属性</h2>
M
r97  
Mr.doob 已提交
31 32 33 

		<h3>[property:Integer id]</h3>
		<p>
M
r98  
Mr.doob 已提交
34 
		只读 - 表示该纹理实例的唯一数字。
M
r97  
Mr.doob 已提交
35 36 37 38 
		</p>

		<h3>[property:String uuid]</h3>
		<p>
M
r98  
Mr.doob 已提交
39 40 
		该对象实例的[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]。
		这个值是自动分配的，因此不应当对其进行编辑。
M
r97  
Mr.doob 已提交
41 42 43 44 
		</p>

		<h3>[property:String name]</h3>
		<p>
M
r98  
Mr.doob 已提交
45 
		该对象的名称，可选，且无需唯一。默认值是一个空字符串。
M
r97  
Mr.doob 已提交
46 47 48 49 
		</p>

		<h3>[property:Image image]</h3>
		<p>
M
r98  
Mr.doob 已提交
50 51 
		一个图片对象，通常由[page:TextureLoader.load]方法创建。
		该对象可以是被three.js所支持的任意图片（例如PNG、JPG、GIF、DDS）或视频（例如MP4、OGG/OGV）格式。<br /><br />
M
r97  
Mr.doob 已提交
52
M
r98  
Mr.doob 已提交
53 54 
		要使用视频来作为纹理贴图，你需要有一个正在播放的HTML5 Video元素来作为你纹理贴图的源图像，
		并在视频播放时不断地更新这个纹理贴图。——[page:VideoTexture VideoTexture] 类会对此自动进行处理。
M
r97  
Mr.doob 已提交
55 56 57 58 
		</p>

		<h3>[property:array mipmaps]</h3>
		<p>
M
r98  
Mr.doob 已提交
59 
		用户所给定的mipmap数组（可选）。
M
r97  
Mr.doob 已提交
60 61 62 63 
		</p>

		<h3>[property:number mapping]</h3>
		<p>
M
r98  
Mr.doob 已提交
64 65 
		图像将如何应用到物体（对象）上。默认值是[page:Textures THREE.UVMapping]对象类型，
		即UV坐标将被用于纹理映射。<br />
M
r97  
Mr.doob 已提交
66
M
r98  
Mr.doob 已提交
67 
		请参阅[page:Textures texture constants]（映射模式常量）来了解其他映射类型。
M
r97  
Mr.doob 已提交
68 69 70 71 
		</p>

		<h3>[property:number wrapS]</h3>
		<p>
M
r98  
Mr.doob 已提交
72 73 74 75 76 
		这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于*U*。<br />
		默认值是[page:Textures THREE.ClampToEdgeWrapping]，即纹理边缘将被推到外部边缘的纹素。

		其它的两个选项分别是[page:Textures THREE.RepeatWrapping]和[page:Textures THREE.MirroredRepeatWrapping]。
		请参阅[page:Textures texture constants]来了解详细信息。
M
r97  
Mr.doob 已提交
77 78 79 80 
		</p>

		<h3>[property:number wrapT]</h3>
		<p>
M
r98  
Mr.doob 已提交
81 82 
		这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于*V*。<br />
		可以使用与[property:number wrapS]相同的选项。<br /><br />
M
r97  
Mr.doob 已提交
83
M
r98  
Mr.doob 已提交
84 85 86 
		请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……）时才起作用。
		宽度、高度无需相等，但每个维度的长度必须都是2的幂。
		这是WebGL中的限制，不是由three.js所限制的。
M
r97  
Mr.doob 已提交
87 88 89 90 
		</p>

		<h3>[property:number magFilter]</h3>
		<p>
M
r98  
Mr.doob 已提交
91 92 93 94 
		当一个纹素覆盖大于一个像素时，贴图将如何采样。默认值为[page:Textures THREE.LinearFilter]，
		它将获取四个最接近的纹素，并在他们之间进行双线性插值。
		另一个选项是[page:Textures THREE.NearestFilter]，它将使用最接近的纹素的值。<br />
		请参阅[page:Textures texture constants]页面来了解详细信息。
M
r97  
Mr.doob 已提交
95 96 97 98 
		</p>

		<h3>[property:number minFilter]</h3>
		<p>
M
r108  
Mr.doob 已提交
99 
		当一个纹素覆盖小于一个像素时，贴图将如何采样。默认值为[page:Textures THREE.LinearMipmapLinearFilter]，
M
r98  
Mr.doob 已提交
100 
		它将使用mipmapping以及三次线性滤镜。<br /><br />
M
r97  
Mr.doob 已提交
101
M
r98  
Mr.doob 已提交
102 
		请参阅[page:Textures texture constants]页面来了解所有可能的选项。
M
r97  
Mr.doob 已提交
103 104 105 106 
		</p>

		<h3>[property:number anisotropy]</h3>
		<p>
M
r98  
Mr.doob 已提交
107 108 109 
		沿着轴，通过具有最高纹素密度的像素的样本数。
		默认情况下，这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果，代价是需要使用更多纹理样本。
		使用[page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() 来查询GPU中各向异性的最大有效值；这个值通常是2的幂。
M
r97  
Mr.doob 已提交
110 111 112 113 
		</p>

		<h3>[property:number format]</h3>
		<p>
M
r98  
Mr.doob 已提交
114 115 
		默认值为[page:Textures THREE.RGBAFormat]，
		但[page:TextureLoader TextureLoader]将会在载入JPG图片时自动将这个值设置为[page:Textures THREE.RGBFormat]。<br /><br />
M
r97  
Mr.doob 已提交
116
M
r98  
Mr.doob 已提交
117 
		请参阅[page:Textures texture constants]页面来了解其它格式。
M
r97  
Mr.doob 已提交
118 119 
		</p>
M
r120  
Mr.doob 已提交
120 121 122 123 124 125 126 127 128 129 130 
		<h3>[property:String internalFormat]</h3>
		<p>
		The default value is obtained using a combination of [page:Texture.format .format] and
		[page:Texture.type .type].<br />

		The GPU format allows the developer to specify how the data is going to be
		stored on the GPU.<br /><br />

		See the [page:Textures texture constants] page for details regarding all supported internal formats.
		</p>
M
r97  
Mr.doob 已提交
131 132 
		<h3>[property:number type]</h3>
		<p>
M
r98  
Mr.doob 已提交
133 134 
			这个值必须与[page:Texture.format .format]相对应。默认值为[page:Textures THREE.UnsignedByteType]，
			它将会被用于绝大多数纹理格式。<br /><br />
M
r97  
Mr.doob 已提交
135
M
r98  
Mr.doob 已提交
136 
		请参阅[page:Textures texture constants]来了解其它格式。
M
r97  
Mr.doob 已提交
137 138 139 140 
		</p>

		<h3>[property:Vector2 offset]</h3>
		<p>
M
r98  
Mr.doob 已提交
141 142 143 144 145 
		纹理在单次重复时，从一开始将分别在U、V方向上偏移多少。
		这个值的范围通常在*0.0*之间*1.0*。
		请注意：这一属性是一个非常方便的修改器，仅仅影响纹理对模型上第一组UV的应用。
		如果该纹理被用于需要额外的UV集的贴图（例如一些成品材质中的aoMap或lightMap），
		这些UV必须被手动调整来实现所期望的偏移。
M
r97  
Mr.doob 已提交
146 147 148 149 
		</p>

		<h3>[property:Vector2 repeat]</h3>
		<p>
M
r98  
Mr.doob 已提交
150 151 152 153 154 155 
		纹理将在表面上，分别在U、V方向重复多少次。如果这个值在任意方向上设置为大于1，
		则对应的Wrap参数应当也被设为[page:Textures THREE.RepeatWrapping]或[page:Textures THREE.MirroredRepeatWrapping]，
		以实现所期望的平铺效果。
		请注意：这一属性是一个非常方便的修改器，仅仅影响纹理对模型上第一组UV的应用。
		如果该纹理被用于需要额外的UV集的贴图（例如一些成品材质中的aoMap或lightMap），
		这些UV必须被手动调整来实现所期望的重复。
M
r97  
Mr.doob 已提交
156 157 158 159 
		</p>

		<h3>[property:number rotation]</h3>
		<p>
M
r98  
Mr.doob 已提交
160 
		纹理将围绕中心点旋转多少度，单位为弧度（rad）。正值为逆时针方向旋转，默认值为*0*。
M
r97  
Mr.doob 已提交
161 162 163 164 
		</p>

		<h3>[property:Vector2 center]</h3>
		<p>
M
r98  
Mr.doob 已提交
165 
		旋转中心点。(0.5, 0.5)对应纹理的正中心。默认值为(0,0)，即左下角。
M
r97  
Mr.doob 已提交
166 167 168 169 
		</p>

		<h3>[property:boolean matrixAutoUpdate]</h3>
		<p>
M
r98  
Mr.doob 已提交
170 171 172 
		是否从纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、[page:Texture.rotation .rotation]和[page:Texture.center .center]属性更新纹理的UV变换矩阵（uv-transform [page:Texture.matrix .matrix]）。
		默认值为true。
		如果你要直接指定纹理的变换矩阵，请将其设为false。
M
r97  
Mr.doob 已提交
173 174 175 176 
		</p>

		<h3>[property:Matrix3 matrix]</h3>
		<p>
M
r98  
Mr.doob 已提交
177 178 179 180 181 
			纹理的UV变换矩阵。
			当纹理的[page:Texture.matrixAutoUpdate .matrixAutoUpdate]属性为true时，
			由渲染器从纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、[page:Texture.rotation .rotation]和[page:Texture.center .center]属性中进行更新。
			当[page:Texture.matrixAutoUpdate .matrixAutoUpdate]属性为false时，该矩阵可以被手动设置。
			默认值为单位矩阵。
M
r97  
Mr.doob 已提交
182 183 184 185 
		</p>

		<h3>[property:boolean generateMipmaps]</h3>
		<p>
M
r98  
Mr.doob 已提交
186 187 
			是否为纹理生成mipmap（如果可用）。默认为true。
			如果你手动生成mipmap，请将其设为false。
M
r97  
Mr.doob 已提交
188 189 190 191 
		</p>

		<h3>[property:boolean premultiplyAlpha]</h3>
		<p>
M
r120  
Mr.doob 已提交
192 
		If set to *true*, the alpha channel, if present, is multiplied into the color channels when the texture is uploaded to the GPU. Default is *false*.<br /><br />
M
r108  
Mr.doob 已提交
193 194 195 

		Note that this property has no effect for [link:https://developer.mozilla.org/de/docs/Web/API/ImageBitmap ImageBitmap].
		You need to configure on bitmap creation instead. See [page:ImageBitmapLoader].
M
r97  
Mr.doob 已提交
196 197 198 199 
		</p>

		<h3>[property:boolean flipY]</h3>
		<p>
M
r108  
Mr.doob 已提交
200 201 
		If set to *true*, the texture is flipped along the vertical axis when uploaded to the GPU. Default is *true*.<br /><br />
M
r104  
Mr.doob 已提交
202 203 
		Note that this property has no effect for [link:https://developer.mozilla.org/de/docs/Web/API/ImageBitmap ImageBitmap].
		You need to configure on bitmap creation instead. See [page:ImageBitmapLoader].
M
r97  
Mr.doob 已提交
204 205 206 207 
		</p>

		<h3>[property:number unpackAlignment]</h3>
		<p>
M
r98  
Mr.doob 已提交
208 209 210 
			默认为4。指定内存中每个像素行起点的对齐要求。
			允许的值为1（字节对齐）、2（行对齐到偶数字节）、4（字对齐）和8（行从双字边界开始）。
			请参阅[link:http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml glPixelStorei]来了解详细信息。
M
r97  
Mr.doob 已提交
211 212 213 214 
		</p>

		<h3>[property:number encoding]</h3>
		<p>
M
r98  
Mr.doob 已提交
215 216 
		默认值为[page:Textures THREE.LinearEncoding]。
		请参阅[page:Textures texture constants]来了解其他格式的详细信息。<br /><br />
M
r97  
Mr.doob 已提交
217
M
r98  
Mr.doob 已提交
218 219 
		请注意，如果在材质被使用之后，纹理贴图中这个值发生了改变，
		需要触发Material.needsUpdate，来使得这个值在着色器中实现。
M
r97  
Mr.doob 已提交
220 221 222 223 
		</p>

		<h3>[property:Integer version]</h3>
		<p>
M
r98  
Mr.doob 已提交
224 
		这个值起始值为*0*，计算[property:Boolean needsUpdate]被设置为*true*的次数。
M
r97  
Mr.doob 已提交
225 226 227 228 
		</p>

		<h3>[property:Function onUpdate]</h3>
		<p>
M
r98  
Mr.doob 已提交
229 230 
		一个回调函数，在纹理被更新后调用。
		（例如，当needsUpdate被设为true且纹理被使用。）
M
r97  
Mr.doob 已提交
231 232 233 234 
		</p>

		<h3>[property:Boolean needsUpdate]</h3>
		<p>
M
r98  
Mr.doob 已提交
235 236 
			将其设置为*true*，以便在下次使用纹理时触发一次更新。
			这对于设置包裹模式尤其重要。
M
r97  
Mr.doob 已提交
237 238 239 
		</p>
M
r98  
Mr.doob 已提交
240 
		<h2>方法</h2>
M
r97  
Mr.doob 已提交
241
M
r98  
Mr.doob 已提交
242 
		<h3>[page:EventDispatcher EventDispatcher]方法在这个类上可以使用。</h3>
M
r97  
Mr.doob 已提交
243 244 245 

		<h3>[method:null updateMatrix]()</h3>
		<p>
M
r98  
Mr.doob 已提交
246 247 
			从纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、
			[page:Texture.rotation .rotation]和[page:Texture.center .center]属性来更新纹理的UV变换矩阵（uv-transform [page:Texture.matrix .matrix]）。
M
r97  
Mr.doob 已提交
248 249 250 251 
		</p>

		<h3>[method:Texture clone]()</h3>
		<p>
M
r98  
Mr.doob 已提交
252 
			拷贝纹理。请注意。这不是“深拷贝”，图像是共用的。
M
r97  
Mr.doob 已提交
253 254 
		</p>
M
r108  
Mr.doob 已提交
255 
		<h3>[method:Object toJSON]( [param:Object meta] )</h3>
M
r97  
Mr.doob 已提交
256 
		<p>
M
r98  
Mr.doob 已提交
257 
		meta -- 可选，包含有元数据的对象。<br />
M
r108  
Mr.doob 已提交
258 
		将Texture对象转换为 three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format]（three.js JSON 物体/场景格式）。
M
r97  
Mr.doob 已提交
259 260 261 262 
		</p>

		<h3>[method:null dispose]()</h3>
		<p>
M
r102  
Mr.doob 已提交
263 
			使用“废置”事件类型调用[page:EventDispatcher EventDispatcher].dispatchEvent。
M
r97  
Mr.doob 已提交
264 265 266 267 
		</p>

		<h3>[method:Vector2 transformUv]( [param:Vector2 uv] )</h3>
		<p>
M
r98  
Mr.doob 已提交
268 269 
			基于纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、
			[page:Texture.wrapS .wrapS]、[page:Texture.wrapT .wrapT]和[page:Texture.flipY .flipY]属性值来变换uv。
M
r97  
Mr.doob 已提交
270 271 
		</p>
M
r98  
Mr.doob 已提交
272 
		<h2>源代码</h2>
M
r97  
Mr.doob 已提交
273
M
r108  
Mr.doob 已提交
274 275 276 
		<p>
			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
		</p>
M
r97  
Mr.doob 已提交
277 278 
	</body>
</html>