网站建设投票系统设计神马网站快速排名案例

首先看一下贴图效果，我们要做的是将一个长方形的贴图在不规则的多边形中贴图

实现思路

1. 取不规则多边形的box2，这个box2就是整个贴图的UV坐标

2. 计算每个不规则的多边形顶点的在该box2上的对应映射

3. 更新整个geometry的uvs数据

怎么计算映射？

计算每个点分别到U轴的投影和V轴的投影

具体代码如下：

const box2 = new THREE.Box2().setFromPoints(shapePositions);
const { min, max } = box2;
const width = max.x - min.x;
const height = max.y - min.y;
// 左下角坐标
const leftBottom = new THREE.Vector2(min.x, min.y);
// 右下角坐标
const rightBottom = new THREE.Vector2(max.x, min.y);
// getAreaByVertexs这个是判断不规则图形点的方向的，顺时针还是逆时针，可以不加这个去试试就知道这段代码的意思了
const positions = getAreaByVertexs(shapePositions) < 0 ? [...shapePositions] : shapePositions.reverse();
// 左下角是texture的(0,0)，所以基于此点计算
positions.slice(0, shapePositions.length - 1).forEach((item) => {const v1 = new THREE.Vector2().subVectors(leftBottom, rightBottom);const v2 = new THREE.Vector2().subVectors(leftBottom, item);const distance = leftBottom.distanceTo(item);const angle = v1.angleTo(v2);const uvx = (Math.cos(angle) * distance) / width;const uvy = (Math.sin(angle) * distance) / height;uvs.push(Math.max(0, Math.min(uvx, 1)), Math.max(0, Math.min(uvy, 1)));
});
// 记得拿到uvs数据去更新geometry的uv坐标