海城网站制作建设,可以做软件的网站有哪些功能,山西推广型网站开发,美术馆网站网页设计方案首先看一下贴图效果#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坐标
