Texture operation in ThreeJS

1 The texture supports png gif jpeg format, preferably a square image, preferably the length and width are both integer powers of 2.

2 You can load the texture in the material, and load it in the map property of the Material. Generally, the color is not set.

     

var tture = new THREE.ImageUtils.loadTexture("aa.png");
var material = new THREE.MeshBasicMaterial({map: tture});
tture.wrapS = THREE.RepeatWrapping;     //重复平铺
tture.wrapT = THREE.RepeatWrapping;     //重复平铺
tture.repeat.set( 2, 2 );               //重复次数
        
var cube2 = new THREE.Mesh(cubeGeometry2, material);

Attributes

name description
id The unique number of this texture instance.
uuid The UUID of this object instance. This is automatically assigned, so it should not be edited.
name The name of the object, it can be repeated, the default value is an empty string
image An Image object is usually  created using the  ImageUtils or  ImageLoaderclass. ImageObjects can include images (such as PNG, JPG, GIF, DDS), videos (eg, MP4, OGG/OGV), or a collection of six images for a cube map. To use a video as a texture, you need to use an HTML5 video element as the source of the texture image, and constantly update the texture when the video is played-the VideoTextureclass will automatically handle it.
mipmap User-specified mipmap array (optional)
mapping How to apply the image to the object. The default is the type of UV mapping (THREE.UVMapping), where the U, V coordinates are used to apply the mapping, and the requirement is a single texture.
Other types include:
THREE.CubeReflectionMapping: cube reflection mapping
THREE.CubeRefractionMapping: cube refraction mapping
THREE.EquirectangularReflectionMapping: cylindrical reflection mapping
THREE.EquirectangularRefractionMapping: cylindrical refraction mapping
THREE.SphericalReflectionMapping: spherical reflection mapping
wrapS The default is THREE.ClampToEdgeWrapping, which means that the edge is clamped to the outer boundary of the texture unit (texels). THREE.ClampToEdgeWrapping: clamping edge. Values ​​exceeding 1.0 are fixed at 1.0. For textures in other places exceeding 1.0, the texture of the last pixel is used. Used for textures that need to be accurately covered from 0.0 to 1.0 and have no fuzzy boundaries when overlay filtering. The other two options are:
THREE.RepeatWrapping: Tile repeat. Values ​​exceeding 1.0 are set to 0.0. The texture is repeated once. When rendering objects with textures such as brick walls, if you use a texture map that contains a whole brick wall, it will take up more memory. Usually you only need to load a smaller texture with one or more bricks. Texture, and then map it on the surface of the object multiple times according to the overlapping texture addressing mode, and you can achieve the same effect as using the entire brick wall texture.
THREE.MirroredRepeatWrapping: Mirroring is repeated. The texture is flipped at each boundary, which means that the texture at 1.0 u or v is mirrored and flipped.
wrapT The default is THREE.ClampToEdgeWrapping, which means that the edge is clamped to the outer boundary of the texture unit (texels). The other two options are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
注意: 平铺图像纹理仅在图像尺寸是2的幂次方(2,4,8,16,32,64,128,256,512,1024,2048,…)时工作。每个维度的值不一定是相同的,但每一个维度都必须是2的幂次方。这是WebGL的限制,不是Three.js的。
magFilter This attribute defines how the texture is sampled when a texture unit (texel) covers multiple pixels. The default is THREE.LinearFilter, which means to obtain the 4 nearest texture units to perform bidirectional linear interpolation calculation (good display effect). The other option is THREE.NearestFilter, which means to use the nearest texel (better performance).
minFilter This attribute defines how the texture is sampled when a texel is not enough to cover a single pixel. The default is THREE.LinearMipMapLinearFilter, which means to use multi-level texture mapping (mipmapping) and a tri-linear filter.
Other options are:
THREE.NearestFilter: recent filter. Perform nearest neighbor filtering on the texture base layer.
THREE.NearestMipMapNearestFilter: Select the nearest mip layer and perform the nearest filtering.
THREE.NearestMipMapLinearFilter: Perform linear interpolation between mip layers and perform the nearest filtering.
THREE.LinearFilter: Perform linear filtering on the texture base layer.
THREE.LinearMipMapNearestFilter: Select the nearest mip layer and perform linear filtering.
THREE.LinearMipMapLinearFilter: Perform linear interpolation between mip layers and perform linear filtering.
anisotropy Represents the anisotropy of the texture. The number of samples taken along the axis in the direction with the highest texture unit density. By default, this value is 1. Higher values ​​are clearer than the basic MipMap, but require more samples. Use the renderer.getMaxAnisotropy() method to find the maximum effective anisotropy value of the GPU; this value is usually a power of 2.
format 缺省纹理格式为THREE.RGBAFormat。其他格式有:
THREE.AlphaFormat:对应于GL_ALPHA。Alpha 值
THREE.RGBFormat:Red, Green, Blue 三原色值
THREE.RGBAFormat:Red, Green, Blue 和 Alpha 值
THREE.LuminanceFormat:灰度值
THREE.LuminanceAlphaFormat:灰度值和 Alpha 值
THREE.RGBEFormat
type 缺省纹理格式为THREE.RGBAFormat。其他格式有:
THREE.UnsignedByteType:无符号8位整形值(1个字节)
THREE.ByteType:带符号8位整形值(1个字节)
THREE.ShortType:带符号16位整形值(2个字节)
THREE.UnsignedShortType:无符号16未整形值(2个字节)
THREE.IntType:带符号32位整形值(4个字节)
THREE.UnsignedIntType:无符号32位整形值(4个字节)
THREE.FloatType:单精度浮点型(4个字节)
THREE.HalfFloatType:半浮点型
offset 在U和V方向上,纹理在模型表面上重复绘制时的偏移。通常范围是0.0 到 1.0。注意: offset属性是一个便捷修饰符,仅影响Texture对模型上第一组UV的应用。如果纹理用作需要额外UV集的贴图(例如,大多数库存材料的aoMap或lightMap),则必须手动分配这些UV以获得所需的偏移量。
repeat 纹理在整个表面上重复多少次,在每个方向U和V上。如果在任一方向上repeat设置为大于1,则相应的Wrap参数也应设置为 THREE.RepeatWrappingTHREE.MirroredRepeatWrapping以实现所需的平铺影响。注意: repeat属性是一个便捷修饰符,仅影响Texture对模型上第一组UV的应用。如果纹理用作需要额外UV集的贴图(例如,大多数库存材料的aoMap或lightMap),则必须手动分配这些UV以实现所需的重复。
rotation 纹理围绕中心点旋转多少,以弧度表示。正值是逆时针的。缺省值是0。
center 旋转发生的点。值(0.5,0.5)对应于纹理的中心。默认值是(0,0),左下角。
matrixAutoUpdate 是否更新纹理的UV-变换.matrix从纹理特性.offset,.repeat, .rotation和.center。默认情况下为真。如果直接指定uv-transform矩阵,则将其设置为false。
matrix 纹理的uv转换矩阵。从质地特性渲染更新.offset,.repeat, .rotation和.center当纹理的.matrixAutoUpdate属性为true。当.matrixAutoUpdate属性为false时,可以手动设置此矩阵。默认值是单位矩阵。
generateMipmaps 是否为纹理生成mipmap(如果可能)。默认情况下为真。如果您手动创建mipmap,请将其设置为false。
premultiplyAlpha 在默认情况下,这是PNG图像的标准。如果RGB值已被预乘alpha,则设置为true。
flipY 默认为真。翻转图像的Y轴以匹配WebGL纹理坐标空间。
unpackAlignment 默认值为4。指定内容中每个像素行起点的对齐要求。有效值有 1 (字节对齐byte-alignment), 2 (行起点按偶数字节对齐), 4 (字对齐word-alignment), 和 8(行起点按双字对齐)。参阅:glPixelStorei 以了解更多信息。
encoding 编码方式。默认设置为 THREE.LinearEncoding,但是支持 sRGB, RGBE, RGBM, RGBD, LogLuv 和 Gamma。 重要:如果纹理中的这个值在材料已用后被改变,则需要触发一个Material.needsUpdate操作,以便该值在着色器中得到实现。
version 从0开始计算needsUpdate更新次数
onUpdate 一个回调函数,当纹理被更新时调用(例如,当needsUpdate被设置为true并且纹理被使用时)。
needsUpdate 将其设置为true以在下次使用纹理时触发更新。对于设置换行模式尤为重要。

