Texture 纹理

当在材质 Material 里仅设置 color, 你只会但到单一的一种颜色. 若希望材质再丰富起来, 便可用上 map 属性, 传达给她的是通过 TextureLoader.load() 下载下来的图像. 纹理就是在材质上设置贴图. 为达到最佳效果, 最好使用边长为2的n次方的正方形的图片, 如 256×256、512×512、1024×1024. 纹理使网格拥有了不同的颜色. 为什么图像可以正好的贴在 几何模型中呢? 是根据UV贴图, 告诉渲染器将纹理的某一部分贴在指定的面上, 在网格点与点之间的间隙位置根据插值算法进行填充. 如下面演示, 把一张 2048 × 1024 的长方形图片, 精确的贴在了一个圆球 SphereGeometry 上, 展现了一个在旋转的地球. UV贴图四个顶点的坐标是 (0, 1), (0, 0), (1, 0), (1, 1).

当使用构造函数 Texture(), 里面的第一个参数可以是 Html 里的 img 标签对象, 可以为 H5 的 canvas 标签对象, 也可以是通过 TextureLoader().load() 下来的 image, 更可以是 H5 的 video 标签对象. 关键是当素材加载完毕后, 把 needsUpdate 设为 true. 如果想偷懒, 可以直接使用子类, 默认的是 needsUpdate = true.

当使用 TextureLoader.load(), 请转到 TextureLoader.

function Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) { } // canvas var canvasTexture = new THREE.Texture( createCanvas() ); canvasTexture.needsUpdate = true; function createCanvas(){ var canvas = document.createElement( "canvas" ), context = canvas.getContext( "2d" ); canvas.width = canvas.height = 512; context.fillStyle = "rgb(100, 20, 140)"; context.fillRect(0, 0, 512,512); context.translate(300, 80); for(var i = 0; i < 80; i++){ context.transform(0.95, 0, 0, 0.95, 40, 40); context.rotate(Math.PI/12); context.fillStyle = "#ee6688"; context.beginPath(); context.arc(0, 0, 20, 0, Math.PI*2, true); context.closePath(); context.fill(); }; return canvas; }; // img var image = createImg(); var imgTexture = new THREE.Texture( image ); function createImg(){ var image = document.createElement('img'); image.src = '---.jpg'; image.onload = function(){ imgTexture.needsUpdate = true; }; return image; } // video var video = createVideo(); var videoTexture = new THREE.Texture( video ); videoTexture.minFilter = THREE.LinearFilter; videoTexture.format = THREE.RGBFormat; function createVideo(){ var video = document.createElement('video'); video.crossOrigin = 'anonymous'; video.width = 550; video.heigth = 450; video.src = '---.mp4'; video.play(); var interval = setInterval( function () { if ( video.readyState >= video.HAVE_CURRENT_DATA ) { videoTexture.needsUpdate = true; interval = clearInterval(); } }, 100 ); return video; } var circleMaterial = new THREE.MeshStandardMaterial( { map: canvasTexture, side: THREE.DoubleSide }), sphereMaterial = new THREE.MeshPhongMaterial( { map: imgTexture}), planeMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, side: THREE.DoubleSide });

Attributes

name : String

Default value : ''
Description : 名称。

isTexture : Boolean

Default value : true (只读)
Description : 类型是否为Texture.

image : Image

Default value : Texture.DEFAULT_IMAGE
Description : 通过 TextureLoader.load() 下载下来的图像或视频. 图像可以是 PNG, JPG, GIF, DDS 格式, 视频则为 MP4, OGG/OGV.

mipmaps : Array

Default value : []
Description : 多级纹理:一组纹理图片, 每个图片的尺寸都是前一张图片的一半, 即原图的1/2, 1/4, 1/8. 这些图片是在加载纹理时创建, 可以生产比较光滑的滤镜效果.

mapping : Integer

Default value : THREE.UVMapping
Description : 物体如何展示图像.
共有这几种 THREE.UVMapping, THREE.CubeReflectionMapping, THREE.CubeRefractionMapping, THREE.EquirectangularReflectionMapping, THREE.EquirectangularRefractionMapping, THREE.SphericalReflectionMapping, THREE.CubeUVReflectionMapping, THREE.CubeUVRefractionMapping

wrapS : Integer

Default value : THREE.ClampToEdgeWrapping
Description : 纹理在水平方向与 UV 中的 U 的映射方式.
共有这几种 THREE.ClampToEdgeWrapping, THREE.RepeatWrapping, THREE.MirroredRepeatWrapping

wrapT : Integer

Default value : THREE.ClampToEdgeWrapping
Description : 纹理在垂直方向与 UV 中的 V 的映射方式.
共有这几种 THREE.ClampToEdgeWrapping, THREE.RepeatWrapping, THREE.MirroredRepeatWrapping

magFilter : Integer ( THREE.NearestFilter, THREE.LinearFilter )

Default value : THREE.LinearFilter
Description : 放大滤镜, 纹理如何放大.

minFilter : Integer

