搭建网站的步骤和顺序,30天网站建设实录视频云盘,学生做网站怎么收费,做淘宝客网站要多少钱首先看一下贴图效果#xff0c;我们要做的是将一个长方形的贴图在不规则的多边形中贴图 实现思路
1. 取不规则多边形的box2#xff0c;这个box2就是整个贴图的UV坐标
2. 计算每个不规则的多边形顶点的在该box2上的对应映射
3. 更新整个geometry的uvs数据 怎么计算映射我们要做的是将一个长方形的贴图在不规则的多边形中贴图 实现思路
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坐标