方法

名称 描述
.updateMatrix () 更新纹理的UV-变换.matrix从纹理特性.offset,.repeat, .rotation和.center。
.clone( texture : Texture ) 制作纹理的副本。请注意,这不是“深层复制”,图像是共享的。
.toJSON( meta ) meta - 包含元数据的可选对象。
将材质转换为three.js JSON格式。
.dispose () 使用一个’dispose’事件类型来调用 EventDispatcher.dispatchEvent 方法(自定义事件类)。
.transformUv ( uv ) 根据此纹理的.offset,.repeat, .wrapS,.wrapT和.flipY属性的值转换uv 。

类型

  1  常规贴图

   var material = new THREE.MeshBasicMaterial({map: tture});

     

2  凹凸贴图

   var material = new THREE.MeshBasicMaterial({color: 0xff0000,bumpMap: tture});

  看不出效果,也许是没用灰度图的原因

     

3  法向贴图

    var material = new THREE.MeshBasicMaterial({color: 0xff0000,normalMap: tture});

   看不出效果

      

4  光照贴图

 var material = new THREE.MeshBasicMaterial({color: 0xff0000,lightMap: tture});

  看不出效果

   

纹理动画,设置一个全局变量tture;然后再render()中使用:

tture.offset.x -=0.006;   //X方向移动

tture.offset.y -=0.006;  //Y方向移动

 

还可以旋转

       tture.rotation+= 0.01;
       tture.center.set(0.5,0.5);

Guess you like

Origin blog.csdn.net/sichuanpb/article/details/110850359