Texturoperation in ThreeJS

1 Die Textur unterstützt das PNG-GIF-JPEG-Format, vorzugsweise ein quadratisches Bild, vorzugsweise sind Länge und Breite beide ganzzahlige Potenzen von 2.

2 Sie können die Textur in das Material und in die Map-Eigenschaft des Materials laden. Im Allgemeinen ist die Farbe nicht festgelegt.

     

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

Attribute

Name Beschreibung
Ich würde Die eindeutige Nummer dieser Texturinstanz.
uuid Die UUID dieser Objektinstanz. Dies wird automatisch zugewiesen, daher sollte es nicht bearbeitet werden.
Name Der Name des Objekts kann wiederholt werden, der Standardwert ist eine leere Zeichenfolge
Bild Ein Bildobjekt wird normalerweise mit der   Klasse ImageUtils oder erstellt  ImageLoader. ImageObjekte können Bilder (wie PNG, JPG, GIF, DDS), Videos (z. B. MP4, OGG / OGV) oder eine Sammlung von sechs Bildern für eine Würfelkarte enthalten. Um ein Video als Textur zu verwenden, müssen Sie ein HTML5-Videoelement als Quelle für das Texturbild verwenden und die Textur beim Abspielen des Videos ständig aktualisieren. Die VideoTextureKlasse wird dies automatisch verarbeiten.
Mipmap Benutzerdefiniertes Mipmap-Array (optional)
Kartierung So wenden Sie das Bild auf das Objekt an. Die Standardeinstellung ist die Art der UV-Zuordnung (THREE.UVMapping), bei der die U-, V-Koordinaten zum Anwenden der Zuordnung verwendet werden und die Anforderung eine einzelne Textur ist.
Andere Typen sind:
THREE.CubeReflectionMapping:
Würfelreflexionsabbildung THREE.CubeRefractionMapping:
Würfelrefraktionsabbildung THREE.EquirectangularReflectionMapping: Zylinderreflexionsabbildung
THREE.EquirectangularRefractionMapping: Zylinderreflexionsabbildung
THREE.SphericalReflectionMapping: sphärische Reflexionsabbildung
Wraps Der Standardwert ist THREE.ClampToEdgeWrapping. Dies bedeutet, dass die Kante an der Außengrenze der Textureinheit (Texel) festgeklemmt wird. THREE.ClampToEdgeWrapping: Klemmkante. Werte über 1,0 sind fest auf 1,0 festgelegt. Für Texturen an anderen Stellen, die 1,0 überschreiten, wird die Textur des letzten Pixels verwendet. Wird für Texturen verwendet, die von 0,0 bis 1,0 genau abgedeckt werden müssen und beim Überlagern keine unscharfen Grenzen haben. Die anderen beiden Optionen sind:
THREE.RepeatWrapping: Kachelwiederholung. Werte über 1,0 werden auf 0,0 gesetzt. Die Textur wird einmal wiederholt. Wenn Sie beim Rendern von Objekten mit Texturen wie Ziegelwänden eine Texturkarte verwenden, die eine ganze Mauer enthält, wird mehr Speicherplatz benötigt. Normalerweise müssen Sie nur eine kleinere Textur mit einem oder mehreren Steinen laden. Textur und dann Karte Es wird mehrmals auf der Oberfläche des Objekts entsprechend dem überlappenden Texturadressierungsmodus angezeigt, und Sie können den gleichen Effekt erzielen wie bei Verwendung der gesamten Ziegelwandtextur.
THREE.MirroredRepeatWrapping: Die Spiegelung wird wiederholt. Die Textur wird an jeder Grenze gespiegelt, was bedeutet, dass die Textur bei 1,0 u oder v gespiegelt und gespiegelt wird.
WrapT Der Standardwert ist THREE.ClampToEdgeWrapping. Dies bedeutet, dass die Kante an der Außengrenze der Textureinheit (Texel) festgeklemmt wird. Die anderen beiden Optionen sind THREE.RepeatWrapping und THREE.MirroredRepeatWrapping.
注意: 平铺图像纹理仅在图像尺寸是2的幂次方(2,4,8,16,32,64,128,256,512,1024,2048,…)时工作。每个维度的值不一定是相同的,但每一个维度都必须是2的幂次方。这是WebGL的限制,不是Three.js的。
magFilter Dieses Attribut definiert, wie die Textur abgetastet wird, wenn eine Textureinheit (Texel) mehrere Pixel abdeckt. Der Standardwert ist THREE.LinearFilter. Dies bedeutet, dass die 4 nächstgelegenen Textureinheiten ermittelt werden, um eine bidirektionale lineare Interpolationsberechnung durchzuführen (guter Anzeigeeffekt). Die andere Option ist THREE.NearestFilter, was bedeutet, dass das nächste Texel verwendet wird (bessere Leistung).
minFilter Dieses Attribut definiert, wie die Textur abgetastet wird, wenn ein Texel nicht ausreicht, um ein einzelnes Pixel abzudecken. Der Standardwert ist THREE.LinearMipMapLinearFilter. Dies bedeutet, dass ein mehrstufiges Textur-Mapping (Mipmapping) und ein dreilinearer Filter verwendet werden.
Weitere Optionen sind:
THREE.NearestFilter: Letzter Filter. Führen Sie eine Filterung des nächsten Nachbarn auf der Texturbasisschicht durch.
THREE.NearestMipMapNearestFilter: Wählen Sie die nächste Mip-Ebene aus und führen Sie die nächste Filterung durch.
THREE.NearestMipMapLinearFilter: Führen Sie eine lineare Interpolation zwischen Mip-Ebenen durch und führen Sie die nächste Filterung durch.
THREE.LinearFilter: Führen Sie eine lineare Filterung für die Texturbasisschicht durch.
THREE.LinearMipMapNearestFilter: Wählen Sie die nächste Mip-Ebene aus und führen Sie eine lineare Filterung durch.
THREE.LinearMipMapLinearFilter: Führen Sie eine lineare Interpolation zwischen Mip-Ebenen durch und führen Sie eine lineare Filterung durch.
Anisotropie Repräsentiert die Anisotropie der Textur. Die Anzahl der Proben, die entlang der Achse in der Richtung mit der höchsten Dichte der Textureinheiten entnommen wurden. Standardmäßig ist dieser Wert 1. Höhere Werte sind klarer als die grundlegende MipMap, erfordern jedoch mehr Beispiele. Verwenden Sie die Methode renderer.getMaxAnisotropy (), um den maximalen effektiven Anisotropiewert der GPU zu ermitteln. Dieser Wert ist normalerweise eine Potenz von 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);

Ich denke du magst

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