Three.js学习笔记-Textures(纹理)
对贴图的的长宽的的大小必须限制为2的幂的像素，这是WebGL的一个限定
Texture
一个应用在表面或反射或折射的图
构造函数
Texture(image: Image,mapping: Number,wrapS: Number,wrapT: Number,magFilter: Number,format: Bumber,type: Number,anisotropy: Number,enconding: Number)
特性
- id：Integer 只读，这个纹理实例的唯一标识
- uuid: String 自动分配的不应该编辑它
- name: String 操作对象的名字，默认空值
- image: 典型的创建方法用TextureLoader.load(),可以是任何图片或视频(VideoTexture会处理)
- mipmaps: Array 可选的
- mapping: 默认对象类型THREE.UVMapping。如何将图片引用于对象
- wrapS/wrapT 纹理在水平和垂直方向的扩展方式，分别对应于uv贴图的u,v。详细的看Constants-Texture(纹理的常量) 只有图像的(维数)大小是2的幂，图像在纹理上的平铺在起作用，这个WebGL的一个限制
- magFilter: 纹理如何采样，当一个纹理覆盖超过一个像素时。默认THREE.LinearFilter
- minFilter: 纹理如何采样，当一个纹理覆盖不超过一个像素时，默认THREE.LinearMipLinearFilter
- anisotropy: 默认1，值越高结果越模糊，使用的纹理样本就越多，通常为2的幂
- format: 默认THREE.RGBAFormat,对于JPG会自动设置为THREE.RGBFormat
- type: 和format相对于，用于大多数纹理效果
- offset: Vector2 单个纹理的重复从开始偏移多少，在每个u,v方向
- repeat: Vector2 纹理在每个U，V方向上重复多少次，每个方向重复大于1，需要设置wrapS/T 为THREE.RepeatWraping/THREE.MirroredRepeatWraping,实现平铺
- rotation: Number 纹理围绕它的中心点旋转，弧度表示，正值逆时针方向，默认0
- center： Vector2 旋转发生的点 默认(0.,0) 表示左下角，(0.5,0.5)纹理的中心
- matrixAutoUpdate: Boolean 默认true,矩阵从纹理属性，偏移，重复，旋转和中心来更新纹理UV变换，如果直接指定变换矩阵，设置为false
- matrix： Matrix3 纹理的UV变换矩形，默认恒等矩阵
- generateMipmaps: Boolean 默认true,是否为纹理生成mipmaps(如果可能)，手动创建设为false
- premultiplyAlpha: Boolean 默认false,PNG图片的规范。设置为true如果RGB已经存储，就乘alpha
- flipY: Boolean 默认true,旋转图像的y轴，以匹配WebGL的纹理坐标空间
- unpackAlignment: Number 默认4，内存中每个像素行的起始对齐要求
- encoding: Number 默认THREE.LinearEncoding
- version: Integer 从0开始计算多少次，needsUpdate设置为true
- onUpdate : Function 纹理更新的回调
- needsUpdate: Boolean 设为true,以便在下次使用纹理时触发更新
方法 - updateMatrix(): null
- clone(texture: Texture): Texture
- toJSON(meta): Texture
- dispose(): null 调用EventDispatcher.dispatchEvent
- transformUv(uv): null
CanvasTexture
构造函数
Canvastexture(canvas,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy)
有的参数的初始值不一样
特性
继承Texture类
- needsUpdate: Boolean 默认true，必须的一边加载canvas数据
方法
继承Texture类
CompressedTexture
基于压缩形式的数据创建纹理
构造函数
CompressedTexture(mipmaps,width,height,format,type,maping,wrapS,wrapT,magFilter,minFilter,anisotropy)
特性
- flipY 默认false,反转纹理不适合于压缩的纹理
- generateMipmaps: 默认false,无法为压缩纹理生成mipmap
CubeTexture
创建一个由六个图片组成的立方体纹理
var loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/pisa/' );
var textureCube = loader.load( [
'px.png', 'nx.png',
'py.png', 'ny.png',
'pz.png', 'nz.png'
] );
构造函数
CubeTexture(images,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy)
特性
继承Texture类
方法
继承Texture类
DataTexture
构造函数
DataTxture(data,width,height,format,type,mapping,wrapS.wrapT,magFilter,minFilter,anisotropy)
data 参数必须是ArrayBuffer或者数组视图的类型
特性
- image: Image 用一个保存有data,width,height的类型的对象重写了
DataTexture3D
这种类型的材质只能用在WebGL2渲染中
构造函数
DateTexture3D(data:TypedArray,width,height,depth)
DepthTexture
需要对WEBGL_depth_texture扩展的支持
构造函数
DepthTexture(width,height,type,mapping,wrapS,wrapT,magFilter,minFilter,anisotropy,format)
特性
公共的特性看Texture基类，但一些的默认值发生了变化
方法
参考Texture基类
VideoTexture
和Texture类相同，只是将needsUpdate设置为true，以便在视频播放时更新纹理。自动创建mipmap也被禁用。
构造函数
VideoTexture( video : Video, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropy : Number )
特性
参考Texture基类
- needsUpdate 无需手动设置，他是由update方法处理的
方法
参考Texture基类
update(): null 自动设置和更新needsUpdate为true在每次有新的帧可用