ThreeJS关于Textures概述----(11)

61 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第15天,点击查看活动详情 >


当我们使用Textures纹理时,可以对他的重复数量及重复时的渲染方式进行设置;也可以设置旋转,偏移以达到我们想要的效果;

repeat设置重复值(Vector2)

Texturs中的repeat为Vector2对象,分别指定x,y方向也就是UV方向的重复数量,默认为{x:1,y:1}

wrapS(Number)

这个值定义了纹理贴图在水平方向上将如何包裹,在UV映射中对应于U。 默认值是THREE.ClampToEdgeWrapping,即纹理边缘将被推到外部边缘的纹素。

wrapT (Number)

这个值定义了纹理贴图在垂直方向上将如何包裹,在UV映射中对应于V。 可以使用与 .wrapS : number相同的选项。

offset (Vector2)

设置Texcturs的偏移量,可以指定x/y。

ratotion (Number)

Mathe.PI = 180;可以对Texture进行旋转;围绕ratotion.center进行渲染,center也是一个Vector2对象,我们可以进行更改与变换;

MinFilter

指定纹理如何缩小。默认值:THREE.LinearMipMapLinearFilter;MinFilter(MaxFilter)算法是用于对一维或多维数据进行滤波的算法,滤波的结果为原数据中对应位置领域r内的最小(最大)值。在数据的边界处,使用较小(较大)的邻域.。 7754a80814499d86a0b19a25e17424e.jpg

magFilter

指定纹理如何放大。默认值:THREE.LinearFilter

THREE.NearestFilter 最邻近过滤
THREE.LinearFilter 线性过滤

明显可见两种类型在边界处理的不同效果; 3ab0e775aab805f33be6ada5e3f319b.jpg

f6b5737666ab708715e0eae6628b12e.jpg 当我们使用jpg进行贴图时,图片会进行有损的压缩,而png则是无损压缩;所以推荐使用png贴图; 推荐一个好用的图片压缩网站

链接在这里
因为处理图片时图片压缩时是不断地被/2,/2,所以我们图像的宽高比最好是2的n次方,此时图片处理起来更加高效效果也会更好;

这部分的知识感觉自己也没理解的很透彻,所以感觉总结的比较浅显; 如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