threejs ShapeGeometry 自定义贴图的uv坐标

问题描述:

由于一些原因,要绘制一个长方形,但是这个长方形并不是 PlaneGeometry,而是一个ShapeGeometry。但是同样的贴图,同样的形状,贴图贴在PlaneGeometry上时可以正常显示,但是贴在ShapeGeometry中却不可以正常显示。所以判断是贴图uv坐标问题。

问题排查:

PlaneGeometry默认顶点坐标和uv坐标对应关系如下,其中点1,2,3,4为geometry的vertex顺序

ShapeGeometry默认顶点坐标和uv坐标对应关系如下:

我们看到,uv是这样的,和他的顶点坐标是一致的,但是实际上,我们希望uv的对应关系和PlaneGeometry是一致的。所以我们手动修改uv和顶点的对应关系

解决办法:

javascript 复制代码
const uvs = [];

uvs.push(0, 1);
uvs.push(1, 1);
uvs.push(1, 0);
uvs.push(0, 0);

groud.geometry.setAttribute('uv', new THREE.Float32BufferAttribute(new Float32Array(uvs), 2));
groud.geometry.getAttribute('uv').needsUpdate = true;
相关推荐
三维搬砖者2 天前
AI 解密大厂 Three.js 三维引擎开发 03|从经纬度到三维世界的坐标解码
webgl·three.js
belldeep2 天前
python:介绍 UV 安装,如何使用 UV 安装配置 OpenHarness
windows·python·环境变量·uv
CG_MAGIC2 天前
3ds Max 多边形编辑:室内构件精细化建模
3d·贴图·建模教程·渲云渲染
摄影图5 天前
隐私保护数字盾牌设计图片素材 满足各类网络安全创作需求
网络·安全·aigc·贴图·插画
新缸中之脑5 天前
HDRI-Generator: 环境贴图生成AI
人工智能·贴图
mxwin6 天前
Unity Mask 贴图:用一张纹理的 RGBA 通道分别控制 PBR 材质参数
unity·材质·贴图
深耕AI6 天前
【VS Code 中 Python 虚拟环境降级完整指南(含 uv 工具实战)】
开发语言·python·uv
threelab6 天前
引擎案例分析 02|GeoLayer 大厂地理可视化方案深度拆解
javascript·3d·webgl
山海鲸可视化6 天前
【山海鲸功能演示】如何设置选中按钮的时候其他按钮切换为默认样式?
webgl·可视化·数据可视化·数据表格·搜索框
weixin_449290016 天前
uv打包Python为exe步骤
开发语言·python·uv