Default value : THREE.LinearMipMapLinearFilter
Description : 缩小滤镜, 纹理如何缩小.
共有这几种 THREE.NearestFilter, THREE.NearestMipMapNearestFilter, THREE.NearestMipMapLinearFilter, THREE.LinearFilter, THREE.LinearMipMapNearestFilter, THREE.LinearMipMapLinearFilter

format : Integer

Default value : THREE.RGBAFormat
Description : 对纹理中的每个元素的读取格式.
共有这几种 THREE.AlphaFormat, THREE.RGBFormat, THREE.RGBAFormat, THREE.LuminanceFormat, THREE.LuminanceAlphaFormat, THREE.RGBEFormat, THREE.DepthFormat, THREE.DepthStencilFormat

type : Integer

Default value : THREE.UnsignedByteType
Description : 类型.
共有这几种 THREE.UnsignedByteType, THREE.ByteType, THREE.ShortType, THREE.UnsignedShortType, THREE.IntType, THREE.UnsignedIntType, THREE.FloatType, THREE.HalfFloatType, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type, THREE.UnsignedShort565Type, THREE.UnsignedInt248Type

anisotropy : Float

Default value : 1
Description : 各向异性, 沿着轴穿过具有最高纹素密度的像素的样本数. 默认值为1, 较高的值比基本的 mipmap 提供的模糊结果更少, 但代价是使用了更多纹理样本.

encoding : Integer

Default value : THREE.LinearEncoding
Description : 编码方式, 如果当材质使用后它改变了, 材质得 needsUpdate().
共有这几种 THREE.LinearEncoding, THREE.sRGBEncoding, THREE.GammaEncoding, THREE.RGBEEncoding, THREE.LogLuvEncoding, THREE.RGBM7Encoding, THREE.RGBM16Encoding, THREE.RGBDEncoding, THREE.BasicDepthPacking, THREE.RGBADepthPacking

center : Vector2

Default value : new Vector2( 0, 0 )
Description : 旋转中心点.

flipY : Boolean

Default value : true
Description : 是否翻转图像的 y 轴以匹配 WebGL 的纹理坐标.

generateMipmaps : Boolean

Default value : true
Description : 是否为纹理生产 mipmaps.

offset : Vector2

Default value : new Vector2( 0, 0 )
Description : 从开始算起, 每个方向U和V上, 纹理的单个重复偏移了多少. 范围0.0到1.0.

matrixAutoUpdate : Boolean

Default value : true
Description : 是否自动更新纹理的 UV 转换矩阵.

matrix : Matrix3

Default value : new Matrix3()
Description : UV 转换矩阵. 当 matrixAutoUpdate 为 true, 从属性 offset, repeat, rotation, 和 center 中得到更新.

needsUpdate : Boolean

Default value : false
Description : 设为 true 可在下次使用纹理时触发更新. 对于设置包装模式尤其重要.

onUpdate : Function

Default value : null
Description : 纹理更新时的回调函数.

premultiplyAlpha : Boolean

Default value : false
Description : 如果 RGB 值已经存储为左乘 alpha, 那就设为 true.

repeat : Vector2

Default value : new Vector2( 1, 1 )
Description : 每个方向U和V上, 纹理在表面上重复多少次. 如果在任一方向上将repeat设置为大于1, 则相应的 Wrap 参数也应设置为 THREE.RepeatWrapping 或 THREE.MirroredRepeatWrapping 以实现所需的平铺效果.

rotation : Float

Default value : 0
Description : 纹理沿中心点逆时针方向旋转了的角度.

unpackAlignment : Integer ( 1, 2, 4, 8 )

Default value : 4
Description : 指定内存中每个像素行开头的对齐要求. 允许值为 1(字节对齐), 2(与偶数字节对齐的行), 4(字对齐)和 8(从双字边界开始的行)

version : Integer

Default value : 0
Description : 计算 needsUpdate 用了多少次.

Methods

dispose( ) : null

删除纹理.

transformUv( uv ) : Vector2
uv Vector2 UV坐标

根据纹理的 offset, repeat, wrapS, wrapT 和 flipY 来转换 UV坐标.

clone( ) : this

复制自身

copy( source ) : this
source Texture 纹理

把源纹理复制一份.

toJSON( meta ) : Json
meta Object 元数据

返回 Json 格式的数据.

图解API

纹理展现到材质上是通过材质的map属性。
通过Texture的repeat属性, 可以设置纹理在水平方向x和垂直方向y的重复次数. 而通过wrapS和wrapT可是设置纹理的回环方式, 上面3图分别是 THREE.RepeatWrapping 重复1000, THREE.ClampToEdgeWrapping 夹边(默认)1001 和 THREE.MirroredRepeatWrapping 镜像1002. 点开查看

var texture, loader = new THREE.TextureLoader(); loader.load('---.jpg', function(t){ texture = t; var geometry = new THREE.PlaneGeometry(14, 10), material = new THREE.MeshBasicMaterial({map: texture}), mesh = new THREE.Mesh(geometry, material); scene.add(mesh); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.x = 4; texture.repeat.y = 2; });