Operação de textura em ThreeJS

1 A textura suporta o formato png gif jpeg, de preferência uma imagem quadrada, de preferência o comprimento e a largura são potências inteiras de 2.

2 Você pode carregar a textura no material e carregá-la na propriedade map do Material.Geralmente, a cor não é definida.

     

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

nome Descrição
eu ia O número exclusivo desta instância de textura.
uuid O UUID desta instância do objeto. Isso é atribuído automaticamente, portanto, não deve ser editado.
nome O nome do objeto, pode ser repetido, o valor padrão é uma string vazia
imagem Um objeto Image geralmente é  criado usando a  classe ImageUtils ou  ImageLoader. ImageOs objetos podem incluir imagens (como PNG, JPG, GIF, DDS), vídeos (por exemplo, MP4, OGG / OGV) ou uma coleção de seis imagens para um mapa de cubo. Para usar um vídeo como textura, você precisa usar um elemento de vídeo HTML5 como a fonte da imagem da textura e atualizar constantemente a textura quando o vídeo for reproduzido - a VideoTextureclasse irá lidar com isso automaticamente.
mipmap Matriz mipmap especificada pelo usuário (opcional)
mapeamento Como aplicar a imagem ao objeto. O padrão é o tipo de mapeamento UV (THREE.UVMapping), onde as coordenadas U, V são usadas para aplicar o mapeamento e o requisito é uma única textura.
Outros tipos incluem:
THREE.CubeReflectionMapping: mapeamento de reflexão de cubo
THREE.CubeRefractionMapping: mapeamento de refração de cubo
THREE.EquirectangularReflectionMapping: mapeamento de reflexão cilíndrica
THREE.EquirectangularRefractionMapping: mapeamento de refração cilíndrica
THREE.SphericalReflectionMapping: mapeamento de reflexão esférica
WrapS O padrão é THREE.ClampToEdgeWrapping, o que significa que a borda é fixada ao limite externo da unidade de textura (texels). THREE.ClampToEdgeWrapping: borda de fixação. Valores superiores a 1,0 são fixados em 1,0. Para texturas em outros lugares que excedem 1,0, a textura do último pixel é usada. Usado para texturas que precisam ser cobertas com precisão de 0,0 a 1,0 e não têm limites difusos na filtragem de sobreposição. As outras duas opções são:
THREE.RepeatWrapping: Repetição de blocos. Valores superiores a 1,0 são definidos como 0,0. A textura é repetida uma vez. Ao renderizar objetos com texturas, como paredes de tijolos, se você usar um mapa de textura que contém uma parede de tijolos inteira, ele ocupará mais memória. Normalmente, você só precisa carregar uma textura menor com um ou mais tijolos. Textura e, em seguida, mapear na superfície do objeto várias vezes, de acordo com o modo de endereçamento de textura sobreposta, e você pode obter o mesmo efeito que usar a textura inteira da parede de tijolos.
THREE.MirroredRepeatWrapping: O espelhamento é repetido. A textura é invertida em cada limite, o que significa que a textura em 1,0 u ou v é espelhada e invertida.
embrulhar O padrão é THREE.ClampToEdgeWrapping, o que significa que a borda é fixada ao limite externo da unidade de textura (texels). As outras duas opções são THREE.RepeatWrapping e THREE.MirroredRepeatWrapping.
注意: 平铺图像纹理仅在图像尺寸是2的幂次方(2,4,8,16,32,64,128,256,512,1024,2048,…)时工作。每个维度的值不一定是相同的,但每一个维度都必须是2的幂次方。这是WebGL的限制,不是Three.js的。
magFilter Este atributo define como a textura é amostrada quando uma unidade de textura (texel) cobre vários pixels. O padrão é THREE.LinearFilter, que significa obter as 4 unidades de textura mais próximas para realizar o cálculo de interpolação linear bidirecional (bom efeito de exibição). A outra opção é THREE.NearestFilter, que significa usar o texel mais próximo (melhor desempenho).
minFilter Este atributo define como a textura é amostrada quando um texel não é suficiente para cobrir um único pixel. O padrão é THREE.LinearMipMapLinearFilter, que significa usar mapeamento de textura de vários níveis (mapeamento mip) e um filtro tri-linear.
Outras opções são:
THREE.NearestFilter: filtro recente. Execute a filtragem de vizinho mais próximo na camada de base da textura.
THREE.NearestMipMapNearestFilter: Selecione a camada mip mais próxima e execute a filtragem mais próxima.
THREE.NearestMipMapLinearFilter: Execute a interpolação linear entre as camadas mip e execute a filtragem mais próxima.
THREE.LinearFilter: executa a filtragem linear na camada de base da textura.
TRÊS.LinearMipMapNearestFilter: Selecione a camada mip mais próxima e execute a filtragem linear.
TRÊS.LinearMipMapLinearFilter: Execute a interpolação linear entre as camadas mip e a filtragem linear.
anisotropia Representa a anisotropia da textura. O número de amostras tomadas ao longo do eixo na direção com a maior densidade de unidade de textura. Por padrão, esse valor é 1. Valores mais altos são mais claros do que o MipMap básico, mas requerem mais amostras. Use o método renderer.getMaxAnisotropy () para encontrar o valor máximo de anisotropia efetiva da GPU; esse valor geralmente é uma potência 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);

Acho que você gosta

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