参考 textureWrap()

textureWrap()

当形状的 uv 坐标超出纹理时,改变纹理的行为方式。

为了使 texture() 正常工作,一个形状需要一种将其表面上的点映射到图像中的像素的方法。内置的形状,如 rect()box(),已经根据它们的顶点具有了这些纹理映射。使用 vertex() 创建的自定义形状需要将纹理映射传递为 uv 坐标。

每次调用 vertex() 都必须包括 5 个参数,如 vertex(x, y, z, u, v),以将坐标 (x, y, z) 处的顶点映射到图像中坐标 (u, v) 的像素。例如,矩形图像的角落默认映射到矩形的角落:

// 应用图像作为纹理。 texture(img); <p>// 绘制矩形。 rect(0, 0, 30, 50); </p>

如果上面代码片段中的图像尺寸为 300 x 500 像素,则可以通过以下方式获得相同的结果:

// 应用图像作为纹理。 texture(img); <p>// 绘制矩形。 beginShape();</p> <p>// 左上角。 // u: 0, v: 0 vertex(0, 0, 0, 0, 0);</p> <p>// 右上角。 // u: 300, v: 0 vertex(30, 0, 0, 300, 0);</p> <p>// 右下角。 // u: 300, v: 500 vertex(30, 50, 0, 300, 500);</p> <p>// 左下角。 // u: 0, v: 500 vertex(0, 50, 0, 0, 500);</p> <p>endShape(); </p>

textureWrap() 控制纹理在其 uv 坐标超出纹理时的行为。这样做可以产生有趣的视觉效果,如平铺。例如,上面的自定义形状可能具有超出图像宽度的 u 坐标:

// 应用图像作为纹理。 texture(img); <p>// 绘制矩形。 beginShape(); vertex(0, 0, 0, 0, 0);</p> <p>// 右上角。 // u: 600 vertex(30, 0, 0, 600, 0);</p> <p>// 右下角。 // u: 600 vertex(30, 50, 0, 600, 500);</p> <p>vertex(0, 50, 0, 0, 500); endShape(); </p>

600 的 u 坐标大于 300 的纹理图像宽度,这就带来了一些有趣的可能性。

第一个参数 wrapX 接受三种可能的常量。如果传递 CLAMP,如 textureWrap(CLAMP) 中所示,则纹理边缘的像素将延伸到形状的边缘。如果传递 REPEAT,如 textureWrap(REPEAT) 中所示,则纹理将重复平铺直到达到形状的边缘。如果传递 MIRROR,如 textureWrap(MIRROR) 中所示,则纹理将重复平铺直到达到形状的边缘,同时在平铺之间翻转其方向。默认情况下,纹理使用 CLAMP 模式。

第二个参数 wrapY 是可选的。它接受相同的三个常量:CLAMPREPEATMIRROR。如果传递了其中一个常量,如 textureWRAP(MIRROR, REPEAT),那么纹理将在水平方向上 MIRROR,在垂直方向上 REPEAT。默认情况下,wrapY 将被设置为与 wrapX 相同的值。

注意:textureWrap() 只能在 WebGL 模式下使用。

示例

语法

textureWrap(wrapX, [wrapY])

参数

wrapX

可以是 CLAMP、REPEAT 或 MIRROR

wrapY

可以是 CLAMP、REPEAT 或 MIRROR

Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/material.js and open a pull request!

相关参考