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在每次有新的帧可用

你可能感兴趣的:(threejs)