|
|
<!DOCTYPE html>
|
|
|
<html lang="zh">
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<base href="../../../" />
|
|
|
<script src="page.js"></script>
|
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
|
|
</head>
|
|
|
<body>
|
|
|
<h1>纹理（[name]）</h1>
|
|
|
|
|
|
<p class="desc">创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。</p>
|
|
|
|
|
|
|
|
|
<h2>构造函数</h2>
|
|
|
|
|
|
<h3>[name]( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, colorSpace )</h3>
|
|
|
|
|
|
<h2>代码示例</h2>
|
|
|
|
|
|
<code>
|
|
|
// load a texture, set wrap mode to repeat
|
|
|
const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
|
|
|
texture.wrapS = THREE.RepeatWrapping;
|
|
|
texture.wrapT = THREE.RepeatWrapping;
|
|
|
texture.repeat.set( 4, 4 );
|
|
|
</code>
|
|
|
|
|
|
<h2>属性</h2>
|
|
|
|
|
|
<h3>[property:Integer id]</h3>
|
|
|
<p>
|
|
|
只读 - 表示该纹理实例的唯一数字。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Boolean isTexture]</h3>
|
|
|
<p>
|
|
|
只读属性，用于检查给定对象是否为[name]类型。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:String uuid]</h3>
|
|
|
<p>
|
|
|
该对象实例的[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]。
|
|
|
这个值是自动分配的，因此不应当对其进行编辑。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:String name]</h3>
|
|
|
<p>
|
|
|
该对象的名称，可选，且无需唯一。默认值是一个空字符串。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Image image]</h3>
|
|
|
<p>
|
|
|
一个图片对象，通常由[page:TextureLoader.load]方法创建。
|
|
|
该对象可以是被three.js所支持的任意图片（例如PNG、JPG、GIF、DDS）或视频（例如MP4、OGG/OGV）格式。<br /><br />
|
|
|
|
|
|
要使用视频来作为纹理贴图，你需要有一个正在播放的HTML5 Video元素来作为你纹理贴图的源图像，
|
|
|
并在视频播放时不断地更新这个纹理贴图。——[page:VideoTexture VideoTexture] 类会对此自动进行处理。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Array mipmaps]</h3>
|
|
|
<p>
|
|
|
用户所给定的mipmap数组（可选）。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number mapping]</h3>
|
|
|
<p>
|
|
|
图像将如何应用到物体（对象）上。默认值是[page:Textures THREE.UVMapping]对象类型，
|
|
|
即UV坐标将被用于纹理映射。<br />
|
|
|
|
|
|
请参阅[page:Textures texture constants]（映射模式常量）来了解其他映射类型。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Integer channel]</h3>
|
|
|
<p>
|
|
|
选择uv名来映射纹理。默认值为`0`。
|
|
|
`0` 即为 `uv`, `1` 即为 `uv1`, `2` 即为 `uv2` and `3` 即为 `uv3`.
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number wrapS]</h3>
|
|
|
<p>
|
|
|
这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于*U*。<br />
|
|
|
默认值是[page:Textures THREE.ClampToEdgeWrapping]，即纹理边缘将被推到外部边缘的纹素。
|
|
|
|
|
|
其它的两个选项分别是[page:Textures THREE.RepeatWrapping]和[page:Textures THREE.MirroredRepeatWrapping]。
|
|
|
请参阅[page:Textures texture constants]来了解详细信息。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number wrapT]</h3>
|
|
|
<p>
|
|
|
这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于*V*。<br />
|
|
|
可以使用与[property:number wrapS]相同的选项。<br /><br />
|
|
|
|
|
|
请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……）时才起作用。
|
|
|
宽度、高度无需相等，但每个维度的长度必须都是2的幂。
|
|
|
这是WebGL中的限制，不是由three.js所限制的。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number magFilter]</h3>
|
|
|
<p>
|
|
|
当一个纹素覆盖大于一个像素时，贴图将如何采样。默认值为[page:Textures THREE.LinearFilter]，
|
|
|
它将获取四个最接近的纹素，并在他们之间进行双线性插值。
|
|
|
另一个选项是[page:Textures THREE.NearestFilter]，它将使用最接近的纹素的值。<br />
|
|
|
请参阅[page:Textures texture constants]页面来了解详细信息。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number minFilter]</h3>
|
|
|
<p>
|
|
|
当一个纹素覆盖小于一个像素时，贴图将如何采样。默认值为[page:Textures THREE.LinearMipmapLinearFilter]，
|
|
|
它将使用mipmapping以及三次线性滤镜。<br /><br />
|
|
|
|
|
|
请参阅[page:Textures texture constants]页面来了解所有可能的选项。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number anisotropy]</h3>
|
|
|
<p>
|
|
|
沿着轴，通过具有最高纹素密度的像素的样本数。
|
|
|
默认情况下，这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果，代价是需要使用更多纹理样本。
|
|
|
使用[page:WebGLRenderer.capabilities renderer.capabilities.getMaxAnisotropy]() 来查询GPU中各向异性的最大有效值；这个值通常是2的幂。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number format]</h3>
|
|
|
<p>
|
|
|
默认值为[page:Textures THREE.RGBAFormat]。<br /><br />
|
|
|
|
|
|
请参阅[page:Textures texture constants]页面来了解其它格式。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:String internalFormat]</h3>
|
|
|
<p>
|
|
|
此项的默认值由[page:Texture.format .format]和[page:Texture.type .type]混合并决定。<br />
|
|
|
|
|
|
这项GPU格式设置允许开发者决定在GPU中的数据存储方式。<br /><br />
|
|
|
查看[page:Textures texture constants]页面来了解所有可用的Internal Formats以及其细节。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number type]</h3>
|
|
|
<p>
|
|
|
这个值必须与[page:Texture.format .format]相对应。默认值为[page:Textures THREE.UnsignedByteType]，
|
|
|
它将会被用于绝大多数纹理格式。<br /><br />
|
|
|
|
|
|
请参阅[page:Textures texture constants]来了解其它格式。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Vector2 offset]</h3>
|
|
|
<p>
|
|
|
贴图单次重复中的起始偏移量，分别表示U和V。
|
|
|
一般范围是由`0.0`到`1.0`。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Vector2 repeat]</h3>
|
|
|
<p>
|
|
|
决定纹理在表面的重复次数，两个方向分别表示U和V，如果重复次数在任何方向上设置了超过1的数值，
|
|
|
对应的Wrap需要设置为[page:Textures THREE.RepeatWrapping]或者[page:Textures THREE.MirroredRepeatWrapping]来
|
|
|
达到想要的平铺效果。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number rotation]</h3>
|
|
|
<p>
|
|
|
纹理将围绕中心点旋转多少度，单位为弧度（rad）。正值为逆时针方向旋转，默认值为*0*。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Vector2 center]</h3>
|
|
|
<p>
|
|
|
旋转中心点。(0.5, 0.5)对应纹理的正中心。默认值为(0,0)，即左下角。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Boolean matrixAutoUpdate]</h3>
|
|
|
<p>
|
|
|
是否从纹理的[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。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Matrix3 matrix]</h3>
|
|
|
<p>
|
|
|
纹理的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时，该矩阵可以被手动设置。
|
|
|
默认值为单位矩阵。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Boolean generateMipmaps]</h3>
|
|
|
<p>
|
|
|
是否为纹理生成mipmap（如果可用）。默认为true。
|
|
|
如果你手动生成mipmap，请将其设为false。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Boolean premultiplyAlpha]</h3>
|
|
|
<p>
|
|
|
如果设置为*true*并且alpha通道存在的话，上传到GPU时alpha的数值将会与颜色通道的数值相乘。默认为*false*。<br /><br />
|
|
|
|
|
|
注意此项属性不会影响到[link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap ImageBitmap]。
|
|
|
如果你想要则需要在bitmap创建的时候进行配置，如何配置请查看[page:ImageBitmapLoader]。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Boolean flipY]</h3>
|
|
|
<p>
|
|
|
如果设置为*true*，纹理在上传到GPU的时候会进行纵向的翻转。默认值为*true*。<br /><br />
|
|
|
|
|
|
注意此项属性不会影响到[link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap ImageBitmap]。
|
|
|
如果你想要则需要在bitmap创建的时候进行配置，如何配置请查看[page:ImageBitmapLoader]。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:number unpackAlignment]</h3>
|
|
|
<p>
|
|
|
默认为4。指定内存中每个像素行起点的对齐要求。
|
|
|
允许的值为1（字节对齐）、2（行对齐到偶数字节）、4（字对齐）和8（行从双字边界开始）。
|
|
|
请参阅[link:http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml glPixelStorei]来了解详细信息。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:string colorSpace]</h3>
|
|
|
<p>
|
|
|
默认值为[page:Textures THREE.NoColorSpace]。
|
|
|
请参阅[page:Textures texture constants]来了解其他格式的详细信息。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Integer version]</h3>
|
|
|
<p>
|
|
|
这个值起始值为*0*，计算[property:Boolean needsUpdate]被设置为*true*的次数。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Function onUpdate]</h3>
|
|
|
<p>
|
|
|
一个回调函数，在纹理被更新后调用。
|
|
|
（例如，当needsUpdate被设为true且纹理被使用。）
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Boolean needsUpdate]</h3>
|
|
|
<p>
|
|
|
将其设置为*true*，以便在下次使用纹理时触发一次更新。
|
|
|
这对于设置包裹模式尤其重要。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Object userData]</h3>
|
|
|
<p>
|
|
|
保存关于纹理的自定义信息的对象。不应该放函数引用，因为函数不会拷贝。
|
|
|
</p>
|
|
|
|
|
|
<h3>[property:Source source]</h3>
|
|
|
<p>
|
|
|
纹理的数据源信息。可以在不同的纹理之间引用相同的数据源，这在使用精灵表的情况下很好用，因为在这种情况下不同的纹理只是使用了不同的偏移，但是其数据源是相同的。
|
|
|
</p>
|
|
|
|
|
|
<h2>方法</h2>
|
|
|
|
|
|
<p>[page:EventDispatcher EventDispatcher]方法在这个类上可以使用。</p>
|
|
|
|
|
|
<h3>[method:undefined updateMatrix]()</h3>
|
|
|
<p>
|
|
|
从纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、
|
|
|
[page:Texture.rotation .rotation]和[page:Texture.center .center]属性来更新纹理的UV变换矩阵（uv-transform [page:Texture.matrix .matrix]）。
|
|
|
</p>
|
|
|
|
|
|
<h3>[method:Texture clone]()</h3>
|
|
|
<p>
|
|
|
拷贝纹理。请注意。这不是“深拷贝”，图像是共用的。
|
|
|
除此之外，拷贝一个纹理并不会将此纹理自动标记并上传。你需要在图片的属性变更或者源数据完全加载完的时候并准备好的时候将[page:Texture.needsUpdate]设置为true。
|
|
|
</p>
|
|
|
|
|
|
<h3>[method:Object toJSON]( [param:Object meta] )</h3>
|
|
|
<p>
|
|
|
meta -- 可选，包含有元数据的对象。<br />
|
|
|
将Texture对象转换为 three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format]（three.js JSON 物体/场景格式）。
|
|
|
</p>
|
|
|
|
|
|
<h3>[method:undefined dispose]()</h3>
|
|
|
<p>
|
|
|
使用“废置”事件类型调用[page:EventDispatcher EventDispatcher].dispatchEvent。
|
|
|
</p>
|
|
|
|
|
|
<h3>[method:Vector2 transformUv]( [param:Vector2 uv] )</h3>
|
|
|
<p>
|
|
|
基于纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、
|
|
|
[page:Texture.wrapS .wrapS]、[page:Texture.wrapT .wrapT]和[page:Texture.flipY .flipY]属性值来变换uv。
|
|
|
</p>
|
|
|
|
|
|
<h2>源代码</h2>
|
|
|
|
|
|
<p>
|
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
|
|
</p>
|
|
|
</body>
|
|
|
</html>
|