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;
相关推荐
小柯南敲键盘1 天前
跨马翻译:AI批量图片翻译与视频字幕翻译工具,助力跨境电商高效运营
贴图
小柯南敲键盘1 天前
跨马翻译AI图片翻译工具,批量处理图片视频字幕,助力跨境电商高效运营
贴图
Maiko Star2 天前
Python 包与项目管理工具——uv
python·uv
StarDream-Online2 天前
Windows 下 uv 安装与配置完全指南(含环境变量设置)
windows·uv
新的瑞拉公主2 天前
Unity游戏发布微信小游戏:从构建到提审
unity·webgl·微信小游戏·开放数据域
来让爷抱一个3 天前
2026 纹理一致性实战:贴图不许花脸,百智云精灵图把材质契约写进素材包
人工智能·机器学习·材质·贴图
CAE虚拟与现实3 天前
Uvicorn或者uv是什么?
uv·gunicorn·uvicorn
PatrickYao04223 天前
Linux安装UV
linux·运维·uv
慧都小妮子4 天前
实时大屏掉帧排查:WebGL 图表库选型的 5 项可实测检查
webgl·scichart.js·实时大屏掉帧·前端图表选型
❀͜͡傀儡师4 天前
移动端 360° 商品展示方案:从 20MB 雪碧图到 800KB 丝滑视频
ffmpeg·webgl·sprite