Operación de textura en ThreeJS

1 La textura admite el formato png gif jpeg, preferiblemente una imagen cuadrada, preferiblemente la longitud y el ancho son potencias enteras de 2.

2 Puede cargar la textura en el material y cargarla en la propiedad de mapa del Material. Generalmente, el color no está configurado.

     

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);

Atributos

nombre descripción
identificación El número único de esta instancia de textura.
uuid UUID de esta instancia de objeto. Esto se asigna automáticamente, por lo que no debe editarse.
nombre El nombre del objeto, se puede repetir, el valor predeterminado es una cadena vacía
imagen Un objeto de imagen generalmente se  crea usando la  clase ImageUtils o  ImageLoader. ImageLos objetos pueden incluir imágenes (como PNG, JPG, GIF, DDS), videos (por ejemplo, MP4, OGG / OGV) o una colección de seis imágenes para un mapa de cubos. Para usar un video como textura, debe usar un elemento de video HTML5 como fuente de la imagen de textura y actualizar constantemente la textura cuando se reproduce el video; la VideoTextureclase lo manejará automáticamente.
mipmap Matriz de mipmap especificada por el usuario (opcional)
cartografía Cómo aplicar la imagen al objeto. El valor predeterminado es el tipo de mapeo UV (THREE.UVMapping), donde se utilizan las coordenadas U, V para aplicar el mapeo y el requisito es una textura única.
Otros tipos incluyen:
THREE.CubeReflectionMapping: mapeo de reflexión de cubo
THREE.CubeRefractionMapping: mapeo de refracción de cubo
TRES.EquirectangularReflectionMapping: mapeo de reflexión cilíndrica
TRES.EquirectangularRefractionMapping: mapeo de refracción cilíndrica
TRES.Mapeo de reflexión esférica: mapeo de reflexión esférica
Envolturas El valor predeterminado es THREE.ClampToEdgeWrapping, lo que significa que el borde está sujeto al límite exterior de la unidad de textura (texels). THREE.ClampToEdgeWrapping: borde de sujeción. Los valores superiores a 1,0 se fijan en 1,0. Para texturas en otros lugares superiores a 1.0, se utiliza la textura del último píxel. Se utiliza para texturas que deben cubrirse con precisión de 0.0 a 1.0 y no tienen límites difusos cuando se superponen filtros. Las otras dos opciones son:
TRES.RepeatWrapping: Repetición de mosaico. Los valores superiores a 1,0 se establecen en 0,0. La textura se repite una vez. Al renderizar objetos con texturas como paredes de ladrillos, si usa un mapa de textura que contiene una pared de ladrillos completa, ocupará más memoria. Por lo general, solo necesita cargar una textura más pequeña con uno o más ladrillos. Textura y luego mapear en la superficie del objeto varias veces de acuerdo con el modo de direccionamiento de textura superpuesta, y puede lograr el mismo efecto que si usa toda la textura de la pared de ladrillo.
TRES.MirroredRepeatWrapping: La duplicación se repite. La textura se invierte en cada límite, lo que significa que la textura en 1.0 uov se refleja y se invierte.
envolver El valor predeterminado es THREE.ClampToEdgeWrapping, lo que significa que el borde está sujeto al límite exterior de la unidad de textura (texels). Las otras dos opciones son THREE.RepeatWrapping y THREE.MirroredRepeatWrapping.
注意: 平铺图像纹理仅在图像尺寸是2的幂次方(2,4,8,16,32,64,128,256,512,1024,2048,…)时工作。每个维度的值不一定是相同的,但每一个维度都必须是2的幂次方。这是WebGL的限制,不是Three.js的。
magFilter Este atributo define cómo se muestrea la textura cuando una unidad de textura (texel) cubre varios píxeles. El valor predeterminado es THREE.LinearFilter, que significa obtener las 4 unidades de textura más cercanas para realizar el cálculo de interpolación lineal bidireccional (buen efecto de visualización). La otra opción es THREE.NearestFilter, que significa utilizar el texel más cercano (mejor rendimiento).
minFilter Este atributo define cómo se muestrea la textura cuando un texel no es suficiente para cubrir un solo píxel. El valor predeterminado es THREE.LinearMipMapLinearFilter, que significa utilizar mapeo de texturas multinivel (mipmapping) y un filtro tri-lineal.
Otras opciones son:
THREE.NearestFilter: filtro reciente. Realice el filtrado de vecino más cercano en la capa base de textura.
THREE.NearestMipMapNearestFilter: seleccione la capa mip más cercana y realice el filtrado más cercano.
THREE.NearestMipMapLinearFilter: Realice una interpolación lineal entre capas mip y realice el filtrado más cercano.
THREE.LinearFilter: Realice un filtrado lineal en la capa base de la textura.
THREE.LinearMipMapNearestFilter: seleccione la capa mip más cercana y realice un filtrado lineal.
THREE.LinearMipMapLinearFilter: Realice una interpolación lineal entre capas mip y realice un filtrado lineal.
anisotropía Representa la anisotropía de la textura. El número de muestras tomadas a lo largo del eje en la dirección con la densidad de unidad de textura más alta. De forma predeterminada, este valor es 1. Los valores más altos son más claros que el MipMap básico, pero requieren más muestras. Utilice el método renderer.getMaxAnisotropy () para encontrar el valor máximo de anisotropía efectiva de la GPU; este valor suele ser una potencia de 2.
formato 缺省纹理格式为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);

Supongo que te gusta

Origin blog.csdn.net/sichuanpb/article/details/110850359
Recomendado
Clasificación